Компоненты в Figma: чем отличаются от групп и фреймов и когда их использовать
Компоненты это одна из тех функций Figma, которые делают работу дизайнера быстрее и профессиональнее. Если вы работаете с большим количеством экранов внутри файла, на фрилансе, в агентстве или в продукте, компоненты должны быть частью вашего рабочего процесса.
В этой статье разберём зачем их использовать и чем они отличаются от групп и фреймов.
В этой статье разберём зачем их использовать и чем они отличаются от групп и фреймов.
Группа
Группа объединяет несколько элементов в один слой. Это удобно когда нужно перемещать или скрывать несколько объектов вместе. Создаётся сочетанием Cmd+G на Mac или Ctrl+G на Windows. Или через правую кнопку мышки, где выбираем Group Selection.
У групп есть важные ограничения. Размер группы определяется её содержимым: если двигать или менять элементы внутри, границы группы меняются автоматически. При масштабировании все элементы внутри тоже масштабируются. Нельзя применить к группе стили фона, скругления или обводки, потому что у группы нет собственных визуальных свойств.
Группа подходит для черновиков и набросков, когда нужно временно собрать несколько элементов вместе. В коммерческих проектах группы используются редко, удобнее сразу работать с фреймом.
Группа подходит для черновиков и набросков, когда нужно временно собрать несколько элементов вместе. В коммерческих проектах группы используются редко, удобнее сразу работать с фреймом.
Фрейм
Фрейм это основной строительный блок в Figma. В других инструментах его аналог называется artboard, но в Figma фреймы можно вкладывать друг в друга, и это открывает много возможностей.
В отличие от группы, фрейм имеет собственные визуальные свойства: фон, скругление, обводку, тень. Размер фрейма задаётся независимо от содержимого, и если двигать элементы внутри, границы фрейма не меняются. Для дочерних элементов можно задать constraints, правила поведения при изменении размера фрейма. Например, кнопка может быть закреплена в правом нижнем углу и оставаться там при любом размере экрана. Можно подключить Auto Layout и сетку.
Полезный факт: если "детачить" компонент (правая кнопка мышки Detach instance), он превращается именно во фрейм. Это потому что компонент в Figma является переиспользуемым фреймом.
Фрейм подходит для большинства задач в макете. Экраны, карточки, кнопки, секции страницы, всё это фреймы.
Фрейм подходит для большинства задач в макете. Экраны, карточки, кнопки, секции страницы, всё это фреймы.
Компонент
Компонент решает проблему которую не могут решить ни группа, ни фрейм: переиспользование.
Вы создаёте мастер-компонент, храните его на отдельной странице файла и используете его копии, то есть инстансы, внутри макетов. Главное преимущество в том, что когда нужно внести изменения, вы меняете только мастер. Все изменения автоматически применяются ко всем копиям во всём файле. Копии мастер компонента называют Instance.
С компонентом достаточно одного действия в мастере.
В инстансе можно менять текст, иконку, видимость отдельных слоёв. Это называется overrides. При этом связь с мастером сохраняется и изменения из мастера продолжают применяться, кроме тех свойств которые вы переопределили вручную.
В инстансе можно менять текст, иконку, видимость отдельных слоёв. Это называется overrides. При этом связь с мастером сохраняется и изменения из мастера продолжают применяться, кроме тех свойств которые вы переопределили вручную.
Когда что использовать
Группа: временные наброски и черновики, когда нужно быстро объединить несколько элементов.
Фрейм: экраны, секции, карточки, кнопки. Фрейм используется почти везде.
Компонент: любой элемент который повторяется больше одного раза. Кнопки, иконки, карточки, строки списка, поля ввода.
Фрейм: экраны, секции, карточки, кнопки. Фрейм используется почти везде.
Компонент: любой элемент который повторяется больше одного раза. Кнопки, иконки, карточки, строки списка, поля ввода.
Что ещё умеют компоненты
Варианты позволяют создавать несколько состояний одного компонента. Например, кнопка в состоянии Default, Hover и Disabled. Свойства компонентов, такие какBoolean, Text и Instance swap, дают возможность управлять содержимым прямо из панели, не заходя внутрь.
Это большая отдельная тема, которую мы подробно разбираем в курсе по компонентам Figma.
Это большая отдельная тема, которую мы подробно разбираем в курсе по компонентам Figma.