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

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

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

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

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

Любая библиотека компонентов в фигма — это сложно, но крайне удобно в будущем, как для команды, так и для одиночного дизайнера-фрилансера

Библиотека компонентов, далее БК состоит из собственно, компонентов и стилей. Это ее основа.

Вот основные стили, которые тебе понадобятся для создания своей БК

Типографика в библиотеки компонентов

Перед началом работы мы должны определить основные стили текста твоей БК. Особенно тут нас интересует размер текста и интерлиньяж.  Это позволит определить визуальную иерархию твоего текста. Подробно и красиво о текстах в фигма читай по ссылке.

Типографика для библиотеки компонентов

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

Подбор цветовой схемы для библиотеки компонентов

С текстом разобрались, теперь пора бы поговорить о цвете.

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

1 создай несколько основных цветов

2 на основе главных цветов создай еще больше оттенков светлее-темнее.(есть масса сайтов-помощников, которые помогут тебе., например sassme.jim-nielsen.com)

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

Чтобы в будущем избавить себя от страданий переименования  стилей давайте им название не по цвету, а по значению. Например не «зеленый», а «основной» и тд.

Когда у тебя готовы все стили для твоей БК  — это уже 30% от всего пути.  Благодаря так несправедливо недооцененным стилям ты можешь использовать одну и ту же комбинацию стилей текста и цвета для разных элементов и в любой момент их изменять.

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

Помни о правильной иерархии в названиях стилей. Фигма позволяет группировать названия стилей. Например главный цвет/90%

Стили текста

Сам по себе текст имеет гораздо больше настроек, но фигма дает нам возможность работать со стилями текста более гибко. Так к стилю  не привязывается выравнивание и цвет, и ты всегда можешь в одинаковых компонентах применять к тексту разное выравнивание и цвет.  Это очень круто и увеличивает возможности тонкой настройки твоей работы в 100 раз, нет в 104 раза.

Давать названия стилям можно по-разному. Я советую пользоваться такой логикой

Название шрифта размер/начертание

Вопреки мнению школьников у обводок стиля не бывает, хотя соответствующая пиктограмма там есть. Для обводки можно применить стиль цвета. Данные на июнь 2019.

Стили для эффектов

Ты можешь создавать супер сложные комбинации из 101 тени и объединить их в один стиль. Давать названия то же нужно логичные. Например, выбрать ориентир в размытии или % прозрачности. Я беру всегда значение blur и называю стили соответственно:

Тень/16  Внутренняя тень/24 и тд.

первый шаг к созданию своей Библиотеки компонентов есть. Ты подобрал и настроил стили, дал и правильное и логичное название.

Читай в следующих статьях, как настраивать мастер компонент для своей библиотеки



Было полезно? — подпишись на нас в вк и инстаграме