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.

Lieber in Figma bleiben?Kostenloses Figma-Plugin holen

Kostenlos starten · Keine Kreditkarte · Funktioniert mit dem kostenlosen Figma-Plan

Das neue Figma-Plugin

Eine ganze App aus deiner Figma-Datei, nicht Screen für Screen

Das neu gebaute Codia-Plugin liest deine echten Ebenen, Bilder und Vektoren und gibt dir ein lauffähiges Projekt zurück.

  • Viele Frames, eine App mit Routing

    Wähle bis zu 20 Frames aus, jeder wird zu einer Seite. Seitennamen und Routen kannst du vor dem Generieren anpassen.

  • Schnellkonvertierung ohne Modell-Tokens

    HTML, React oder Vue mit CSS direkt aus dem Layout. Für mehr wechselst du zum AI Agent.

  • Aus deinen echten Assets gebaut

    Bildfüllungen und SVG-Vektoren werden unverändert aus Figma exportiert, damit der Code dem Design entspricht, statt es zu erraten.

  • Vorschau, Kopieren und ZIP in Figma

    Sieh die laufende App, lies den Code Datei für Datei, kopiere ihn oder lade ein ZIP herunter, ohne das Plugin zu verlassen. Der Verlauf speichert jede Version.

  • Bereit im Dev Mode

    Entwickler öffnen den Dev Mode und sehen den bereits generierten Code für dieses Design, ohne neuen Lauf und ohne zusätzliche Credits.

  • Im Web weiterentwickeln

    Ein Klick öffnet das Projekt in Codia Code, wo der Agent weiter verfeinert und du es unter einer echten URL veröffentlichen kannst.

Acht Ziele

Web-Vorschauen laufen im Plugin. Native Ziele liefern Quellcode und Anleitung zum Ausführen.

  • HTML
  • React
  • Vue
  • iOS
  • Android
  • Flutter
  • React Native
  • macOS
Kostenloses Figma-Plugin holenOder mit einem Figma-Link starten

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

Ein Design. Sechs framework-nativ Ausgaben.

Dieselbe Komponente, idiomatisch in jedem Framework. Klick auf einen Tab zum Wechseln — oder lass es automatisch durchlaufen.

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}

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.

Kostenlos starten, keine Kreditkarte. Funktioniert mit den Designs, die du schon hast.

Kostenloses Figma-Plugin holenCodia kostenlos ausprobieren