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

Я работаю над созданием и обслуживанием основной библиотеки нашей дизайн-системы Lexicon. Мы использовали приложение Sketch в течение первого года, а затем перешли на Figma, где управление библиотекой отличалось в некоторых аспектах, что усложняло нам переход.

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

В этой статье будут описаны шаги, необходимые для создания библиотеки компонентов с помощью Figma, с использованием стилей и главного компонента. (Мастер-компонент позволит вам применить сразу несколько изменений.) Я также подробно расскажу об организации компонентов и дам вам возможное решение, если у вас большое количество значков в библиотеке.

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

Начиная

Это руководство было создано с точки зрения дизайнера, и если у вас есть хотя бы базовые знания о Figma (или Sketch), оно должно помочь вам приступить к созданию, организации и поддержке библиотеки компонентов для вашей команды дизайнеров.

Если вы новичок в Figma, ознакомьтесь со следующими руководствами, прежде чем приступить к статье:

• Лучшие практики: компоненты, стили и общие библиотеки
• Введение в Figma: руководство для начинающих по основам Figma (видео)
• Фигма для начинающих
• Фигма 101

Требования

Прежде чем начать, есть некоторые требования, которые мы должны выполнить, чтобы определить стили для библиотеки.

Шкала типографики

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

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

Причина этого кроется в цели дизайна — веб-сайт обычно предназначен для общения и конвертации, поэтому он дает вам одно или два прямых действия. В этом контексте проще иметь 36 пикселей для основного заголовка, 24 пикселя для дополнительного заголовка и 16 пикселей для текста описания.

Связанный ресурс: «8-Point Grid: Typography On The Web» Эллиота Даля.

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

Лично я редко использую для текста более 24 пикселей. Для компонентов чаще используются небольшие размеры — обычно от 12 до 18 пикселей в зависимости от важности текста.

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

Связанный ресурс: «Определение модульной шкалы типов для веб-интерфейса» Келли Дерн.

Цветовая схема

Во-вторых, нам нужно определить цветовую схему. Я думаю, будет лучше, если вы разделите эту задачу на две части.

1. Во-первых, вам нужно определить основные цвета системы . Я рекомендую не усложнять и использовать максимум четыре или пять цветов (включая проверочные цвета), потому что чем больше цветов вы включите сюда, тем больше вещей вам придется поддерживать в будущем.
2. Затем создайте больше значений цвета, используя функции Sass, такие как «Светлее» и «Темнее» — это очень хорошо работает для пользовательских интерфейсов. Основное преимущество этого метода заключается в использовании одного и того же оттенка для разных вариантов и получении математического правила, которое можно автоматизировать в коде. Вы не можете сделать это напрямую с Figma, но любой генератор цветов Sass будет работать нормально — например, SassMe от Джима Нильсена. Мне нравится увеличивать количество функций на 1%, чтобы иметь больше выбора цветов.

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

Рекомендуемое чтение : «Как вы называете цветовые переменные?» Крис Койер

Стили Фигмы

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

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

Конкретный пример

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

Мы можем определить стили для следующего:

• Текст
• Цвета
• Эффекты
• Сетки

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

Имя группы/имя стиля

Я включил предложение о том, как назвать стили текста и цвета ниже.

Стили текста

Свойства, которые вы можете определить в текстовом стиле:

• Размер шрифта
• Вес шрифта
• Высота линии
• Межбуквенное расстояние

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

Именование текстовых стилей

Я рекомендую использовать правило именования, такое как «Размер/Вес».
(например: 16/обычный, 16/полужирный, 16/жирный).

Figma допускает только один уровень отступа, если вам нужно включить шрифт, вы всегда можете добавить префикс перед размером:
Размер/вес шрифта FontFamily или размер/вес шрифта FF
*(например: SourceSansPro 16/Обычный или SSP 16/Обычный ).*

Цветовые стили

Цветовой стиль использует шестнадцатеричное значение ( #FFF ) и непрозрачность в качестве свойств.

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

Именование цветовых стилей

Для лучшей организации я рекомендую использовать это правило «Цвет/Вариант». Мы назвали наши цветовые стили, используя «Primary/Default» для начального цвета, «Primary/L1», «Primary/L2» для более светлых вариантов и «Primary/D1», «Primary/D2» для более темных вариантов.

Эффекты

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

Сетки

Чтобы предоставить что-то очень полезное для вашей команды, включите стили сетки. Вы можете определить сетку 8 пикселей, сетку с 12 столбцами, гибкие сетки, чтобы вашей команде не нужно было создавать их заново.

Совет : Воспользовавшись этой функцией, вы можете указать все различные точки останова как «стили сетки».

Главный компонент

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

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

Кнопки!

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

• 2 типа цвета ( основной | дополнительный )
• 2 размера кнопок ( Обычные | Маленькие )
• 4 типа контента ( только текст | только значок | текст + значок справа | значок слева + текст )
• 5 состояний ( По умолчанию | Наведение | Активно | Отключено | Фокус )

Это дало бы нам до 88 различных компонентов для обслуживания только с набором кнопок, упомянутых выше!

Начнем шаг за шагом

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

• Единая фигура для фона кнопки, чтобы затем мы могли разместить цветовые стили для заливки и границы;
• Единственный текст, который будет иметь как текстовые, так и цветовые стили;
• Три компонента значков (расположенные справа, по центру и слева) заполнены цветовым стилем (вы сможете легко поменять местами значки).

Второй шаг — создать основной компонент (используйте сочетание клавиш Cmd + Alt + K на Mac или Ctrl + Alt + K на Windows) со всеми вариантами в качестве экземпляров. Я предлагаю использовать другой и нейтральный стиль для элементов внутри основного компонента и использовать настоящие стили для подкомпонентов, этот трюк поможет команде использовать только подкомпоненты.

Вы можете увидеть визуальную разницу между главным компонентом и подкомпонентом на следующем шаге:

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

Теперь вы можете начать применять различные стили, которые мы видели ранее, к элементам внутри подкомпонента и, конечно же, вы можете скрыть ненужные элементы в этом подкомпоненте.

Выравнивание текста

Как я показал вам в стилях, выравнивание не зависит от стиля. Поэтому, если вы хотите изменить выравнивание текста, просто выберите его, нажав Cmd / Ctrl и изменив его. Слева, по центру или справа: все это будет работать, и вы можете определить различные подкомпоненты, как я сделал с кнопками.

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

Компонентная организация

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

Мы все были там, решение проще, чем вы думаете!

Вот что я узнал о том, как организовать компоненты.

Именование Фигмы

В то время как в Sketch вся организация зависит только от имени одного компонента, в Figma она зависит от имени страницы , имени фрейма и имени одного компонента — именно в таком порядке.

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

Вот как я это разделил:

• Имя файла = имя библиотеки (например, Lexicon);
• Название страницы = группа компонентов (например, карты);
• Имя кадра = тип компонента (например, карта изображения, карта пользователя, карта папки и т. д.);
• Имя компонента = состояние компонента (например, по умолчанию, при наведении, активно, выбрано и т. д.).

Добавление уровней отступов

При создании библиотеки Lexicon я обнаружил, что для некоторых компонентов, таких как кнопки, которые мы видели ранее, на самом деле требуется более трех уровней отступов.

В этих случаях вы можете расширить наименование, используя тот же метод, что и в Sketch для вложенных символов (используя косую черту в имени компонента, например, «Компонент/Подкомпонент»), при условии, что вы делаете это только после третьего уровня отступ, соблюдая структурный порядок первых трех уровней, как описано в предыдущем пункте.

Вот как я организовал наши кнопки:

• Имя страницы = Группа компонентов (например, кнопки);
• Имя кадра = размер компонента (например, обычный или малый);
• Имя компонента = Стиль/Тип/Состояние (например, Основной/Текст/Наведение).

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

Иконки Организация

Организация значков в Figma может быть сложной задачей при включении большого количества значков.

В отличие от Sketch, в котором используется функция прокрутки, Figma использует подменю для разделения компонентов. Проблема в том, что если у вас есть большое количество значков, сгруппированных в подменю, в какой-то момент они могут исчезнуть с экрана (мой опыт работы с Figma на MacBook Pro).

Вот два возможных решения:

• Решение 1
  Создайте страницу с именем «Значки», а затем рамку для каждой буквы алфавита, затем поместите каждую иконку в рамку на основе имени значка. Например, если у вас есть значок с именем «Плюс», то он будет помещаться в рамку «P».
• Решение 2
  Создайте страницу под названием «Значки», а затем разделите ее на фреймы в зависимости от категорий значков. Например, если у вас есть значки, представляющие лодку, автомобиль и мотоцикл, вы можете поместить их в рамку с названием «транспортные средства».

Заключение

Теперь, когда вы знаете, что именно стоит за созданием командной библиотеки в Figma, вы можете начать создавать ее самостоятельно! У Figma есть бесплатный план подписки, который поможет вам начать работу и поэкспериментировать с этой методологией в одном файле (однако, если вы хотите поделиться групповой библиотекой, вам нужно будет подписаться на вариант «Профессиональный»).

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

Наконец, позвольте мне упомянуть, что здесь, в Liferay, мы любим проекты с открытым исходным кодом, поэтому мы делимся копией нашей библиотеки Lexicon вместе с некоторыми другими ресурсами. Вы можете бесплатно использовать компоненты библиотеки Lexicon и другие ресурсы, и мы всегда рады вашим отзывам (в том числе в виде комментариев к Figma, если хотите).

• Скачать библиотеку «Лексикон»

Если у вас есть вопросы или вам нужна помощь с вашей первой библиотекой компонентов в Figma, спросите меня в комментариях ниже или напишите мне в Twitter.

Дополнительные ресурсы

• «8-точечная сетка: типографика в Интернете», Эллиот Даль, freeCodeCamp
• Определение модульной шкалы типов для веб-интерфейса», Келли Дерн, Medium
• «Относительные цветовые палитры с Sass», Итан Мюллер, Sparkbox
• SassMe (инструмент, созданный Джимом Нильсеном, который позволяет визуализировать цветовые функции Sass HSL в режиме реального времени)
• «Как вы называете цветовые переменные?», Крис Койер, CSS-Tricks
• «Лучшие практики: компоненты, стили и общие библиотеки», Томас Лоури, Figma
• Канал Фигмы на YouTube
• Справочные статьи Figma