Codia
150 000+ utilizadores · 2 300+ gostos na Figma Community

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

Selecione um frame no Figma e execute o plugin gratuito da Codia, ou carregue uma captura de ecrã, um PDF ou um ficheiro do Figma no navegador. Obtenha código React, Vue, HTML, Flutter, SwiftUI ou Android para pré-visualizar, copiar e transferir.

Testar grátisObter o plugin gratuito para o Figma

10 créditos gratuitos por mês · Sem cartão de crédito · Funciona no plano gratuito 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

Pré-visualize o resultado e depois copie o código ou transfira o projeto para continuar a trabalhar no seu 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, descarregar ou abrir no editorExportar

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

Componentes reais no seu framework, não uma imagem exportada. Uma primeira versão que a sua equipa pode rever, refatorar e integrar.

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 a partir do Auto Layout

Os frames com Auto Layout tornam-se flexbox, stacks e linhas no framework escolhido, por isso um ficheiro bem estruturado dá layouts que se adaptam em vez de posições fixas.

Os estilos que a sua equipa já usa

Tailwind, CSS, CSS Modules ou styled-components na web, e estilos nativos em SwiftUI, Flutter e Compose. Na revisão, substitua 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, por isso um ficheiro arrumado e bem nomeado dá código mais fácil de ler e refatorar.

No Figma ou no navegador

Execute o plugin num frame dentro do Figma ou carregue uma captura de ecrã, um PDF ou um ficheiro do Figma na aplicação web da Codia. Em ambos os casos obtém código para pré-visualizar, copiar ou transferir.

Rápido o suficiente para iterar

Uma ecrã 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 dizem os utilizadores do Figma

Comentários citados 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 grátis e evolua no seu ritmo.

Perguntas frequentes sobre Figma para código

Respostas sobre como converter designs do Figma em código React, HTML, Flutter e de aplicações móveis.

Mais plugins da Codia para o Figma

Entregue sua próxima ecrã em minutos.

10 créditos gratuitos por mês, sem cartão de crédito. Funciona com os designs que já tem.

Testar Codia grátisObter o plugin gratuito para o Figma