На примере Mimika — продукта для ухода за кожей и массажа лица — я покажу, как удалось оптимизировать процессы для разработки веб-приложений и выстроить универсальную дизайн‑систему.
Год
2025
Категория
Wellness
Моя роль
Дизайнер дизайн-системы
Платформы
iOS, Android, Web
01
Задача
Основной поток пользователей в продукт и мобильное приложение приходит через веб-онбординг. Для проверки продуктовых гипотез необходимо быстро запускать A/B-тесты. Несмотря на то, что варианты тестов могут отличаться по контенту и визуальному стилю, их структура остаётся единой.
02
Подход
Я создал удобное рабочее пространство в Figma, которым может пользоваться вся команда от контент‑ и продакт‑менеджеров до дизайнеров; и разработал дизайн-систему, позволяющую быстро создавать готовые к выпуску варианты онбордингов.
03
Результат
Структурированная система токенов и компонентов значительно сократило время сборки новых вариантов онбордингов и адаптации уже существующих под другие продукты компании. А иерархическая система библиотек поддерживает все файлы в актуальном состоянии.
Я разработал модульную дизайн‑систему, следуя трём основным принципам:
Консистентность
Элементы дизайн‑системы должны быть консистентными для всех продуктов и подчиняться чётко описанным правилам построения.
Гибкость
Сложные компоненты должны легко и понятно настраиваться внутри Figma, чтобы даже не имеющие отношения к дизайну сотрудники могли использовать их в работе.
Адаптивность
Адаптация компонентов ко всем продуктам компании должна осуществляться в один клик.
Токены
Как упоминалось ранее, основной фокус дизайн‑системы сделан не только на унификацию существующих продуктов, но и на возможность быстрого построения и прототипирования А/B тестов. Mimika, как основной веб продукт, предлагает различные программы для совершенно разных целевых аудиторий.
Для унификации дизайн‑системы, необходимо создать цветовые и типографические токены для каждой вариации продукта и онбординга.
Mimika
Youth
Family
Head
Merriweather
Inter
Body
Inter
Inter
Size
XS
12
12
S
14
14
Line Height
XS
16
16
S
20
20
Поскольку структура веб продуктов неизменна, типографические токены, определяющие размеры унифицированны.
Но из-за стилистических особенностей каждого продукта, гарнитура в токенах может отличаться.
Mimika
A/B Test #1234
Sub
Background
Mimika/Eggshell
464646
Content Primary
Mimika/Charcoal
F5F5F5
Content Secondary
Mimika/Sage
C1C1C1
Feature
Background
Mimika/Peach
E5E7E9
Background Alternate
Mimika/Rose
CBFF5B
Content Primary
Mimika/Charcoal
19191C
Content Secondary
Mimika/Sage
4F535E
Для цветов используются токены двух уровней: на примитивном уровне — базовая палитра (обычно 8-10 цветов, определяющие айдентику продукта). На более высоком уровне эти цвета соотносятся с семантическим предназначением. Для A/B теста новой программы цвета первого уровня не назначаются, пока вариант не станет постоянным.
Для синхронизации процессов между командой дизайна и разработки, токены из Figma экспортируются в JSON файл. Каждое обновление библиотеки дизайн‑системы дублируется в рабочее пространство.
❖ Answer Bar
Text
Sub/Background
Sub/Content Primary
Accent/Primary
Acent/Content
Наименование
Токены именуются семантически, а не компонентно, что позволяет свободно использовать их для любого элемента продукта без привязки к конкретному состоянию компонента.
Tokens
❖ Components
❖ Icons
Builder
Hierarchy
Дизайн‑система использует структуру вложенностей: конструктор сделан из компонентов (кнопки, иконки, поля ввода, элементы пейволла и проч.), которые в свою очередь наследуют значения токенов цвета и типографики.
Компоненты
Все компоненты — от иконок до сложных элементов — подчиняются единой документации, которую я подробно описал в рабочем пространстве.
24 × 24
Create a frame
Leave a clear space of 1.5–2 pts
Create a vector with an outline
Add round endpoints
Round
and corners roundings
To create a filled option convert it into Outline
⌥
⌘
O
and add a fill inside the icon
Простые элементы (иконки, переключатели, чекбоксы и проч.) обёрнуты в более сложные компоненты, которые в то же время являются частями полноценных структур и экранов.
Pop Up Title
Pop up message goes here.
Button
Caption
Button
Caption
Конструктор
Основной фокус A/B тестирования — онбординг продукта. Для его быстрого проектирования, был создан конструктор экранов с широкими возможностями кастомизации, что позволяет создать необходимый Userflow для любого продукта в несколько кликов.
Конструктор охватывает все основные экраны — вопросы онбординга, варианты платёжных систем для пейволла, экраны загрузки и так далее.
Конструктор обладает широкими возможностями кастомизации; настройке поддаются не только цветовые и типографические токены, но и компоненты внутри экранов. В совокупности это позволяет строить онбординги для A/B тестов во всех необходимых вариациях