Библиотеки компонентов в Figma: что это, зачем нужно и как работает

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

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

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

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

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

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

Как создать библиотеку компонентов

Сделайте пустой файл, который станет библиотекой, и наполняйте его компонентами. Вначале нарисуйте составные части компонента. Затем выделите их и щёлкните Create Component в верхней панели.

Чтобы новую библиотеку можно было использовать в проектах, её нужно опубликовать. Сделайте это на вкладке Assets, кликнув иконку-книгу и нажав Publish.

С библиотеками проще работать, если соблюдать несколько правил:

• Добавлять всё, что встретится больше двух раз. Интерактивные элементы, иконки, слайдеры, тапбары, аватары пользователей, лейауты экранов, меню и так далее.
• Начинать с меньшего. По принципам атомарного дизайна вначале создают наименьшие неделимые элементы: например, заголовки и параграфы, иконки, чек-боксы. Позже они станут частью других компонентов.
• Вкладывать состояния. Изображения для элемента в разных состояниях часто располагают одно над другим. Например, кнопка с наведённым курсором и нажатая кнопка. Чтобы переключиться, включают и отключают видимость каждого из них.
• Использовать фреймы как папки. Создать фрейм можно с помощью символа решётки в верхней панели. Это прямоугольник, напоминающий окно в операционной системе.

Фрейм называют как категорию элементов. Допустим, «Уведомления» — все уведомления помещают в него. Визуально так проще ориентироваться, но самое главное — в раскрывающемся списке компонентов появится одноимённый пункт.

• Заполнять описания. У основного компонента есть поле описания. В нём указывают, когда используется и как ведёт себя элемент. Так коллеги не будут теряться в догадках: подсказка появляется при наведении курсора.
• Один интерфейс — одна библиотека. Особенно полезно для больших команд. Если десктопный интерфейс создают одни люди, а мобильный — другие, им лучше пользоваться разными библиотеками. Меньше компонентов в меню, меньше обновлений — никто не отвлекается на лишнее.

Как правильно использовать библиотеки

Когда библиотека опубликована для команды, её компоненты появляются на вкладке Assets в левой панели. После этого участники могут их использовать.

Поместить экземпляр компонента в дизайн можно тремя способами:

• Скопировать. Копия основного компонента или его копии автоматически становится экземпляром.
• Перетащить. Из меню Assets в рабочую область.
• Изменить. На правой панели у экземпляров есть параметр Instance. Здесь нужный основной компонент можно выбрать из списка.

Бывает, что изменённый экземпляр уже сильно отличается от «родителя». Если он ещё понадобится в таком виде, можно сделать две вещи:

• Перенести изменения в основной компонент. Функция Push Overrides to Main Component в блоке Instances. Все параметры передаются «родителю» и сразу наследуются остальными экземплярами. Подходит, если изменения произошли во всей дизайн-концепции.
• Сделать экземпляр самостоятельным компонентом. Клик правой кнопкой мыши, Detach Instance. Экземпляр «разберётся» на составные части, которые легко превратить в новый основной компонент. Для случаев, когда прежний «родитель» ещё пригодится.