Дизайн-система. Как подружить дизайн и front-end.

Сухушин Александр, USERSTORY

Дизайн-система.
Как подружить дизайн и front-end.

Сухушин Александр, USERSTORY

Фронтенд посередине

Проблемы коммуникации дизайнеров и верстальщиков

Дизайн-система

Это постоянно эволюционирующий свод правил, который определяет порядок создания продукта.

https://habrahabr.ru/company/everydaytools/blog/324774/

Слой 0 - "Палитра"

Слой 0 - Цвет

Слой 0 - "Палитра"

Слой 0 - Размеры

Слой 0 - "Палитра"

Слой 0 - Текст

Слой 1 - "Базовые элементы"

Слой 1 - Базовые элементы

Слой 2 - "Составные элементы"

Слой 2 - Составные элементы

Правила

От общего к частному;
Описание разбивается на слои;
Для каждой сущности определяется псевдоним;
Сущности более частного слоя описываются из сущностей более общего.

Примеры

Zeplin

Примеры

Переменные

Примеры

Текст

Примеры

Контент

Примеры

Адаптив

Примеры

Отступы

Примеры

Обтекание

Примеры

Ширина

Преимущества

Повторное использование;
Уменьшение накладных расходов;
Проще поддерживать и контролировать;
Параллельное описание дизайна и вёрстка.