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

В системе собраны и аккуратно разложены все компоненты, которые могут понадобиться при разработке интерфейса

Для каждого компонента выделена отдельная страница в файле, в котором так же содержится небольшое описание и подсказки, а для некоторых компонентов также есть примеры использования.

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

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

Самое важное находится под капотом. Вся система построена на дизайн-токенах, что позволяет с легкостью управлять визуальным стилем проекта.

В Figmastica заданы следующие виды глобальных токенов: типографика, цвет, модульная сетка, отступы.

В Figmastica используется бесплатное семейство шрифтов Manrope и шрифт Raleway с курсивным начертанием.

Все названия шрифтов, их размеры, начертания и межстрочный интервал прописаны в переменных в правой колонке, где их. и можно поменять на любые другие при создании собственного проекта.

Параметры токенов текстовых стилей, находящихся в локальных стилях ссылаются на эти переменные.

Один из основных дизайн токенов - это цветовая палитра. Цветовая схема проекта управляется через наборы переменных. Задаются базовые цвета, которые подключается в качестве альясов ко всем требуемым переменным.

За основу сетки я взял стандартную для веб проектов схему построения из 12-ти колонок и 6-ти колонок для мобильных версий.

С помощью переменных создана универсальная сетка, которая адаптируется при изменении типа устройства для текущего макета.

Система отступов необходима для поддержания вертикального ритма в макетах и уменьшения количества ошибок при верстке.

В Figmastica используется отступ в 8 пикселей, который является базовой размерной единицей для всего интерфейса. В системе предусмотрено несколько размеров отступов, кратных базовому размеру: 16, 24, 32 и 64 пикселя. При необходимости для выравнивания по вертикали можно использовать поля меньшего размера - 4 и 2 пикселя.

Все размеры отступов задаются в переменных. Они находятся на своем месте в правой боковой панели.

Для использования конструктора сайтов первым делом нужно скопировать шаблон с сеткой для десктопной версии со страницы “Сетка”. Далее этот шаблон размещается на страницу для сборки и собирается простым перетаскиванием нужных секций на шаблон.

Секции на шаблон перетаскиваются со вкладки "Assets"

А теперь самое важное: для того, чтобы создать мобильную версию вашего макета, больше не нужно тратить уйму времени. Достаточно скопировать страницу и сделать всего 1 простой шаг - выбрать нужное устройство в настройках!

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

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

Для того, чтобы потестить систему и получить фидбек я опубликовал бесплатную версию в комьюнити. Сама дизайн-система активно разрабатывается и постепенно будут добавляться новые наборы компонентов. В бесплатной версии собран базовый набор секций, с помощью которого можно собрать простенькую страничку, а вот более большой набор секций будет уже в платной версии.

Бесплатная версия Figmastica в Figma Community: https://www.figma.com/community/file/1524448265587210925

Буду рад, если моя работа принесет вам пользу и ускорит время разработки ваших проектов!