Создание дизайн-системы и оптимизация рабочих процессов

Помог упорядочить рабочие процессы и построить масштабируемую дизайн-систему для растущей команды.

Design System

Team Scaling

Figma Organization

UI components and typography tokens from a design system preview

Моя роль

Я взял на себя полную ответственность за пересборку дизайн-системы: провёл аудит, заново структурировал компоненты, настроил связи со стилями и обеспечил адаптивность. Также я разработал и внедрил новую систему организации файлов в Figma. Инициатива исходила от меня и была полностью одобрена тимлидом, который доверил мне реализацию и поддерживал на всём пути.

Unstructured Figma files and UI inconsistencies before design system implementation

До изменений

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

Задача

Основные цели:

Систематизировать процессы и дизайн-ресурсы
Построить масштабируемую и переиспользуемую дизайн-систему
Улучшить взаимодействие с разработчиками
Упростить онбординг новых дизайнеров

Решение

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

Оптимизация рабочего процесса

Я пересобрал рабочую среду, разделив файлы на Development и Ready for Dev, а также внедрил структуру разделения файлов по задачам для упрощения навигации и передачи макетов.
Также я задокументировал внутренние правила и систему нейминга, чтобы обеспечить согласованность и синхронизировать работу команды по единым стандартам.

Comparison of old and improved design workflows in Figma

Preview of a design system in Figma showing component structure, button styles, and icon set

Разработка дизайн-системы

Полностью пересобрал систему с нуля
Создал адаптивные компоненты с разными сценариями взаимодействия
Настроил глобальные текстовые стили и переменные цветов

Библиотека веб-блоков

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