Компоненты в Figma

Figma. Компоненты

Содержание

1. Что такое компонент в Figma
2. Как создавать компоненты
3. Как создавать дочерний экземпляр компонента
4. Внесение изменений в компонент

4.1. Внесение изменений через мастер-компонент

4.2. Внесение изменений в отдельный дочерний компонент

5. Библиотека компонентов

5.1. Что такое библиотека компонентов

5.2. Зачем нужна библиотека компонентов

1. Что такое компонент в Figma

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

Компоненты в Фигме – это элементы интерфейса, которые используются повторно в дизайне сайта. Компонентом может быть таблица данных, иконка, кнопка, форма, и другие сложные объекты. Благодаря этому при внесении изменений в компонент, все экземпляры будут изменяться автоматически.

Они бывают родительскими (мастер-компонент). Это те, что создаются при первоначальном создании элемента. В них определяются основные свойства. И второй компонент – дочерний экземпляр (копия мастер-компонента). Его можно использовать повторно в разных проектах в большом количестве.

Вот список вещей, которые люди часто превращают в компоненты:

• компоненты пользовательского интерфейса
• логотипы компании и активы бренда
• иконки
• макеты устройств
• компоненты платформы ОС (Android, iOS, Linux, OSX, etc)
• курсоры
• аннотации компонентов
• записки и голосовые «стикеры» для участия в совместных дизайн-спринтах
• элементы создания диаграмм, например, стрелки и формы блок-схем

2. Как создавать компоненты

Важный момент – для создания компонента вам нужна уже готовая группа элементов, которую в дальнейшем вы назначаете компонентом. Эта группа может находиться в любой месте любого фрейма документа, но будет удобнее, если вы сделаете отдельный фрейм под компоненты – UI-кит. 

Таким образом вам не придётся потом искать мастер-компонент, когда потребуется внести изменения, вы не удалите его случайно и не измените по ошибке. Самое лучшее решение – сделать отдельную страницу под UI и все компоненты помещать в неё.

Итак, чтобы создать компонент:

Выбираем группу элементов или элемент.

Жмём CTRL+ALT+K либо открываем меню правой кнопкой мыши и выбираем Create Component

Всё, компонент готов. В окне навигатора слоёв состояние значка изменится на фиолетовый иконку из четырех ромбов, цвет названия элемента также станет фиолетовым.

3. Как создавать дочерний экземпляр компонента

Есть несколько способов:

1. Сделать копию компонента: либо дублированием (CTRL+D), либо через CTRL+C > CTRL+V. Очевидным неудобством способа является то, что вы либо создаёте копию вообще там же, либо вставляете её почти наугад. 
2. Переключаем окно навигатора на Assets и перетаскиваем из него элемент в нужное нам место на макете

Теперь ваш элемент есть в макете, и если вы измените один из параметров стиля компонента, то изменятся и стили всех его экземпляров в документе. В навигаторе экземпляры отмечены иконкой в виде фиолетового пустого ромба.

4. Внесение изменений в компонент

4.1. Внесение изменений через мастер-компонент

При внесении изменений в мастер-компоненте, все дочерние также будут принимать эти изменения. Например, можно изменить расположение текста в кнопке, или сам текст, изменить размер кнопки или радиус закругления углов.

Все эти изменения будут касаться дочерних компонентов. 

Если в дочернем компоненте изменить какое-то свойство, при внесении изменений в это свойство у мастер-компонента,  эти изменения уже не будут касаться ранее измененного дочернего компонента.

Например, если у одного из дочерних компонентов кнопки поменять цвет, то  при изменении цвета у мастер-компонента данная кнопка останется с тем цветом, который был применен именно к ней.

Чтобы вернуть дочерний компонент в первоначальное состояние необходимо в меню компонентов справа нажать Reset all overrides (если нужно вернуть все свойства к первоначальным) или выбрать конкретное измененное свойство, которое необходимо вернуть к первоначальному варианту как у мастер-компонента.

4.2. Внесение изменений в отдельный дочерний компонент

В дочерних компонентах невозможно вносить изменения в слои, менять расположение элементов внутри дочерних компонентов или добавлять элементы, изменения возможны только в свойствах элементов, а именно: цвета, шрифты, скругления, обводки, заливки, прозрачность и так далее.

В том случае, если какой-то дочерний компонент необходимо отделить от мастер-компонента, вы можете сделать его обычным элементом, или отдельной группой. Для этого выделите компонент кликнув на него и нажмите «Ctrl+Alt+B», или просто кликните по нему правой кнопкой мыши и выберите опцию «Detach Instance».

5. Библиотека компонентов

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

Создайте новый фрейм, назовите его Components и вложите в него мастер-компоненты.

Для больших проектов или для работы в группе создаются библиотеки компонентов.

5.1. Что такое библиотека компонентов.

Библиотека — это файл, где хранятся основные компоненты для проекта. Он точно такой же, как файл с готовым дизайном, — отличается только назначением. Если нужно добавить в проект один из стандартных элементов, дизайнер не рисует его заново, а берёт из библиотеки.

Для библиотек нет строгих стандартов оформления. Обычно компоненты структурируют и снабжают заголовками. Их удобно группировать по фреймам — например, в зависимости от интерфейса (мобильный или десктопный) и типа (уведомления, контекстные меню и тому подобное).

5.2. Зачем нужны библиотеки компонентов

Профессионалы сходятся во мнении: библиотеки компонентов — одно из главных преимуществ Figma перед другими программами для дизайна. Они позволяют:

• Экономить время. Из компонентов интерфейс собирается как конструктор. Заготовки в виде миниатюр расположены в левой панели, откуда их перетаскивают в проект. Экземплярам легко менять «родителя». Так можно быстро переключаться, например, с одного стиля на другой. Время — деньги, поэтому использование компонентов означает для клиентов экономию бюджета.
• Эффективно работать в команде. Библиотеки публикуются для всей команды, и каждый сотрудник пользуется элементами одной дизайн-концепции. Если в неё внести правки, компоненты обновятся у всех, а разработчики получат уведомление. При этом в Figma отличный контроль версий за месяц. Кто-то ошибся? Не проблема, откатитесь назад!
• Упростить редизайн. Экземплярам автоматически передаются изменения «родителей». Поэтому, когда сайту или приложению нужно обновить дизайн, основная работа — просто отредактировать библиотеку.
• Использовать готовые наработки. К файлу Figma можно открыть доступ по ссылке. Благодаря этой функции в интернете есть бесплатные библиотеки, которыми может пользоваться каждый.