дизайн-системы
Как я впервые сделала дизайн-систему
С помощью атомарного дизайна, функций фигмы Auto Layout и Variants
Статей про дизайн-системы в интернете много. Но когда я сама впервые делала дизайн-систему с нуля, то столкнулась с кучей вопросов. Ниже мои выводы из прочитанных статей и полученного опыта.
Этапы создания дизайн-системы под новый проект, мое видение
1. Отрисовать и согласовать все имеющиеся элементы, далее
- Договориться с фронтендерами о способе именования элементов (через слеш/по БЭМу).
- Выбрать все повторяющиеся компоненты, разобрать их на составляющие.
- Атомы — неделимые элементы — загнать в компоненты. Из них сделать молекулы и организмы.
- Использовать Variants (очень упрощает жизнь дизайнеру, если все правильно именовать) и Auto layout.
- Поменять все на компоненты во всем интерфейсе.
2. Прибрать цвета
- Вынести все цвета в отдельный фрейм.
- Постараться убрать близкие оттенки и уменьшить количество цветов.
- Задать названия цветам. В названиях не использовать конкретные названия цвета — опираться на контекст использования. Благодаря этому стили легко переиспользовать, не ломая логику и не усложняя жизнь фронтендеру. У меня проект под NDA, покажу чужой пример.
- Проверить, что логика использования цветов не противоречит друг другу (инпут в фокусе не имеет цвет «дефолт»).
- Вынести цвета в стили. Задать стили компонентам (начиная с атомов). Проверить, что 1) вынесены все цвета 2) все цвета заданы через стили.
3. Разобраться с типографикой
То же самое:
- Вынести все используемые стили в отдельный фрейм.
- Убрать/ объединить близкие.
- Задать названия. Тут много методик, мы использовали размер + начертание (regular и пр.) + сразу в стили заложили интерлиньяж. При таком подходе стиль не привязан к какому-то конкретному элементу (например, к H1) и его легко переиспользовать, не ломая систему. Другой способ — задавать начертание и интерлиньяж через переменные.
- Назначить текстовые стили компонентам.
Для экспорта текстовых и цветовых стилей из фигмы можно использовать плагины, например Export styles to CSS variables.
4. Прописать к каждому компоненту документацию
Можно писать подробно, а можно только паддинги и состояния. Если много путаницы с понятиями и терминами — написать глоссарий.
5. Выбрать, где хранить ДС
Мы выбрали сторибук , потому что он удобный, с ним легко начать работать и он хорошо интегрируется с фигмой.
6. Когда фронтендеры все сверстают, проверить верстку в сторибуке
В сторибуке есть автотесты, но они проверяют только логику компонента. Визуал лучше проверять дизайнеру.
7. Развивать ДС в процессе развития продукта
Надо понимать, что ДС — живой проект, который развивается и переиспользуется на других проектах. Нельзя сделать ее раз и навсегда — она требует внимания, поддержки и ресурсов команды.
При чем здесь Auto Layout и Variants в Figma?
Эти функции сильно упрощают жизнь дизайнеру.
Auto Layout — это возможность задать элементу отступы. По сути, это аналог блочной модели CSS (в частности, flexbox) в Figma. AL позволяет приблизить дизайн к разработке и упростить реализацию дизайна. Особенно удобно стало, когда разработчики фигмы добавили возможность делать все 4 значения AL разными.
Variants позволяет легко менять элементы. Например, у меня есть несколько типов кнопок, у каждой кнопки — несколько состояний. Я объединяю все кнопки и состояния в Мariants, и быстро их меняю через панель Variants.
UPD: Я масштабировала дизайн-систему, сделанную по этим принципам, под нового заказчика. По времени получилось очень быстро, 2 часа: я скопировала фигмовский файл и подобрала новые цветовые стили. Так как в компонентах цвета были заданы через стили, в них все поменялось автоматически, я просто проверила, что цвета хорошо выглядят и проходят по параметрам доступности. С текстовыми стилями то же самое плюс проверить, что не «поехали» отступы.
Полезные ссылки по теме
Атомарный дизайн:
- Перевод книги Atomic Design Брэда Фроста.
- Статья про то, как атомарный дизайн помогает проектировать интерфейсы.
- Статья про создание дизайн-системы на основе атомарного дизайна.
Работа в Figma: Components, Auto Layout, Variants:
Про дизайн-системы и методологии:
Примеры дизайн-систем:
- Microsoft
- Material Design
- Human Interface Guidelines
- Design Systems Club — сборник русских ДС
- Consta — ДС Газпромнефти
- VKUI — ДС ВКонтакте с фигма-файлами
- Polaris— ДС Shopify
- Gitlab
- Primer
- Ant Design
- Atlassian
- Carbon — IBM ДС
- Canvas
Спасибо за внимание. Надеюсь, статья была вам полезной!
