Изначально в своей студии веб-дизайна я сам отрисовывал сайты. Поскольку я не считаю себя альтернативно одарённым человеком, быстро пришёл к выводу: нет смысла каждый раз рисовать одни и те же элементы. Кнопки, поля ввода, табы, аккордеоны – это из раза в раз повторяется, не особо нуждается в уникальности, но жрёт уйму времени.
Плюс я всегда заготавливал анимации для кликабельного прототипа. Для нас это важно: мы показываем клиенту на этапе дизайна все возможности сайта.
Зачем я её сделал
Мы в студии в основном делаем промо-проекты и интернет-магазины. Наша задача – быстро применить фирменный стиль, за счёт этого уникализировать проект и начать собирать страницы.
В процессе поиска я посмотрел кучу примеров: 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!
