Почему ко мне обратились
Отсутствие централизованной дизайн-системы приводило к расхождениям между дизайном и фронтенд-реализацией: визуальные стандарты и использование компонентов были несогласованными.
Стратегическая цель — усилить присутствие Safe в Web3-дизайн-комьюнити через публичную дизайн-систему, доступную в Figma Community.
Требования
Метрики успеха
#1
Опубликовать дизайн-систему до конца 2023 года
#2
Получить 50+ копий в Figma Community до конца 2023 года
#3
Поддерживать среднюю оценку 4.5+ в Figma Community
Подход
Foundations
Я начал с аудита существующего Figma-файла с черновыми компонентами и стилями. После этого перенес все цвета в Figma Variables и синхронизировал spacing-токены с фронтенд-кодом, чтобы выровнять дизайн и разработку.
Фронтенд Safe{Wallet} в целом был построен на компонентах Material UI. В некоторых случаях было важно опираться на их стандартное поведение, чтобы компоненты дизайн-системы соответствовали реальной реализации.
Также я настроил сетку и добавил недостающие цветовые токены на основе фронтенд-библиотеки, чтобы полностью синхронизировать дизайн-систему с уже реализованным интерфейсом.
Подход
Компоненты
После настройки цветов, отступов и типографики я перешел к базовым компонентам и их интерактивным состояниям: кнопкам, селектам, полям ввода, чекбоксам, радиокнопкам и другим элементам.
Подход
Организмы
После фундаментов и базовых компонентов я перешел на уровень организмов в atomic design. На этом этапе я собирал более крупные составные компоненты: карточки, сайдбары, хедеры, пагинацию и другие элементы.
Все организмы были спроектированы с поддержкой светлой и темной темы.
Результаты и выводы
Я построил масштабируемую и структурированную дизайн-основу, синхронизированную с фронтенд-реализацией. Это повысило консистентность продукта и упростило долгосрочную поддержку интерфейсов.
Система получила заметный отклик в Figma Community: это подтвердило ее ценность не только для внутренних задач, но и для более широкой Web3-дизайн-экосистемы.
Проект сильно прокачал мой опыт в создании сложных дизайн-систем и структурировании масштабируемых дизайн-процессов.
Другие кейсы
Steamify - скупка скинов
Steamify - бот для трейдинга