Codia
150 000+ пользователей · 2 300+ лайков в Figma Community

Figma в код: экспорт макетов в React, HTML, Flutter и не только

Выберите фрейм в Figma и запустите бесплатный плагин Codia или загрузите скриншот, PDF или файл Figma в браузере. Получите код на React, Vue, HTML, Flutter, SwiftUI или Android, который можно просмотреть, скопировать и скачать.

Попробовать бесплатноУстановить бесплатный плагин для Figma

10 бесплатных кредитов каждый месяц · Без банковской карты · Работает на бесплатном тарифе Figma

1import { CheckIcon } from 'lucide-react'
2
3export function PricingCard() {
4  return (
5    <div className="rounded-2xl border border-zinc-200 bg-white p-8 shadow-sm">
6      <h3 className="text-sm font-medium text-zinc-500">Pro</h3>
7      <div className="mt-3 flex items-baseline gap-1">
8        <span className="text-4xl font-semibold tracking-tight">$29</span>
9        <span className="text-zinc-500">/mo</span>
10      </div>
11      <p className="mt-3 text-sm text-zinc-600">
12        Everything you need to ship production UIs, faster.
13      </p>
14      <button className="mt-6 w-full rounded-lg bg-zinc-900 py-2.5 text-sm font-medium text-white hover:bg-zinc-800">
15        Start free trial
16      </button>
17      <ul className="mt-6 space-y-2 text-sm text-zinc-700">
18        {['Unlimited projects', '6 framework targets', 'Priority support'].map((f) => (
19          <li key={f} className="flex items-center gap-2">
20            <CheckIcon className="h-4 w-4 text-emerald-500" />
21            {f}
22          </li>
23        ))}
24      </ul>
25    </div>
26  )
27}

От загрузки до кодовой базы за три шага.

Никаких тегов слоёв, никакой настройки плагина, никакого промпт-инжиниринга.

Шаг 1

Загрузите дизайн

Перетащите PNG, JPG, PDF или вставьте ссылку на Figma. Плагин Codia также считывает текущее выделение прямо внутри Figma.

PNG / JPG
PDF
Figma
Sketch

Перетащите дизайн или вставьте ссылку на Figma

Шаг 2

Выберите платформу

Укажите React, Vue, HTML, SwiftUI, Flutter или Android — и способ стилизации (Tailwind, CSS, styled-components, Swift styles, Compose).

React
Vue
HTML
SwiftUI
Flutter
Android
Стилизация:TailwindCSS · styled-components · Modules
Шаг 3

Отправьте код в работу

Просмотрите результат, затем скопируйте код или скачайте проект и продолжайте работу в своём редакторе.

~/src/components/PricingCard.tsx
1export functionPricingCard()
2 return(
3 <div className="pricing-card">
4 <h3>Pro</h3>
5 <p>$29/mo</p>
6 ...
Готово — скопируйте, скачайте или откройте в редактореЭкспорт

Код, который вы действительно мёрджите.

Настоящие компоненты для вашего фреймворка, а не экспорт картинки. Первая версия, которую ваша команда может проверить, отрефакторить и смёржить.

Чистые, идиоматичные компоненты

Именованные пропсы, семантический HTML, типизированные интерфейсы и конвенции конкретного фреймворка — никакого плоского месива из div-ов.

+ interface Props { variant: 'primary' | 'ghost' }
- const div = <div style={{...}} />

Вёрстка на основе Auto Layout

Фреймы с Auto Layout превращаются во flexbox, стеки и строки целевого фреймворка, поэтому из хорошо структурированного файла получается адаптивная вёрстка, а не фиксированные координаты.

Стили, которые уже использует команда

Tailwind, CSS, CSS Modules или styled-components для веба и нативные стили в SwiftUI, Flutter и Compose. На ревью замените сгенерированные цвета токенами своей темы.

Названия из ваших слоёв

Имена компонентов и классов повторяют названия слоёв в Figma, поэтому аккуратный файл с понятными названиями даёт код, который проще читать и рефакторить.

В Figma или в браузере

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

Достаточно быстро для итераций

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

Что говорят пользователи Figma

Комментарии приведены дословно со страницы плагина в Figma Community.

I am very impressed by this tool!! it does 75% of the job. Of course, it needs adjustments and cleanup as individual classes are created for every element and it better to consolidate that. But, it would have taken me hours to get even closer to that 75%. … I will be using this tool a lot! Thanks!
JJorge Tardio Urquidi@jorgetardiourqu ·
I checked out a few code generators for Vue.js in the community, and Codia is hands down the best one I've come across
FFlorin Kissi@florinkissi ·
oh my god, is this perfect plugin. For me, it's the best Android export plug-in in history
박박재웅@1d749f4c_4f86_4 ·
Читать все комментарии в Figma Community

Тарифы

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

Вопросы о конвертации Figma в код

Ответы о том, как превратить макеты Figma в код на React, HTML, Flutter и для мобильных приложений.

Другие плагины Codia для Figma

Запустите следующий экран за минуты.

10 бесплатных кредитов каждый месяц, без банковской карты. Работает с макетами, которые у вас уже есть.

Попробовать Codia бесплатноУстановить бесплатный плагин для Figma