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.

Prefere ficar no Figma?Obter o plugin gratuito para o Figma

Comece gratuitamente · Sem cartão de crédito · Funciona no plano gratuito do Figma

O novo plugin do Figma

Uma app inteira a partir do seu ficheiro Figma, não um ecrã de cada vez

O plugin Codia, refeito de raiz, lê as suas camadas, imagens e vetores reais e devolve um projeto que funciona.

  • Vários frames, uma app com rotas

    Selecione até 20 frames e cada um torna-se uma página. Altere nomes e rotas antes de gerar.

  • Conversão rápida, sem tokens de modelo

    Obtenha HTML, React ou Vue com CSS diretamente do layout. Mude para o AI Agent quando quiser mais.

  • Feito com os seus recursos reais

    Preenchimentos de imagem e vetores SVG são exportados do Figma tal como estão, para o código seguir o design em vez de o adivinhar.

  • Pré-visualizar, copiar e ZIP no Figma

    Veja a app a funcionar, leia o código ficheiro a ficheiro, copie-o ou descarregue um ZIP sem sair do plugin. O histórico guarda todas as versões.

  • Pronto no Dev Mode

    Os programadores abrem o Dev Mode e veem o código já gerado para esse design, sem nova geração nem créditos extra.

  • Continue na web

    Com um clique abre o projeto no Codia Code, onde o agente o continua a melhorar e pode publicá-lo num URL real.

Oito destinos

As pré-visualizações web correm no plugin. Os destinos nativos incluem código-fonte e instruções de execução.

  • HTML
  • React
  • Vue
  • iOS
  • Android
  • Flutter
  • React Native
  • macOS
Obter o plugin gratuito para o FigmaOu comece com um link do Figma

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

Um design. Seis saídas nativas por framework .

O mesmo componente, idiomático em cada framework. Clique em uma aba para navegar ou deixe o ciclo automático rodar.

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}

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.

Comece gratuitamente, sem cartão de crédito. Funciona com os designs que já tem.

Obter o plugin gratuito para o FigmaTestar Codia grátis