Ilia Generalov

Главная

Обо мне

На примере Mimika — продукта для ухода за кожей и массажа лица — я покажу, как удалось оптимизировать процессы для разработки веб-приложений и выстроить универсальную дизайн‑систему.

Год

2025

Категория

Wellness

Моя роль

Дизайнер дизайн-системы

Платформы

iOS, Android, Web

Задача

Основной поток пользователей в продукт и мобильное приложение приходит через веб-онбординг. Для проверки продуктовых гипотез необходимо быстро запускать A/B-тесты. Несмотря на то, что варианты тестов могут отличаться по контенту и визуальному стилю, их структура остаётся единой.

Подход

Я создал удобное рабочее пространство в Figma, которым может пользоваться вся команда от контент‑ и продакт‑менеджеров до дизайнеров; и разработал дизайн-систему, позволяющую быстро создавать готовые к выпуску варианты онбордингов.

Результат

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

Я разработал модульную дизайн‑систему, следуя трём основным принципам:

Center

􀆈

1.5

Center

􀆈

1.5

Center

􀆈

1.5

Round

􀆈

Round

􀆈

Консистентность

Элементы дизайн‑системы должны быть консистентными для всех продуктов и подчиняться чётко описанным правилам построения.

Plan Name

3 MONTHS PLAN

Currency

USD

􀆈

Old Price

64.99

New Price

29.99

👀 Discounts

Period

day

Period Price

0.33

Plan Name

3 MONTHS PLAN

Currency

USD

􀆈

Old Price

64.99

New Price

29.99

👀 Discounts

Period

day

Period Price

0.33

3 MONTHS PLAN

$64.99

$29.99

per

day

3 MONTHS PLAN

$64.99

$29.99

per

day

Гибкость

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

Mimika

Youth

Button

Caption

Mimika

Youth

Button

Caption

Адаптивность

Адаптация компонентов ко всем продуктам компании должна осуществляться в один клик.

Токены

Как упоминалось ранее, основной фокус дизайн‑системы сделан не только на унификацию существующих продуктов, но и на возможность быстрого построения и прототипирования А/B тестов. Мимика, как основной веб продукт, предлагает различные программы для совершенно разных целевых аудиторий.

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

Mimika

Youth

Family

Head

Merriweather

Inter

Body

Inter

Size

Line Height

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

Но из-за стилистических особенностей каждого продукта, гарнитура в токенах может отличаться.

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 файл. Каждое обновление библиотеки дизайн‑системы дублируется в рабочий чат.

"tokens": {

"--main-background": "#FFFFFF",
"--main-content-primary": "#302C28",
"--main-content-secondary": "#817B70",

"--sub-background": "#F6F4F0",
"--sub-content-primary": "#302C28",
"--sub-content-secondary": "#817B70",

"--feature-background": "#FEEEDC",
"--feature-background-alternate": "#FAECEA",
"--feature-content-primary": "#302C28",
"--feature-content-secondary": "#817B70",

"--accent-primary": "#356B61",
"--accent-secondary": "#A7BEBA",
"--accent-tertiary": "#ED827B",
"--accent-content": "#FFFFFF",
}

"tokens": {

"--main-background": "#FFFFFF",
"--main-content-primary": "#302C28",
"--main-content-secondary": "#817B70",

"--sub-background": "#F6F4F0",
"--sub-content-primary": "#302C28",
"--sub-content-secondary": "#817B70",

"--feature-background": "#FEEEDC",
"--feature-background-alternate": "#FAECEA",
"--feature-content-primary": "#302C28",
"--feature-content-secondary": "#817B70",

"--accent-primary": "#356B61",
"--accent-secondary": "#A7BEBA",
"--accent-tertiary": "#ED827B",
"--accent-content": "#FFFFFF",
}

❖ 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

This is a recommendation, not a strict rule. Remember the visual compensation!

This is a recommendation, not a strict rule

Create a vector with an outline

Center

􀆈

1.5

Add round endpoints

Round

􀆈

and corners roundings

To create a filled option convert it into Outline

⌥

⌘

and add a fill inside the icon

Простые элементы (иконки, переключатели, чекбоксы и проч.) обёрнуты в более сложные компоненты, которые в то же время являются частями полноценных структур и экранов.

Pop Up Title

Pop up message goes here.

Button

Caption

Button

Caption

Конструктор

Основной фокус A/B тестирования — онбординг продукта. Для его быстрого проектирования, был создан конструктор экранов с широкими возможностями кастомизации, что позволяет создать необходимый Userflow для любого продукта в несколько кликов.

Конструктор охватывает все основные экраны — вопросы онбординга, варианты платёжных систем для пейволла, экраны загрузки и так далее.

Конструктор обладает широкими возможностями кастомизации; настройке поддаются не только цветовые и типографические токены, но и компоненты внутри экранов. В совокупности это позволяет строить онбординги для A/B тестов во всех необходимых вариациях

4.8

Acquaintance

To start, tell us what you want to focus on:

Choose all that apply

Lose weight & tone up

Get fit & maintain weight

Increase flexibility

Reduce stress

Вариант оформления

Основной

A/B тест

Тип ячейки

Прямоугольный

Квадратный

Вариант выбора

Мульти

Единственный

Контент

Только текст

Эмодзи

4.8

Acquaintance

To start, tell us what you want to focus on:

Choose all that apply

Lose weight & tone up

Get fit & maintain weight

Increase flexibility

Reduce stress

Вариант оформления

Основной

A/B тест

Тип ячейки

Прямоугольный

Квадратный

Вариант выбора

Мульти

Единственный

Контент

Только текст

Эмодзи

Вариант оформления

Основной

A/B тест

Тип ячейки

Прямоугольный

Квадратный

Вариант выбора

Мульти

Единственный

Контент

Только текст

Эмодзи

4.8

Acquaintance

To start, tell us what you want to focus on:

Choose all that apply

Lose weight & tone up

Get fit & maintain weight

Increase flexibility

Reduce stress

Вариант оформления

Основной

A/B тест

Тип ячейки

Прямоугольный

Квадратный

Вариант выбора

Мульти

Единственный

Контент

Только текст

Эмодзи

4.8

Acquaintance

To start, tell us what you want to focus on:

Choose all that apply

Lose weight & tone up

Get fit & maintain weight

Increase flexibility

Reduce stress

Youth

Aspectica

League

Mimika