Фигма. Компоненты.
Компоненты это особые элементы в Фигме, которые упрощают вашу работу. По сути фигма дает нам модель как работают верстальщики, но в визуальном формате.
В недавнем обновлении Фигма представила “варианты”, дополнительные возможности компонентов, но об этом в отдельной статье.
UPD.2024 — у меня появился ютуб канал, на котором я рассказываю о дизайне, заходите смотерть.
Итак начать рассказ про компоненты стоит непосредственно с того как их сделать.Для начала нужно выделить объект который необходимо сделать компонентом, после чего:
— команда с клавиатуры “Alt-cmd-K” на маке и подозреваю что “Alt-Ctrl-K” на винде
— правая кнопка мыши — Create Component
— нажать на кнопку сверху, по центру
— так же можно в поиске вписать “Create Component”.
В фигме вариантов сделать одно и то же действие достаточно много, не удивлюсь если вы знаете и другие способы создания компонентов.
Компонент мы сделали, допустим это будет иконка стрелочки, вот такая:
Стоит обратить внимание на то что теперь в списке слоев данный элемент выделен цветом и особой иконкой компонента.
Теперь мы можем использовать этот компонент во всем своем макете. И если вдруг вам нужно будет что либо поменять, вам нужно будет отредактировать только мастер компонент, и все его копии изменяться.
Быстрый доступ к компонентам через вкладку Assets, это рядом со слоями. Группировка компонентов там происходит с помощью фреймов.
Создаете фрейм, называете его “Иконки” скидываете туда мастер компоненты иконок. После чего все ваши иконки будут в одном месте. Сам фрейм при этом делать компонентом не нужно.
Примерно так:
Раньше нужно было делать специальные названия, для того чтобы удобно группировать компоненты и получать к ним быстрый доступ, не захламлять Ассеты, Сейчас есть более удобный способ — “Варианты”
Сейчас еще несколько слов о сложных компонентах и на сегодня все.
Сложный компонент это компонент, который включает в себя другие компоненты. Например это может быть кнопка с иконкой, как на картинке выше. А может быть и намного больше. Целый экран сайта так же можно делать компонентом, в котором могут быть и кнопки с иконками, навигационное меню, карточки и т.д.
Тема не из простых, одно вытекает из другого, начинаешь упоминать разные мелочи и можно писать очень много по факту. Однако не хочется затягивать статью.
Заключение
Если хочется комплексно пройтись по фигме, у меня есть персональные консультации по данной программе.
Если у вас есть вопросы вы можете писать мне в телеграм или инстаграм.
Если вам необходим дизайн сайта, или создать сайт на конструкторе, так же можете писать, покажу примеры работ, все расскажу и сориентирую по стоимости.
Спасибо за ваше внимание, и уделенное время, для прочтения статьи, надеюсь она вам поможет.
Originally published at https://zen.yandex.ru.
