Design System

Основа дизайн-системы

Единый фундамент
для продукта

Я собрал систему на основе дизайн-токенов и переменных Figma. Это упростило поддержку интерфейса и передачу решений в разработку

Дизайн-токены — единый язык системы

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

Консистентность Одинаковые правила во всех разделах

Управляемость Изменения через токены и переменные

Готово к разработке Единые названия и понятная структура

Типографика

Vela Sans и единая иерархия текстовых ролей

Ag

Vela Sans Кириллица и латиница

Display Заголовок 28 / 32

H0 Заголовок 0 24 / 28

H1 Заголовок 1 21 / 24

Text 1 Основной текст 15 / 18

Text 2 Доп. текст 13 / 16

Code Technical 13 / 16

Цветовая система

Ключевые шкалы и семантические роли

Нейтральная шкала

Брендовая шкала

Семантические роли

Main

Link

Background

Success

Warning

Error

Отступы и сетка

Базовый шаг — 4 px

4

8

12

16

24

32

48

64

12 колонок Max-width 1440 px Gutter 24 px

Радиусы и тени

Ключевые значения без полного каталога

Радиусы

None

S

M

L

XL

Full

Тени

SM

MD

LG

Токены и переменные

Значения хранятся централизованно

Компоненты используют общие токены, поэтому изменения распространяются на весь продукт

color.background.primary #FFFFFF

color.text.primary #181D27

color.brand.primary #4F7FE8

spacing.medium 16px

radius.medium 8px

Светлый режим Aa

Тёмный режим Aa

Компонентная система

Компоненты,
которые работают
в дизайне и в коде

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

Единая библиотека Компоненты организованы по типам и сценариям.

Связь с кодом Названия совпадают в Figma и frontend.

Токены и переменные Frontend использует токены дизайн-системы.

Внедрено в продукт Библиотека работает во всех разделах.

Обзор библиотеки компонентов

Библиотека включает базовые элементы интерфейса и повторяющиеся продуктовые паттерны для работы с данными

Структура библиотеки компонентов Getintent в Figma — Основные группы компонентов в библиотеке Figma.

Button — один компонент, множество вариантов

Кнопка собрана как единый component set. Назначение, состояние, размер, форма и работа с иконками управляются через свойства компонента.

Типы и состояния компонента Button — Primary и Secondary: состояния, варианты с иконками и icon-only.

Свойства компонента Button в Figma — Component Playground: свойства компонента и режимы.

Управляемые свойства

Type Primary, Secondary

State Default, Hover, Focus, Active, Disabled

Size Small и другие системные размеры

Shape Rectangle и другие формы

Icon logic Слева, справа или only icon

Color modes Единый режим цветовых токенов

Table — сложный продуктовый компонент

Единый паттерн таблиц описывает заголовки, строки, ссылки, действия и отображение данных. Он используется в реальных data-heavy разделах продукта.

Документация компонента Table в дизайн-системе — Компонент и правила построения таблиц.

Таблица в реальном интерфейсе Getintent — Использование таблицы в разделе «Рекламодатели».