bernaferrari/FigmaToCode

Что это?

Ключевые возможности

• 01Генерирует HTML, React, Svelte, styled-components, Tailwind, Flutter и SwiftUI-код по выбранным элементам Figma.
• 02Преобразует Auto Layout, вложенные фреймы, выравнивание и смешанное абсолютное позиционирование.
• 03Поддерживает генерацию для Tailwind 3 и Tailwind 4 с необязательными префиксами классов.
• 04Использует цветовые переменные Figma и встраивает изображения в HTML в формате Base64.
• 05Показывает предварительный просмотр в реальном времени и предупреждения об элементах, которые сложно корректно преобразовать.
• 06Экспортирует стартовые проекты для Vite, Next.js, Flutter или SwiftUI вместе с локальными ресурсами.

Сценарии использования

• Передать разработчикам готовый компонент из Figma как основу для первой реализации.
• Быстро набросать секцию страницы на Tailwind или React до подключения логики приложения.
• Создать основу проекта на Flutter или SwiftUI по существующему мобильному дизайну.
• Работать в среде, где файлы дизайна нельзя отправлять во внешние AI-сервисы или облачные сервисы.

Быстрый старт

1. 1

   Установите бесплатный плагин из Figma Community

2. 2

   Выберите во Figma фрейм, компонент, группу или слой и запустите плагин, затем выберите целевой формат

Что важно знать

• !Для работы требуется Figma; плагин работает только в среде плагинов Figma.
• !Сгенерированный код представляет собой визуальную основу и требует проверки человеком на соответствие семантике, требованиям доступности и логике приложения.
• !Лицензия — GPL-3.0, лицензия с авторским левом, которая влияет на распространение производного кода.

В подборках

Темы

Частые вопросы

Что такое FigmaToCode?

Плагин Figma, который локально преобразует выбранный макет в редактируемый код для HTML, React, Svelte, Tailwind, Flutter или SwiftUI. Figma to Code — это плагин Figma, который преобразует выбранный фрейм, компонент, группу или слой в начальный код для веба и нативных платформ. Поддерживаются HTML, React (JSX), Svelte, styled-components, Tailwind CSS (с синтаксисом Tailwind 3 и 4), виджеты Flutter и представления SwiftUI. Плагин также может собрать сгенерированный код и локальные изображения в небольшие стартовые проекты, например на базе Vite, Next.js, Flutter или SwiftUI.

FigmaToCode можно использовать бесплатно? Какая у него лицензия?

FigmaToCode распространяется с открытым исходным кодом под лицензией GPL-3.0. Перед использованием в коммерческих продуктах проверьте условия лицензии.

FigmaToCode всё ещё поддерживается?

Обновлялся за последние 6 месяцев. Последний коммит в FigmaToCode — 5 авг. 2026 г..

Для чего можно использовать FigmaToCode?

Передать разработчикам готовый компонент из Figma как основу для первой реализации. Быстро набросать секцию страницы на Tailwind или React до подключения логики приложения. Создать основу проекта на Flutter или SwiftUI по существующему мобильному дизайну. Работать в среде, где файлы дизайна нельзя отправлять во внешние AI-сервисы или облачные сервисы.

Как установить FigmaToCode?

Установите бесплатный плагин из Figma Community Выберите во Figma фрейм, компонент, группу или слой и запустите плагин, затем выберите целевой формат

Где скачать FigmaToCode?

Исходный код и инструкции по установке — на GitHub: https://github.com/bernaferrari/FigmaToCode