катя
2025
компоненты дизайн-системы создаются в связке дизайнера и разработчика: каждый новый элемент проходит параллельную проработку в figma и в кодовой библиотеке. для синхронизации и контроля качества проводятся регулярные встречи с командой разработки дизайн-системы, где обсуждаются изменения, уточняются правила использования и согласуются технические решения. над технической частью работает выделенный технический лидер: он контролирует архитектуру компонентной библиотеки, следит за соблюдением принципов атомарности и отвечает за корректное развитие системы в коде
поддержание дизайн-системы, создание и адаптация новых компонентов, написание документации
файл с дизайн-системой стал слишком тяжелым и терял производительность: при загрузке нескольких страниц падала скорость работы figma, увеличивалось время поиска компонентов, а взаимодействие усложнялось. командам дизайна и разработки стало неудобно пользоваться системой.
провести оптимизацию файла и привести дизайн-систему к состоянию, в котором:
страницы прогружаются без задержек
компоненты структурированы и легко доступны
атомарная модель сохраняется
система остается удобной как для дизайнеров, так и для разработки
аудит содержимого
необходимо понять, что реально используется, а что дублируется — и необходимо удалить
на этом этапе я ознакомилась со всем содержимым файла дизайн-системы и обнаружила, что на большинстве страниц был раздел "old components", в котором хранились старые версии компонентов.
также я отметила для себя проблемные зоны, с которыми необходимо было детальнее поработать на дальнейших этапах:
очень тяжелые страницы
устаревшие элементы
компоненты с ломающимся поведением
результат этапа: список того, что можно и нужно удалить или переработать, вынести в отдельные файлы, плюс карта проблем по страницам
оптимизация структуры файла
необходимо структурировать файл таким образом, чтобы облегчить загрузку и сделать стркутуру предсказуемой
действия:
пересобираю структуру страницЖ
отдельная страница для токенов
отдельный файл для гайдлайнов
отдельные файлы под тяжелые компоненты (чаще — части крупной визуализации, например — таблица)
отдельный файл под «песочницу» и эсперименты
ввожу единый принцип нейминга страниц и фреймов:
логические группы — forms, navigations и тп
смайлики для отображения статуса компонента: в дизайне, в разработке, готов
результат:
файл прогружается быстрее, дизайнер быстро понимает, где искать нужный компонент
оптимизация ассетов
необходимо уменьшить технический вес файла
была проведена оптимизация вложенности:
уменьшила глубину вложенных фреймов там, где это не дает пользы
удалила лишние группы и фреймы внутри компонентов, в которых они не влияют на его поведение
результат:
снижается общий вес файла, ускоряется рендеринг, уменьшаются лаги при перемещении по странцам
пересборка автолейаутов и поведения компонентов
цель: сделать компоненты предсказкуемыми и удобными в использовании
в рамках этого этапа я провела:
проверку ключевых компонентов:
кнопки, инпуты, селекты, карточки и тд
как они себя ведут при изменении текста/ширину контейнера, добавлении/удалении иконок
новую сборку автолейаутов:
настраиваю направления, отступы, выравнивания
убираю жесткие фреймы, из-за которых ломается адаптивность
добавляю варианты поведения
настройку вариантов и пропсов:
состояния
размеры
типы
и тп
проверку на наличие:
ссылки на токены, а не ручные стили
стркутурированные названия пропсов