Дизайн-система мобильного приложения в Figma

Когда пора наводить порядок

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

Работаю в Figma: переменные, авто-лейаут, варианты компонентов. Если макеты уже есть, я разбираю их и привожу к системе; если макетов почти нет, собираю базу, на которой можно рисовать дальше.

Как устроен файл, который вы получите

• Цветовые и текстовые переменные с понятными именами, а не «grey-4-final»
• Сетка, отступы и радиусы одним набором значений
• Компоненты: кнопки, поля, списки, карточки, модальные окна, панель навигации
• Состояния для каждого компонента: обычное, нажатое, отключённое, с ошибкой
• Иконки в едином стиле и весе
• Отдельная страница с примерами, как компоненты собираются в живой экран

Передача разработчикам

Файл открывается по ссылке, слои названы по-человечески, компоненты лежат в библиотеке — её можно подключить к другим файлам команды. Пока идёт сборка, отвечаю на вопросы в чате: чаще всего спрашивают про отступы и поведение на маленьких экранах, и ответить сразу дешевле, чем переделывать потом.

Что будет, когда появится новый экран

Система рассчитана на то, чтобы жить дальше без меня. Ваш дизайнер или аккуратный разработчик берёт готовые компоненты и собирает экран сам. Если понадобится компонент, которого в наборе нет, я добавлю его отдельной небольшой задачей, но типовые экраны после сдачи собираются из того, что уже лежит в библиотеке.