Figmastica - дизайн система и конструктор сайтов на Figma
Приветствую, коллеги! Меня зовут Руслан, я работаю продуктовым и веб-дизайнером, а также преподаю курс по дизайну интерфейсов в Государственном Университете «Дубна».
Естественно, основной инструмент работы - это Figma. В процессе работы пришел к выводу, что даже у опытного дизайнера при разработке дизайна сайта в Фигме непосредственно на сам дизайн тратится всего 30-40% времени.
Все остальное время уходит на рутинную работу: 🤢
* разработать прототип сайта и мобильной версии;
* создать хотя бы небольшой набор компонентов;
* аккуратно все собрать в необходимые блоки;
* на основе десктопной версии создать мобильную;
* на основе светлой сделать темную версию сайта.
Если дизайнер берет работу “под ключ”, то на верстку и программную часть уходит около 30% оставшегося времени или не менее 25-30% от общей стоимости проекта.
И даже сложно представить, сколько потребуется времени на все это начинающим дизайнерам. Это мое субъективное мнение, но, предполагаю, что я не сильно ошибаюсь в объеме этих цифровых показателей.
Итак, как дизайнер решает вопросы с тем, чтобы ускорить свою работу?
- Все делает самостоятельно. Берет все рутинные вопросы на себя и тратит очень много времени.
- Нанимает подрядчиков. Хорошо экономит личное время, но тратит до 50% своего заработка на субподрядные работы.
- С помощью готовых дизайн-систем. Большие затраты по времени все равно остаются на то, чтобы разобраться и кастомизировать компоненты. Возникают сложности с оплатой зарубежных сервисов!
Именно для того, чтобы дизайнеру облегчить свою работу и сэкономить уйму времени я разработал Фигмастику. Простыми словами, это микс дизайн-системы и некоторого конструктора сайтов на Figma, который позволяет пользователям любого уровня легко и быстро выполнять свою работу. Figmastica создана специально для неопытных пользователей. Если у Вас уже есть опыт работы в Figma, то Вам будет еще проще.
Figmastica - большая библиотека из нескольких тысяч компонентов, дизайн-токенов, стилей и локальных переменных. На ее основе проектируются сотни готовых секций для сайтов, адаптированных под любые устройства с использованием самых последних обновлений Figma. Это экономит сотни часов времени на создание дизайна сайтов.
При создании компонентов используются принципы атомарного дизайна, что дает возможность быстро и просто настраивать структуру любого компонента.
Преимущества использования такого инструмента в работе очевидны: Вам больше не требуется собирать все компоненты вручную, достаточно кастомизировать общий дизайн под проект, но это стандартные возможности, которые нам предоставляет любая дизайн-система.
Самое важное находится под капотом. Вся система построена на дизайн-токенах, что позволяет с легкостью управлять визуальным стилем проекта.
В Figmastica заданы следующие виды глобальных токенов: типографика, цвет, модульная сетка, отступы.
Типографика
В Figmastica используется бесплатное семейство шрифтов Manrope и шрифт Raleway с курсивным начертанием.
Все названия шрифтов, их размеры, начертания и межстрочный интервал прописаны в переменных в правой колонке, где их. и можно поменять на любые другие при создании собственного проекта.
Параметры токенов текстовых стилей, находящихся в локальных стилях ссылаются на эти переменные.
Цветовая палитра
Один из основных дизайн токенов - это цветовая палитра. Цветовая схема проекта управляется через наборы переменных. Задаются базовые цвета, которые подключается в качестве альясов ко всем требуемым переменным.
Модульная сетка
За основу сетки я взял стандартную для веб проектов схему построения из 12-ти колонок и 6-ти колонок для мобильных версий.
С помощью переменных создана универсальная сетка, которая адаптируется при изменении типа устройства для текущего макета.
Система отступов
Система отступов необходима для поддержания вертикального ритма в макетах и уменьшения количества ошибок при верстке.
В Figmastica используется отступ в 8 пикселей, который является базовой размерной единицей для всего интерфейса. В системе предусмотрено несколько размеров отступов, кратных базовому размеру: 16, 24, 32 и 64 пикселя. При необходимости для выравнивания по вертикали можно использовать поля меньшего размера - 4 и 2 пикселя.
Все размеры отступов задаются в переменных. Они находятся на своем месте в правой боковой панели.
Создание макетов
Для использования конструктора сайтов первым делом нужно скопировать шаблон с сеткой для десктопной версии со страницы “Сетка”. Далее этот шаблон размещается на страницу для сборки и собирается простым перетаскиванием нужных секций на шаблон.
А теперь самое важное: для того, чтобы создать мобильную версию вашего макета, больше не нужно тратить уйму времени. Достаточно скопировать страницу и сделать всего 1 простой шаг - выбрать нужное устройство в настройках!
Все секции, блоки, модули и компоненты автоматически адаптируются и ничего не нужно настраивать вручную.
Если для вашего проекта предусмотрена темная версия, она тоже создается без какого либо труда, необходимо лишь выбрать ее в настройках макетов и все элементы автоматически перекрасятся.
Для того, чтобы потестить систему и получить фидбек я опубликовал бесплатную версию в комьюнити. Сама дизайн-система активно разрабатывается и постепенно будут добавляться новые наборы компонентов. В бесплатной версии собран базовый набор секций, с помощью которого можно собрать простенькую страничку, а вот более большой набор секций будет уже в платной версии.
Бесплатная версия Figmastica в Figma Community: https://www.figma.com/community/file/1524448265587210925
Буду рад, если моя работа принесет вам пользу и ускорит время разработки ваших проектов!