Рейтинг в Figma: Управление переменными

Этот плагин позволяет экспортировать переменные (цвет, строки, числа, логические значения) из одного файла Figma и импортировать их в другой. Это идеально подходит для миграции библиотек стилей или обновления переменных в существующей дизайн-системе, импортируя сторонние библиотеки. Поддерживаются псевдонимы значений, информация о переменных (описание, области применения, синтаксис кода) и несколько режимов. Есть возможность обновить существующую коллекцию переменных, а не создавать новую.

Theme Importer for Visual Studio Code позволяет импортировать темы оформления из Visual Studio Code в Figma в виде переменных. Вы можете выбрать встроенные темы или добавить собственные, скопировав содержимое файла темы из VS Code. Плагин поддерживает до 10 пользовательских тем. Импортированные темы можно просмотреть в виде списка или сетки перед добавлением в Figma.

Component Variables - это плагин для Figma, позволяющий упорядоченно и автоматически настраивать компоненты. Он даёт возможность создавать и редактировать предустановленные переменные внутри компонента, избавляя от необходимости вручную копаться в группах и автолейаутах. С его помощью можно легко менять текст, выбирать варианты отображения слоёв и управлять их видимостью через удобную панель, работающую с экземплярами компонентов. Это упрощает кастомизацию и обеспечивает консистентность дизайна.

Apply Variables позволяет быстро применить существующие переменные к элементам в вашем файле Figma. Он может автоматически сопоставлять и назначать переменные цвета на основе имен стилей, а также применять числовые переменные (например, радиус, интервал) к соответствующим свойствам элементов, упрощая процесс связывания значений переменных с дизайном. Плагин ищет переменные с соответствующими именами или значениями в выбранных коллекциях и применяет их к выделенным элементам, странице или всему документу, экономя ваше время и повышая консистентность дизайна.

Print Variables - это плагин, который позволяет удобно управлять и стильно отображать переменные в вашем проекте. Он автоматически группирует переменные, содержащие символы "/" или "-", для лучшей организации, и визуально различает их в зависимости от области видимости (глобальной или локальной). Плагин поддерживает все области видимости, а для переменных с более чем двумя областями видимости отображает общее значение. С Print Variables вы сможете эффективно отслеживать и структурировать ваши переменные.

Variable Utilities – это плагин Figma, который значительно упрощает и ускоряет работу с переменными. Он позволяет копировать, вставлять, дублировать, переименовывать и заменять переменные и коллекции переменных. С его помощью можно легко переключаться между режимами переменных, отсоединять переменные и редактировать локальные текстовые переменные в больших объемах. Это незаменимый инструмент для оптимизации рабочих процессов с переменными в Figma.

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

Find Variables помогает находить переменные, используемые в вашем файле Figma, и легко выбирать слои, которые их применяют. Плагин отображает все переменные на странице, указывает типы слоев, использующих каждую переменную (фреймы, текст и т.д.), и позволяет выделить все слои определенного типа или все слои, использующие выбранную переменную. Это особенно полезно, когда нужно найти, например, фреймы с определенным радиусом скругления или текстовые слои с конкретной строковой переменной.

Variables Manager - это мощный плагин для Figma, упрощающий управление переменными дизайна. Он позволяет легко копировать переменные между файлами, обеспечивая единообразие дизайн-системы во всех проектах. Кроме того, плагин позволяет переупорядочивать режимы переменных для оптимизации рабочего процесса, сохранять и восстанавливать прототипы взаимодействий при переносе файлов. С Variables Manager управление переменными становится простым и эффективным.

Этот плагин, основанный на открытом коде Figma, позволяет импортировать и экспортировать переменные из JSON-файлов. Вы можете загрузить JSON-файл с переменными, чтобы добавить их в локальные переменные Figma, или экспортировать переменные из текущего файла в JSON для сохранения. Обратите внимание, что импорт/экспорт Boolean значений и строк пока не поддерживается.

Variables2json – это плагин для Figma, который позволяет легко экспортировать все ваши опубликованные переменные (цвета, числа, строки, булевы значения и псевдонимы) в JSON-файл. Он также экспортирует локальные стили, такие как стили текста, эффектов и сеток. Это упрощает перенос переменных и стилей в другие инструменты или проекты, предоставляя удобный способ управления и обмена данными дизайна. Для обратной связи и запросов новых функций, можно обратиться в репозиторий плагина.

⚡️ Tailwind 2024 Primitives V1.2 предоставляет набор переменных для цветов, размеров и типографики, вдохновленных Tailwind CSS, которые можно использовать для создания собственных тем и дизайн-систем. Стили типографики и примитивы цветов/размеров созданы как переменные, позволяющие дизайнерам легко настраивать внешний вид проектов и эффективно сотрудничать с разработчиками, используя понятные имена токенов, соответствующие классам Tailwind CSS.

Heron variable tools – это плагин для Figma, который помогает эффективно управлять переменными в ваших проектах. Он позволяет импортировать переменные из библиотек (Tailwindcss, Chakra UI, Radix UI, MUI и Ant design), файлов в формате Design Token, автоматически привязывать значения к переменным, массово редактировать настройки переменных, генерировать цветовые палитры и многое другое. С помощью Heron variable tools вы можете значительно упростить и ускорить процесс создания и поддержки дизайн-систем.

Превратите таблицы Google Sheets и CSV в переменные Figma с помощью плагина Sheets to Variables! Легко импортируйте данные из таблиц, создавайте переменные разных типов (текст, числа, булевы значения, цвета) и добавляйте описания. Плагин поддерживает различные режимы переменных и позволяет добавлять код для iOS, Android и Web. Просто укажите URL таблицы или загрузите CSV, и ваши переменные будут автоматически созданы или обновлены в Figma, обеспечивая динамичный и простой в управлении дизайн.

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

Figma Variable Explorer - это плагин для Figma, который централизованно отображает переменные в режимах разработки и дизайна. Он предоставляет доступ к переменным в форматах "Список", "JSON" и "CSS", позволяя просматривать и копировать их. Пользователи могут экспортировать переменные в форматы Markdown, CSV и CSS, а также быстро находить нужные переменные благодаря функции поиска. Это упрощает управление переменными и обеспечивает удобный доступ к ним для дизайнеров и разработчиков.

Этот плагин позволяет пакетно импортировать переменные из одного JSON-файла или несколько режимов из нескольких JSON-файлов. Он предназначен как временное решение до появления встроенных функций импорта и экспорта JSON. Поддерживается не каждый тип токена в формате DTCG (.tokens.json).

Detach Variables – это плагин для Figma, разработанный для оптимизации рабочего процесса дизайнеров. Он позволяет одним щелчком мыши отсоединять переменные цвета, текста, чисел, логических значений и типографики, примененные к фреймам, группам и секциям. Это устраняет необходимость в многократных ручных операциях, повышая эффективность работы и экономя ценное время, которое обычно тратится на отсоединение переменных.

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

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

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

Text Styles to Variables - плагин для Figma, который автоматизирует преобразование локальных текстовых стилей в переменные, упрощая и ускоряя процесс проектирования. Он автоматически объединяет и конвертирует текстовые стили в переменные Figma, а также обнаруживает и связывает существующие переменные из любой коллекции с соответствующими текстовыми стилями. Плагин добавляет новые текстовые стили непосредственно в главную коллекцию переменных, избавляя от необходимости ручного сбора и добавления всех текстовых стилей в новые переменные.

Этот плагин позволяет импортировать данные из Google Sheets непосредственно в переменные Figma, синхронизируя их с различными режимами отображения. Он упрощает управление переменными дизайна, используя Google Sheets в качестве единого источника правды, обеспечивая актуальность и согласованность данных в вашем дизайн-проекте. Для настройки требуется API-ключ Google Sheets и правильный формат URL.

Variables ⇔ CSV (Export+Import) позволяет экспортировать текстовые переменные Figma в CSV для удобного редактирования, перевода и обмена с разработчиками/копирайтерами. После редактирования CSV файл можно импортировать обратно в Figma для автоматического обновления значений переменных, включая поддержку многоязычности и простой формат CSV. Это упрощает управление текстовым контентом и локализацию проектов.

Мгновенно создавайте потрясающие цветовые палитры, используя ваши переменные, с помощью плагина Palettes Variables. Этот инструмент позволяет генерировать красивые цветовые схемы одним кликом, используя современные цветовые пространства HCL и OKLab для создания визуально привлекательных и доступных дизайнов. Легко синхронизируйте темы между файлами и плавно переносите коллекции переменных, упрощая совместную работу и обеспечивая консистентность ваших проектов.

Этот плагин предназначен для экспорта переменных из Figma, фильтруя их по коллекциям и режимам. Он позволяет создавать файлы токенов для конкретных ролей и режимов, которые затем можно объединить через Style Dictionary. Плагин также добавляет атрибуты для Style Dictionary, основываясь на типе переменной (цвет) или содержании ее имени ("sizing", "spacing" и т.д.). В отличие от стандартного экспорта, он позволяет экспортировать только нужные коллекции или режимы, а также не вставляет комментарии, если указана конкретная коллекция.

Плагин Variable Importer/Exporter позволяет легко создавать переменные в Figma и экспортировать их в единый источник правды в формате JSON. С его помощью можно определять и управлять дизайн-токенами (цвета, отступы и т. д.), обеспечивая консистентность в разных проектах и между членами команды. Поддерживает различные типы переменных (цвет, число, строка, булево значение) и позволяет ссылаться на другие переменные.

Этот плагин для Figma значительно упрощает процесс проектирования. Он позволяет быстро и легко преобразовывать стили цвета и текста в переменные, что способствует гармонизации и централизованному управлению вашей цветовой палитрой и текстовыми стилями. Это позволяет унифицировать дизайн и сделать его более управляемым.

Этот плагин поможет вам найти переменные в вашем Figma-проекте, которые вы могли пропустить. Он позволяет тщательно проверить дизайн на наличие несоединенных переменных в выбранном диапазоне слоев (от 1 до 128). Используйте "Find Missing Variables", чтобы добиться безупречности вашего дизайна и избежать случайных упущений, обеспечивая его консистентность и корректность. Просто запустите плагин, выберите диапазон поиска, нажмите "Search" и найдите слои, где переменные не подключены.

Импортируйте ваш JSON-файл Style Dictionary в Figma как переменные и псевдонимы переменных, что позволяет легко использовать существующие стили. Плагин поддерживает обновление существующих коллекций токенов, основываясь на формате CTI Style Dictionary. Просто выберите JSON-файл, и переменные будут созданы в "Local variables" Figma, упрощая управление и синхронизацию стилей между вашим кодом и дизайном. Это особенно полезно для поддержания консистентности при использовании Style Dictionary в вашем дизайн-процессе.

Легко перемещайте переменные между файлами Figma всего несколькими щелчками мыши с помощью Transporter. Идеально подходит для управления дизайн-системой и переноса токенов. Экспортируйте переменные в стандартизированном формате JSON, скопируйте JSON в буфер обмена, откройте целевой файл и вставьте для импорта. Transporter идеально подходит для тестирования переменных в изоляции, переноса токенов между платформами, обмена коллекциями переменных между командами и резервного копирования конфигураций переменных. Поддерживает формат W3C Design Tokens для максимальной совместимости.

Dark Mode Creator автоматически генерирует переменные цветов для темного режима из существующих светлых, используя интеллектуальные алгоритмы для обеспечения оптимального контраста и читаемости. Поддерживает множественные коллекции переменных для организации дизайн-систем, сохраняя существующие цветовые отношения и иерархии, а также обрабатывает как сплошные цвета, так и псевдонимы переменных. Предлагает удобный интерфейс для выбора коллекций для преобразования и совместим со встроенной системой переменных Figma.

Variables Doc Designer – это Figma-плагин, который упрощает управление и документирование локальных переменных, обеспечивая автоматическую синхронизацию для поддержания актуальности документации. Плагин предлагает настраиваемые таблицы с регулируемыми границами, цветами, отступами и иконками, а также позволяет вставлять организованные макеты непосредственно в фреймы для профессионального вида. Идеально подходит для команд, работающих над дизайн-системами, а также для отдельных дизайнеров и фрилансеров, которым необходимо передавать понятную документацию.

Этот плагин предназначен для режима разработки и позволяет инспектировать переменные, отображая их в виде таблицы. Он помогает разработчикам отслеживать значения переменных в процессе выполнения кода, упрощая отладку и понимание логики работы приложения.

Mode Inspector (Beta) – это простой плагин для Figma в режиме разработчика, позволяющий просматривать значения переменных в различных режимах, например, для извлечения переводов строк, хранящихся в других режимах переменных. Он полезен разработчикам для доступа к данным без прав на редактирование и без необходимости дублирования элементов интерфейса дизайнерами. В текущей бета-версии плагин поддерживает только строковые переменные.