Codia
150.000+ usuários · 2.300+ curtidas na Figma Community

Figma para código: exporte seus designs para React, HTML, Flutter e mais

Selecione um frame no Figma e rode o plugin grátis da Codia, ou envie um print, PDF ou arquivo do Figma direto no navegador. Receba código React, Vue, HTML, Flutter, SwiftUI ou Android para visualizar, copiar e baixar.

Testar grátisBaixar o plugin grátis para Figma

10 créditos grátis todo mês · Sem cartão de crédito · Funciona no plano grátis do 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}

Do upload ao repositório em três passos.

Sem etiquetar layers, sem calibrar plugin, sem prompt engineering.

Passo 1

Traga o design

Arraste um PNG, JPG, PDF ou cole um link do Figma. O plugin Codia também lê a seleção atual diretamente dentro do Figma.

PNG / JPG
PDF
Figma
Sketch

Arraste um design ou cole um link do Figma

Passo 2

Escolha o target

Selecione React, Vue, HTML, SwiftUI, Flutter ou Android — e um estilo (Tailwind, CSS, styled-components, Swift styles, Compose).

React
Vue
HTML
SwiftUI
Flutter
Android
Estilo:TailwindCSS · styled-components · Modules
Passo 3

Faça o ship

Veja a prévia do resultado e depois copie o código ou baixe o projeto para continuar no seu próprio editor.

~/src/components/PricingCard.tsx
1export functionPricingCard()
2 return(
3 <div className="pricing-card">
4 <h3>Pro</h3>
5 <p>$29/mo</p>
6 ...
Pronto para copiar, baixar ou abrir no editorExportar

Feito para código que você realmente faz merge.

Componentes de verdade no seu framework, não uma imagem exportada. Um primeiro rascunho que seu time pode revisar, refatorar e mergear.

Componentes limpos e idiomáticos

Props nomeadas, HTML semântico, interfaces tipadas e as convenções que o framework exige — sem aquela sopa plana de divs.

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

Layouts gerados a partir do Auto Layout

Frames com Auto Layout viram flexbox, stacks e linhas no framework escolhido, então um arquivo bem estruturado gera layouts que se adaptam em vez de posições fixas.

O estilo que seu time já usa

Tailwind, CSS, CSS Modules ou styled-components na web, e estilos nativos em SwiftUI, Flutter e Compose. Na revisão, troque as cores geradas pelos tokens do seu tema.

Com os nomes das suas camadas

Os nomes de componentes e classes seguem os nomes das camadas do Figma, então um arquivo organizado e bem nomeado gera código mais fácil de ler e refatorar.

No Figma ou no navegador

Rode o plugin em um frame dentro do Figma ou envie um print, PDF ou arquivo do Figma para o app web da Codia. Nos dois casos você recebe código para visualizar, copiar ou baixar.

Rápido o suficiente para iterar

Uma tela típica converte em segundos, então você pode tratar a geração de código como parte natural do loop de design.

O que os usuários do Figma dizem

Comentários reproduzidos palavra por palavra da página do plugin na 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 ·
Ver todos os comentários na Figma Community

Planos e Preços

Preços transparentes para cada produto. Comece de graça e evolua no seu ritmo.

Perguntas frequentes sobre Figma para código

Respostas sobre como transformar designs do Figma em código React, HTML, Flutter e de apps mobile.

Mais plugins da Codia para Figma

Entregue sua próxima tela em minutos.

10 créditos grátis todo mês, sem cartão de crédito. Funciona com os designs que você já tem.

Testar Codia grátisBaixar o plugin grátis para Figma