Codia
150.000+ Nutzer · 2.300+ Likes in der Figma Community

Figma zu Code: Designs als React, HTML, Flutter und mehr exportieren

Wähle in Figma einen Frame aus und starte das kostenlose Codia-Plugin, oder lade einen Screenshot, ein PDF oder eine Figma-Datei im Browser hoch. Du bekommst React-, Vue-, HTML-, Flutter-, SwiftUI- oder Android-Code zum Ansehen, Kopieren und Herunterladen.

Kostenlos startenKostenloses Figma-Plugin holen

10 kostenlose Credits pro Monat · Keine Kreditkarte · Funktioniert mit dem kostenlosen Figma-Plan

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}

Vom Upload zur Codebasis in drei Schritten.

Kein Layer-Tagging, keine Plugin-Kalibrierung, kein Prompt-Engineering.

Schritt 1

Design einwerfen

Zieh eine PNG-, JPG- oder PDF-Datei rein, oder füge einen Figma-Link ein. Das Codia-Plugin liest deine aktuelle Auswahl auch direkt in Figma.

PNG / JPG
PDF
Figma
Sketch

Design ablegen oder Figma-Link einfügen

Schritt 2

Ziel-Framework wählen

Wähle React, Vue, HTML, SwiftUI, Flutter oder Android — und den passenden Styling-Ansatz (Tailwind, CSS, styled-components, Swift Styles, Compose).

React
Vue
HTML
SwiftUI
Flutter
Android
Styling:TailwindCSS · styled-components · Modules
Schritt 3

Code shippen

Sieh dir das Ergebnis in der Vorschau an, kopiere dann den Code oder lade das Projekt herunter und arbeite in deinem eigenen Editor weiter.

~/src/components/PricingCard.tsx
1export functionPricingCard()
2 return(
3 <div className="pricing-card">
4 <h3>Pro</h3>
5 <p>$29/mo</p>
6 ...
Bereit zum Kopieren, Herunterladen oder im Editor öffnenExportieren

Gebaut für Code, den du wirklich mergen willst.

Echte Komponenten in deinem Framework statt eines flachen Bildexports. Ein erster Entwurf, den dein Team prüfen, refaktorieren und mergen kann.

Saubere, idiomatische Komponenten

Benannte Props, semantisches HTML, typisierte Interfaces und die Konventionen, die das Framework erwartet — kein flacher div-Einheitsbrei.

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

Layouts aus Auto Layout

Auto-Layout-Frames werden im Ziel-Framework zu Flexbox, Stacks und Rows. Aus gut strukturierten Dateien entstehen so Layouts, die sich anpassen, statt fester Positionen.

Das Styling, das dein Team schon nutzt

Tailwind, CSS, CSS Modules oder styled-components im Web, natives Styling in SwiftUI, Flutter und Compose. Im Review tauschst du die erzeugten Farben gegen deine Theme-Tokens.

Benannt nach deinen Ebenen

Komponenten- und Klassennamen folgen deinen Figma-Ebenennamen. Eine aufgeräumte, gut benannte Datei ergibt Code, der leichter zu lesen und zu refaktorieren ist.

In Figma oder im Browser

Starte das Plugin auf einem Frame in Figma oder lade einen Screenshot, ein PDF oder eine Figma-Datei in die Codia-Web-App. Beide Wege liefern Code zum Ansehen, Kopieren oder Herunterladen.

Schnell genug für echte Iteration

Ein typischer Screen ist in Sekunden konvertiert — so wird Code-Generierung zum natürlichen Teil deines Design-Loops.

Was Figma-Nutzer sagen

Kommentare im Originalwortlaut von der Seite des Plugins in der 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 ·
Alle Kommentare in der Figma Community lesen

Preise

Klare Preise für jedes Produkt. Starte kostenlos und wachse in deinem Tempo.

Figma zu Code: häufige Fragen

Antworten rund um die Umwandlung von Figma-Designs in React-, HTML-, Flutter- und Mobile-App-Code.

Weitere Codia-Plugins für Figma

Dein nächster Screen fertig in Minuten.

10 kostenlose Credits pro Monat, keine Kreditkarte. Funktioniert mit den Designs, die du schon hast.

Codia kostenlos ausprobierenKostenloses Figma-Plugin holen