- Проверить, что логика использования цветов не противоречит друг другу (инпут в фокусе не имеет цвет «дефолт»).
- Вынести цвета в стили. Задать стили компонентам (начиная с атомов). Проверить, что 1) вынесены все цвета 2) все цвета заданы через стили.
Содержание статьи
3. Разобраться с типографикой
То же самое:
- Вынести все используемые стили в отдельный фрейм.
- Убрать/ объединить близкие.
- Задать названия. Тут много методик, мы использовали размер + начертание (regular и пр.) + сразу в стили заложили интерлиньяж. При таком подходе стиль не привязан к какому-то конкретному элементу (например, к H1) и его легко переиспользовать, не ломая систему. Другой способ — задавать начертание и интерлиньяж через переменные.
- Назначить текстовые стили компонентам.
Для экспорта текстовых и цветовых стилей из фигмы можно использовать плагины, например Export styles to CSS variables.
4. Прописать к каждому компоненту документацию
Можно писать подробно, а можно только паддинги и состояния. Если много путаницы с понятиями и терминами — написать глоссарий.
5. Выбрать, где хранить ДС
Мы выбрали сторибук , потому что он удобный, с ним легко начать работать и он хорошо интегрируется с фигмой.
6. Когда фронтендеры все сверстают, проверить верстку в сторибуке
В сторибуке есть автотесты, но они проверяют только логику компонента. Визуал лучше проверять дизайнеру.
7. Развивать ДС в процессе развития продукта
Надо понимать, что ДС — живой проект, который развивается и переиспользуется на других проектах. Нельзя сделать ее раз и навсегда — она требует внимания, поддержки и ресурсов команды.
Загрузка...
