Figma. Компоненты
Содержание
- Что такое компонент в Figma
- Как создавать компоненты
- Как создавать дочерний экземпляр компонента
- Внесение изменений в компонент
4.1. Внесение изменений через мастер-компонент
4.2. Внесение изменений в отдельный дочерний компонент
- Библиотека компонентов
5.1. Что такое библиотека компонентов
5.2. Зачем нужна библиотека компонентов
- Что такое компонент в Figma
Компоненты в Figma позволяют легко и быстро добавлять уже готовые элементы в макет, массово менять их параметры в макетах и передавать их свойства наследникам. Компоненты созданы для того, чтобы повторно использовать уже готовые решения: например, карточки товаров, кнопки, списки и любые другие блоки любой вложенности.
Компоненты в Фигме – это элементы интерфейса, которые используются повторно в дизайне сайта. Компонентом может быть таблица данных, иконка, кнопка, форма, и другие сложные объекты. Благодаря этому при внесении изменений в компонент, все экземпляры будут изменяться автоматически.
Они бывают родительскими (мастер-компонент). Это те, что создаются при первоначальном создании элемента. В них определяются основные свойства. И второй компонент – дочерний экземпляр (копия мастер-компонента). Его можно использовать повторно в разных проектах в большом количестве.
Вот список вещей, которые люди часто превращают в компоненты:
- компоненты пользовательского интерфейса
- логотипы компании и активы бренда
- иконки
- макеты устройств
- компоненты платформы ОС (Android, iOS, Linux, OSX, etc)
- курсоры
- аннотации компонентов
- записки и голосовые «стикеры» для участия в совместных дизайн-спринтах
- элементы создания диаграмм, например, стрелки и формы блок-схем
- Как создавать компоненты
Важный момент – для создания компонента вам нужна уже готовая группа элементов, которую в дальнейшем вы назначаете компонентом. Эта группа может находиться в любой месте любого фрейма документа, но будет удобнее, если вы сделаете отдельный фрейм под компоненты – UI-кит.
Таким образом вам не придётся потом искать мастер-компонент, когда потребуется внести изменения, вы не удалите его случайно и не измените по ошибке. Самое лучшее решение – сделать отдельную страницу под UI и все компоненты помещать в неё.
Итак, чтобы создать компонент:
Выбираем группу элементов или элемент.
Жмём CTRL+ALT+K либо открываем меню правой кнопкой мыши и выбираем Create Component
Всё, компонент готов. В окне навигатора слоёв состояние значка изменится на фиолетовый иконку из четырех ромбов, цвет названия элемента также станет фиолетовым.
- Как создавать дочерний экземпляр компонента
Есть несколько способов:
- Сделать копию компонента: либо дублированием (CTRL+D), либо через CTRL+C > CTRL+V. Очевидным неудобством способа является то, что вы либо создаёте копию вообще там же, либо вставляете её почти наугад.
- Переключаем окно навигатора на Assets и перетаскиваем из него элемент в нужное нам место на макете
Теперь ваш элемент есть в макете, и если вы измените один из параметров стиля компонента, то изменятся и стили всех его экземпляров в документе. В навигаторе экземпляры отмечены иконкой в виде фиолетового пустого ромба.
4. Внесение изменений в компонент
4.1. Внесение изменений через мастер-компонент
При внесении изменений в мастер-компоненте, все дочерние также будут принимать эти изменения. Например, можно изменить расположение текста в кнопке, или сам текст, изменить размер кнопки или радиус закругления углов.
Все эти изменения будут касаться дочерних компонентов.
Если в дочернем компоненте изменить какое-то свойство, при внесении изменений в это свойство у мастер-компонента, эти изменения уже не будут касаться ранее измененного дочернего компонента.
Например, если у одного из дочерних компонентов кнопки поменять цвет, то при изменении цвета у мастер-компонента данная кнопка останется с тем цветом, который был применен именно к ней.
Чтобы вернуть дочерний компонент в первоначальное состояние необходимо в меню компонентов справа нажать Reset all overrides (если нужно вернуть все свойства к первоначальным) или выбрать конкретное измененное свойство, которое необходимо вернуть к первоначальному варианту как у мастер-компонента.
4.2. Внесение изменений в отдельный дочерний компонент
В дочерних компонентах невозможно вносить изменения в слои, менять расположение элементов внутри дочерних компонентов или добавлять элементы, изменения возможны только в свойствах элементов, а именно: цвета, шрифты, скругления, обводки, заливки, прозрачность и так далее.
В том случае, если какой-то дочерний компонент необходимо отделить от мастер-компонента, вы можете сделать его обычным элементом, или отдельной группой. Для этого выделите компонент кликнув на него и нажмите «Ctrl+Alt+B», или просто кликните по нему правой кнопкой мыши и выберите опцию «Detach Instance».
5. Библиотека компонентов
Когда вы работаете с компонентами, удобно держать их в одном месте, чтобы они не терялись на холсте. Организовать компоненты для небольших проектов, например, сайта из десятка страниц, можно в отдельном фрейме-контейнере.
Создайте новый фрейм, назовите его Components и вложите в него мастер-компоненты.
Для больших проектов или для работы в группе создаются библиотеки компонентов.
5.1. Что такое библиотека компонентов.
Библиотека — это файл, где хранятся основные компоненты для проекта. Он точно такой же, как файл с готовым дизайном, — отличается только назначением. Если нужно добавить в проект один из стандартных элементов, дизайнер не рисует его заново, а берёт из библиотеки.
Для библиотек нет строгих стандартов оформления. Обычно компоненты структурируют и снабжают заголовками. Их удобно группировать по фреймам — например, в зависимости от интерфейса (мобильный или десктопный) и типа (уведомления, контекстные меню и тому подобное).
5.2. Зачем нужны библиотеки компонентов
Профессионалы сходятся во мнении: библиотеки компонентов — одно из главных преимуществ Figma перед другими программами для дизайна. Они позволяют:
- Экономить время. Из компонентов интерфейс собирается как конструктор. Заготовки в виде миниатюр расположены в левой панели, откуда их перетаскивают в проект. Экземплярам легко менять «родителя». Так можно быстро переключаться, например, с одного стиля на другой. Время — деньги, поэтому использование компонентов означает для клиентов экономию бюджета.
- Эффективно работать в команде. Библиотеки публикуются для всей команды, и каждый сотрудник пользуется элементами одной дизайн-концепции. Если в неё внести правки, компоненты обновятся у всех, а разработчики получат уведомление. При этом в Figma отличный контроль версий за месяц. Кто-то ошибся? Не проблема, откатитесь назад!
- Упростить редизайн. Экземплярам автоматически передаются изменения «родителей». Поэтому, когда сайту или приложению нужно обновить дизайн, основная работа — просто отредактировать библиотеку.
- Использовать готовые наработки. К файлу Figma можно открыть доступ по ссылке. Благодаря этой функции в интернете есть бесплатные библиотеки, которыми может пользоваться каждый.