Перевод публикуется с сокращениями, автор оригинальной статьи Marc Andrew.
Вам нравится смотреть на чистый холст всякий раз, когда вы приступаете к работе в Figma? Разве не было бы лучше быстрее начать дизайнерские проекты и сэкономить массу времени? В этом вам поможет дизайн-система – тандем библиотеки компонентов и гайда по стилю в одном флаконе. Она дает возможность иметь под рукой основные элементы UI и позволяет сосредоточиться на главном.
Давайте разбираться, как там все устроено.
Почему сначала необходимо создать цветовую палитру?
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/5f724e41b1ecbfa4421a34e0ac313737.jpeg)
Когда вы приступите к созданию своей дизайн-системы в Figma, начните с цветовой палитры и постарайтесь свести базовые цвета к минимуму, где это возможно. В целях гибкости имеет смысл расширить базовые цвета, используя различные оттенки (более светлые варианты) и полутона (более темные варианты).
Теперь вы можете создать различные вариации базового цвета, настроив значения насыщенности и яркости с помощью опции HSL внутри Colour Panel в Figma.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/43807ba65543e2eaa88429e1015c447c.jpeg)
Здесь используется специальный инструмент для ускорения процесса создания оттенков и полутонов. Вы можете просто вставить в свой базовый цвет HEX-значение, а оно создаст идеально рассчитанные варианты. Затем выберите, какие оттенки вы хотели бы использовать в системе и просто скопируйте обратно HEX-значения, которые затем можете вставить в соответствующие параметры заливки.
Прежде чем двигаться далее, полезно рассмотреть простые условности именования цветовой палитры. Рекомендуется использовать что-то простое и понятное:
- Primary / Base
- Secondary / Base
Использование слэша позволит классифицировать цвета и поможет быстро найти соответствующий на панели инспектора.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/331eb2783c6653acf0a27423fd39b804.jpeg)
Вам также необходимо реализовать стандартные базовые цвета: красный (error), зеленый (success) и желтый (warning) для использования, например, в уведомлениях, инпутах и т. д.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/e01e1e5ac0b94bf1fb142ae6550cefe9.jpeg)
Черный и оттенки серого тоже необходимы. Помимо обязательного белого применяйте различные уровни его прозрачности. Такие варианты идеально подходят, например, когда вы хотите вставить иконку поверх изображения.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/13db918bf6e97bfa48b7e6e266be7d68.jpeg)
Не забудьте о фирменных цветах. Вы обнаружите, что обращаетесь к ним очень часто для многих проектов, поэтому стоит создать их одновременно с основной цветовой палитрой.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/fa5ff895493b2e8d0f7a2505b88218b2.jpeg)
И, наконец, здоровый выбор градиентов всегда пригодится.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/cbc9639ef90b18bdca70088961a13c9a.jpeg)
Если вы все же решите добавить градиенты в первоначальную сборку, поддерживайте некоторую универсальность, например, добавив направления слева направо и сверху вниз.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/1cda11adcb26fdd17148ca03dbda68cd.jpeg)
Нужно больше типографики!
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/04cd5cc133a4f2fbbe340b96965d8272.jpeg)
В отличие от Sketch, Figma объединяет Alignment и Colour в стилях и разбивает их на части, позволяя вам иметь гораздо меньше текстовых стилей для управления. Это делает файл намного чище и легче.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/da710917ba0d15c157d8060912c97752.jpeg)
При построении собственной системы рекомендуется использовать несколько семейств шрифтов (если это возможно), чтобы они гармонично дополняли друг друга и не были слишком декоративны. Помимо этого кастомизируйте стили для обычных H1 – H5, используя модульное масштабирование, танцы с «pt» и соотношением.
Соглашение об именах полностью зависит от того, что вам ближе. Многие выбирают структуру именования, вроде Heading 1 – Heading 6, а также Body, Body L, Body S и т. д.
Для лучшей систематизации следуйте аналогичному шаблону цветовой палитры:
- Lead 24 / Family #1 / Regular
- Lead 24 / Family #2 / Regular
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/adcc7cc0150a891cfef04faf6457b5cb.jpeg)
В настоящее время в Figma приходится производить переход на другое семейство шрифтов вручную по одному стилю зараз. Это неудобно! Но не отчаивайтесь, есть плагин Batch Styler, который облегчит вашу участь и изменит несколько стилей сразу.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/75b6ad03c983f25c99b8dc3cffece19a.png)
Не забывайте об Elevations и Shadows
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/ae93ff5e45f116df10b551f188a9da34.jpeg)
Создадим shadows, подходящие как для светлого, так и для темного дизайна, а также в пару к ним elevations (20%, 40%, 60%, 80% и т. д.).
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/0ddc6b8c9ec574a69b8fde18bee88e6b.jpeg)
Иконки – хорошей системе нужны иконки
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/dbb64d82b665ae433b0d94ee15d8dc50.jpeg)
Найдите легковесный и разнообразный набор значков для вашей первоначальной сборки. Нынче в моде векторные значки и иконки с заливкой, например, свободно распространяемый вариант Eva.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/4a7ca03a101bab6356f2e59df67bc009.jpeg)
Вот еще один набор иконок – beautiful Feather.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/0dc183f2c93a0a53394a27ee0e118661.jpeg)
Используйте органайзер для иконок
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/3f3063be826543a5933135431aa2b7b6.jpeg)
Для владельцев яблочных девайсов отличный вариант – IconJar, а для Windows существует Nucleo.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/da6440dd6c49b2179e0b402ea9d4fc78.jpeg)
Вернемся на созданную ранее главную страницу с компонентами и набросаем туда иконки из набора Eva.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/8425aaa0355c70f9fa1cfe3b0791d081.jpeg)
IconJar вставляет иконки с рамкой в 24pt, что способствует выравниванию и визуальной согласованности.
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/1edcc8ef9691a425b6dd01a0037018e5.jpeg)
Дадим имя согласно правилам именования, чтобы помочь с категоризацией:
- Icon / Alert Circle / Fill
- Icon / Alert Circle / Line
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/8a69059a11b93f5baa17ed7418b3daa3.jpeg)
Затем преобразуем в компонент (Alt + Cmd + K) и повторим необходимое количество раз.
Выбирайте основные компоненты с умом
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/1ecbe27a9a9699a05a23fbb95261a0ef.jpeg)
В универсальную и мощную дизайн-систему входит множество компонентов, на создание которых уйдет большая часть времени – наберитесь терпения.
Всегда начинайте с мелких компонентов
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/cc339e19fa5bfb09989d42b73d83fca6.jpeg)
Компоненты вроде Кнопок – одни из наиболее часто используемых элементов любого проекта, поэтому имеет смысл сначала создать их, а потом переходить к созданию более крупных, вроде Modals, Cards, Calendars и т. д.
Можно создать кнопки Primary:
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/d24d0a0c8b4b06b9296f511632ba84af.jpeg)
и Secondary:
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/5f0c273a555067db8e34dbf2a9c69820.jpeg)
со следующими вариантами:
- Button / Primary / Extra Large / Default
- Button / Primary / Extra Large / Left Icon
- Button / Primary / Extra Large / Right Icon
Помимо «Extra Large» оправдано будет создать «Large», «Medium» и «Small» для настольного и мобильного использования.
Мелкие компоненты станут частью большего
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/ebbcd6067d3e8a473d591dd4f730b2df.jpeg)
Теперь можно создать аватары:
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/22f74e118f1242caddd5069f89fb7291.jpeg)
выпадающие пункты меню:
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/093c3778d6f253d67208c5db08c001b1.jpeg)
плейсхолдеры:
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/a2d2d15e90a06b87597ade983096661b.jpeg)
прогресс-бары:
![🎨 Создание дизайн-системы в Figma: практическое руководство](https://media.proglib.io/posts/2021/03/30/e253ee05fdae899f6693f61de4b7df6a.jpeg)
Это лишь некоторые из необходимых компонентов. Перечисли самые полезные и распространенные:
- Avatars
- Button Groups
- Calendars
- Cards
- Charts
- Comments
- Maps
- Media Controls (Video & Audio)
- Notifications
- Pagination
- Placeholders
- Tooltips
Заключение
Не забывайте о часто используемых элементах UI, чтобы охватить максимальное количество вариантов применения собственной системы. Ее создание потребует уйму времени, а также колоссальной выдержки и терпения, но удовлетворение от проделанной работы не сравнить ни с чем. Больше не придется начинать проект с чистого листа, если у вас есть собственная дизайн-система, где все готово.
Не останавливайтесь на достигнутом, развивайте свои разработки и навыки. Удачи в обучении!
Дополнительные материалы:
Комментарии