Делюсь большой крутой дизайн-системой, которую мы используем на реальных проектах

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

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

Зачем я её сделал

Мы в студии в основном делаем промо-проекты и интернет-магазины. Наша задача – быстро применить фирменный стиль, за счёт этого уникализировать проект и начать собирать страницы.

В процессе поиска я посмотрел кучу примеров: Material Design от Google, Taiga UI (тот, что в продуктах Тинькова) и много других из Figma Community. Но во всех случаях мне не хватало гибкости и простоты изменения стилей.

И так как ничего под эти параметры не подошло, я решил скомпоновать все свои наработки в одну дизайн-систему. И убил двух зайцев:

✅ Первое – система стала отличным регламентом для дизайна в студии. Я заложил туда не только готовые элементы, но и правила: кратность четырём, сетки, базовые размерности. Новички перестали страдать гигантизмом, не забывают про адаптивы и тратят меньше времени на анимации для прототипа.

✅ Второе – я сильно сократил время запуска проектов. Раньше на подготовку UI могла уйти неделя (и больше). Сейчас – запустить проект можно за один день. Подобрал цвета, подобрал гарнитуры, закинул в дизайн-систему – получил готовый UI-кит.

Не люблю долго ходить вокруг да около – ссылка на дизайн-систему: https://www.figma.com/community/file/1623663606281890998/free-ui-kit-design-system-ecommerce-website-template-ompletely-free-for-figma. А дальше – небольшой разбор с пояснениями, что я такого сделал.

Стили – с чего начинается система 🎨

Обычно практика такая: цвета задаются для каждого элемента отдельно. Цвет кнопок, инпутов, фона, текста… Менять это под каждый проект – не сложно, но очень муторно.

Я распределил логику иначе:

• Базовая палитра серых оттенков – используется повсеместно.

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

• Цвета текста вынес отдельно – чтобы можно было независимо менять цвет текста и фона.

Это всё получено эмпирическим путём. Я остановился на таком варианте, и, как по мне, под наши задачи он подходит идеально.

С текстами то же самое: у нас есть заголовки, тело письма, а также отдельные стили под UI-элементы (кнопки, табы). Почему я их добавил? Потому что в работе мне не хватало гибкости именно с элементами интерфейса.

Скомпоновав стили, я добился главного – можно очень быстро уникализировать проект.

UI – только нужные элементы 🔧

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

И ещё важный момент: несколько вариантов стилизации одних и тех же элементов.

• Кнопки можно уникализировать скруглениями.

• Для полей ввода (Input) я заготовил несколько стилей:– стандартный (как в Bootstrap)– в духе старого Material Design– поле с нижним подчёркиванием (для брутальных ресурсов, где внешний вид важнее удобства)

• Почти во всех элементах заготовлены светлая и тёмная темы. Почему? Потому что на сайтах часто бывают и светлые, и тёмные секции. Перекрасить одной кнопкой не получится – проще перекрашивать элементы внутри.

Компоненты – готовые элементы с UX-логикой и анимациями 🧩

В дизайн-системе несколько разделов с компонентами:

• Базовые

• Для каталога

• Для интернет-магазина

• Для блога

Они названы не от балды. Скажу по секрету: мы разрабатываем сайты на своей платформе (в планах выпустить её бесплатно). Так вот, эти разделы соответствуют папкам с компонентами у разработчиков в проекте.

Один и тот же компонент (например, из каталога) может использоваться и в личном кабинете – поэтому он сделан в одном месте.

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

Вставив компонент, вы сразу можете показать клиенту логику и работу элемента. И разработчику – тоже.

Вишенка на торте – готовый шаблон интернет-магазина 🍒

Я сделал базовый шаблон интернет-магазина. Конечно, для многих клиентов нужен уникальный функционал – без проблем, мы создаём уникальные компоненты и встраиваем их в систему.

Но этот шаблон позволяет очень быстро заготовить магазин: базовые страницы, функционал, навигацию. И он полностью кликабельный.

Плюс я заготовил все необходимые страницы – у начинающих дизайнеров теперь меньше шансов что-то забыть нарисовать.

Что в планах?

• Развивать шаблон дальше. Уже есть два варианта блога (плитка и лента).

• Добавить другие варианты оформления заказа: постраничный, упрощённый, масштабный.

Но базис уже есть. А при любом строительстве главное – надёжный фундамент.

Финал 😉

Свою дизайн-систему я уже опубликовал в Figma Community. Буду честен: хотелось не просто поделиться бесплатно, но и получить немного внимания. Однако чуда не случилось – она довольно легко затерялась среди других.

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

Самая крутая оценка моей работы – если вы будете ею пользоваться и оцените возможности, которые я туда заложил.

И ещё: подпишитесь на мой телеграм-канал. Я заготовил интернациональную версию системы, но в студии мы используем русскую версию – с русским UX, текстами и логикой. Она у меня есть. Если будете подписываться и просить – это подтолкнёт меня опубликовать и её. Поверьте, вы даже не представляете, сколько времени вы сократите на написание текстов и логику.

А пока – спасибо, что дочитали. Пользуйтесь на здоровье.

Adios, amigos!