25 Figma-плагинов для создания дизайн-систем и работы с ними

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

Design System Template — заготовка для дизайн-системы в формате Figma

Design System Template

Moon Design System — основа для дизайн-системы вашего проекта

Moon Design System

Sprint UI — генератор заготовки дизайн-системы. Вводите ключевые параметры (шрифты, скругления, палитру и т.п.) и получаете готовые компоненты с ними

Sprint UI

Toolabs Design System Manager — создаёт переменные для управления дизайн-системой и может экспортировать их в CSS, Less, Sass, JSON, YAML, JS, Swift или Android. Создаёт темы оформления и управляет стилями Figma, настраивает иерархию в типографике и многое другое. Статья о плагине

Toolabs Design System Manager

Superposition — помогает извлекать все параметры дизайна с веб-сайтов и использовать их в Figma. Можно быстро «сграбить» параметры типографики, цветов и отступов

Superposition

Typography Styleguide — генерирует гайд по типографике из выбранных текстовых стилей

Typography Styleguide

Supa Palette — продвинутый менеджер палитр. Импорт палитр из различных дизайн-систем. Создание собственных на основе цвета или стиля и многое другое

Supa Palette 

Color Styleguide — генерирует гайд по цветам из выбранных цветовых стилей

Color Styleguide

Automate Color Styles — добавляет цвета в стили

Automate Color Styles

Сhroma colors — автоматически генерирует цветовые стили на основе выделенных цветов

Сhroma colors

Automatic Style Guides — генерирует гайдлайн из локальных стилей вашего макета

Automatic Style Guides

Design System Organizer — упрощает работу со стилями и компонентами дизайн-системы

Design System Organizer

Style Organizer — мощная работа со стилями. Можно смотреть все стили в одном месте, редактировать их и объединять, быстро переходить к элементам с этими стилями

Style Organizer

Figma Tokens — позволяет определять и использовать токены непосредственно в Figma, включая умные названия для цветов, типографики, интервалов, радиусов и т.д.

Figma Tokens

Batch Styler — помогает пакетно редактировать стили

Batch Styler

Similayer — расширяет возможности встроенной функции «Select all with»

Similayer 

Instance Finder — находит все инстансы компонента и показывает отдельными списками для каждой страницы

Instance Finder 

Master — позволяет создавать мастер-компонент из нескольких похожих элементов, связывать простые элементы с готовым мастер-компонетом, а также перемещать компоненты между документами и многое другое. Ознакомительное видеоГайд по файлу

Master

Maximum Override — сравнивает инстансы с мастер-компонентом и меняет их свойства

Maximum Override

Appearance — генерирует светлую или тёмную тему на основе выбранных цветов. Работает с внешними и локальными стилями

Appearance

Content Buddy — позволяет редактировать текстовый контент в нескольких слоях, экземплярах и компонентах. Будет полезен, когда нужно внести изменения в дизайн-систему

Content Buddy

Simple Sort — сортирует варианты по размеру, иконкам, цветам и другим параметрам

Simple Sort 

Roller — автоматически находит и исправляет несовпадения стилей с дизайн-системой

Roller

Focus CSS — генерирует CSS для выбранных фреймов и страниц. Есть фильтрация по свойствам, которая помогает находить непоследовательности в стилях

Focus CSS

UI2: Figma’s Design System — дизайн-система Figma, оформленная внутри самой Figma

UI2: Figma’s Design System
Поделиться
Отправить
Запинить

Обсуждение