Back to Course

Design software

0% Complete
0/0 Steps
  1. Figma
    20 Topics
    |
    20 Quizzes
  2. Illustrator
    19 Topics
    |
    14 Quizzes
  3. Photoshop
    22 Topics
    |
    22 Quizzes
Lesson 1, Topic 6
In Progress

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

10.02.2022
Lesson Progress
0% Complete

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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 можно открыть доступ по ссылке. Благодаря этой функции в интернете есть бесплатные библиотеки, которыми может пользоваться каждый.