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