Figma с нуля - Фреймы и группы | Веб дизайн. Урок 2

Урок о фреймах и группах в Figma! Основы веб (UI/UX) дизайна!

В этом мини-курсе вы познакомитесь с основами работы в программе Фигма. Изучите основные инструменты и функции самого популярного графического редактора для веб и UI UX-дизайна. В конце мини-курса вы создадите первый экран сайта! Урок 2 из 8.

Курс разработан таким образом, что вы изучите Figma на практике, создавая веб-сайты, интерфейсы и приложения. Под руководством автора вы познакомитесь с возможностями программы и создадите крутые работы для своего портфолио.
Дополнительно в курс мы включили главы по основам графического дизайна и финальную главу о том, как успешно начать карьеру в веб-дизайне.
После успешного прохождения курса вы сможете брать свои первые заказы на фрилансе или устроиться джуниором (младшим специалистом) в студию.
В курсе вас ждёт:
- 40 практических занятий
- Сертификат о прохождении курса
- Никаких ограничений по времени
- Обратная связь и кураторство
- Чат в Telegram

Таймкод:
00:00 - фреймы и группы в Figma
00:40 - группы
03:00 - отличия группы и фрейма
15:00 - создание карточки для сайта

#figma #videosmile

[VideoSmile]

«Супер Figma» - это обучающий курс по дизайну сайтов, сервисов и мобильных приложений в программе Figma для начинающих

В курсе вас ждёт:
- 40 практических занятий
- Сертификат о прохождении курса
- Никаких ограничений по времени
- Обратная связь и кураторство
- Чат в Telegram


Переходите на сайт с курсом, чтобы узнать все подробности!

[likey_dikey]

*Группа и фрейм.*
*Основные команды:*
*1)* Ctrl + G = Group selection = Создать группу с выделенным контентом
*2)* Ctrl + Shift + G = Ungroup = Разбить группу
*3)* F = Создать фрейм
*4)* Ctrl + Alt + G = Frame selection = Создать фрейм с выделенным контентом
Группы и фреймы выполняют, казалось бы, одну и ту же функцию, т. е. _и то, и другое - это контейнер для ваших объектов. Но при этом у них есть существенные различия._

*Различия группы и фрейма.*
*I)* *Ключевые различия:*
*1)* [3:23] Размеры группы подстраиваются точно под размеры элементов - Фрейм не подстраивается под размеры контента внутри;
[5:17] Constraints - ограничения, отступы.
Ctrl + Left Mouse Button - игнорирование отступов при изменении размеров фрейма.
Alt - просмотр отступов.
[6:50] Вынести элемент, принадлежащий данной группе, за её границы не получится, потому что группа всегда принимает размер контента.
*2)* [7:18] Если вы вносите во фрейм какой-то объект, он попадает туда;
[7:49] Достаточно того, чтобы зашёл только курсор в область фрейма, для переноса объекта.
[8:25] Backspace (пробел) перед тем, как вы подвели в эту область объект - Если вы хотите, чтобы при подведении ваш объект не попадал внутрь.
[8:58] Имейте это в виду: именно это поведение фреймов вызывает очень много проблем, особенно у новичков.
[9:11] Resize to fit - Как сделать так, чтобы наш фрейм всё-таки подстроился под размеры контента.
-
*II)* *Дополнительные различия:*
[9:32] Если проводить аналогию, то фрейм похож на артборды внутри других программ, например, Photoshop, Illustrator и так далее, т. е. это место, где вы начинаете работу: первым делом вы создаёте фрейм.
[10:13] Нет никаких ограничений относительно вложенности.
[10:49] Простое правило: Для того чтобы сгруппировать несколько объектов, используйте группы. Фреймы используйте по необходимости.
*3)* [11:18] Clip content - Обрезка контента у фрейма - Для группы такое поведение не характерно;
*4)* [11:58] Только с фреймами работают constraints’ы, упомянутые ранее;
[12:55] Переключение между фреймом и группой.
-
*III)* *Также фреймы и группы немного по-разному относятся к контенту, который находится внутри них:*
*5)* [13:11] Группа не может существовать без контента;
*6)* [13:34] Заливка у фрейма - фон, заливка же у группы - цвет объектов, которые находятся внутри группы.
[13:58] _Вывод:_ _Фрейм является полноценным объектом, независимым от контента. Группа же никак не может существовать без контента_ и большинство свойств, которые находятся внутри группы, применяются именно к контенту, а не к самой группе, как к отдельному объекту. По этой причине не существует функции создания группы в качестве самостоятельного объекта, как у фрейма по упомянутой в самом начале горячей клавише F.

[aselak]

Спасибо! У вас талант педагога. Ясно, чётко и не скучно.

[austinbones]

Браво! Без воды, не мямля, сразу по делу и сразу с практикой. Автор видео герой

[aksiniiavi]

ваш мини-курс больше, скорее, ваша визитная карточка как любителя своего дела и отличного куратора! после его прохождения охота взять полный курс, спасибо!

[SB-mzgu]

Открыла Figma и поняла, что ничего не понимаю ) С наскока самостоятельно разобраться не получилось, и я чуть приуныла. Но потом нашла ваш курс. Спасибо вам огромное! После первого видео разобралась, что к чему. Всё понятно, по делу, с практическими примерами.

[VinogradovaIra]

Благодарю вас за крутые уроки! Начала изучать Figma с 0, и благодаря вашим урокам все получается)

[anastasiapomazan]

Спасибо большое за чудесный урок! Всё понятно и даже легче, чем в фотошоп или иллюстратор

[jewgenijbeifus]

Cлушаю, учусь и радуюсь за такие доходчивые уроки. Огромная благодарность! 👌👍

[rdooowu]

Спасибо вам большое.Здоровья вам.И долгих лет счастливой жизни вам и вашей семье❣❣❣❣

[nataliakorsak]

Очень полезно и информативно ))очень радует и помогает)

[katya_katya]

Спасибо за ваши видео! Все очень доступно !

[eywifi]

Благодарю за урок! Все понятно сказано)

[jysyizm]

Спасибо за урок, все получилось и понравилось😊

[basarada]

Спасибо, крутой курс, однозначно лайк, у тебя есть продвинутый курс или что то подобное?

[yf]

Здравствуйте, техническая часть разобрана хорошо, а вот смысл не раскрыт, я так и не понял когда нужен фрейм, а когда применяются слои. Можно ведь всё сделать фреймами и пихать их друг в друга

[marialosfell]

Ура меня получилось, хоть и было немного сложно, путалась, но вроде получилось)

[gayanegalstyan]

Здравствуйте! Спасибо огромное за Ваши видео!!! у меня возникла проблема, не могли бы помочь? Я вставила картинку, но она обрезалась автоматически. Может что-то неправильно сделала?

[jebkycg]

Добрый день! Попробовала сделать по Вашему уроку, на моменте когда добавляем текст и надо его двигать, не появляется отступы. Как это исправить?

[Ekaterina_Kozhinova]

Добрый вечер, подскажите, как выделить иконку и текст вместе ? У меня не получается выделить, либо только по отдельности, либо фрейм съезжает.