Screenshot in Figma umwandeln:
Aus jedem Bild werden bearbeitbare Ebenen
Lade einen Screenshot, ein PNG oder JPG hoch und erhalte ein Figma-Design, das du wirklich bearbeiten kannst: echter Text, Formen, Bilder und gruppierte Ebenen statt eines flachen Bildes. Nutze das kostenlose Figma-Plugin oder konvertiere direkt im Browser.
Figma-Plugins laufen auf dem Computer. Auf dem Smartphone probierst du am besten zuerst die Browser-Version aus.
5 kostenlose KI-Credits pro Monat · Keine Kreditkarte · Funktioniert mit dem kostenlosen Figma-Plan
Kein Plugin? Im Browser konvertieren
Entwickelt für gängige Kreativ-Workflows
Echte Ergebnisse
Typische Screenshots, umgewandelt in bearbeitbare Ebenen
Eine Website, ein Dashboard und eine Mobile App, jeweils konvertiert mit derselben Screenshot-zu-Design-Engine, die auch das Figma-Plugin nutzt. Überschriften, Buttons, Karten und Fotos landen jeweils auf einer eigenen Ebene.
Eine Reise-Landingpage. Navigationslinks, Buttons, Fotos und die Reiseplan-Karte sind separate Ebenen, die ausgewählte Überschrift ist bearbeitbarer Text.
Ein Analytics-Dashboard. Jede KPI-Karte ist eine Gruppe aus Text, Badge und Hintergrund, die ausgewählte Zahl ist bearbeitbarer Text in Inter Bold.
Eine Essenslieferdienst-App. Das Promo-Banner ist in Titel, Untertitel, Button und Foto aufgeteilt, der ausgewählte Titel ist bearbeitbarer Text in Inter Bold.
Die Beispiel-Screens sind fiktive Produkte, die für diese Demo generiert wurden; die Konvertierungen sind echt. Dargestellt in Codia Studio mit geöffnetem Ebenen-Panel. Das Figma-Plugin erstellt seine Ebenen aus derselben Konvertierung, und die Ergebnisse hängen vom Ausgangsbild ab.
Was du konvertieren kannst
Bild zu Figma für jede Art von UI
Wovon du einen Screenshot machen kannst, das kannst du auch konvertieren. Codia wandelt PNG-, JPG- und WebP-Bilder echter Produkte und Mockups in Figma-Designs um.
App-Screens für iOS und Android
Baue App-Screens vom Smartphone, aus einem TestFlight-Build oder einem Store-Eintrag nach, ohne jede Komponente neu zu zeichnen.
Websites und Landingpages
Mach aus einer erfassten Webseite ein bearbeitbares Layout. Für eine Live-URL importiert Web to Figma die Seite direkt.
SaaS-Dashboards und Admin-Panels
Tabellen, Diagramme, Seitenleisten und dichte Formulare kommen als bearbeitbare Elemente zurück, bereit für ein Redesign.
Design-Referenzen und Moodboards
Mach aus einem Inspirationsbild oder Referenz-Screen Ebenen, die du analysieren, neu gestalten und anpassen kannst.
Alte UIs ohne Quelldateien
Die Original-Designdatei ist weg? Stelle aus einem Screenshot des fertigen Produkts eine bearbeitbare Version wieder her.
PNG-, JPG- und WebP-Bilder
Jedes UI-Bild funktioniert, vom schnellen Screenshot bis zum exportierten Mockup. Schärfere, höher aufgelöste Bilder liefern saubereren Text.
So funktioniert's
So wandelst du einen Screenshot in Figma um
Drei Schritte im Figma-Plugin. Die meisten Screens sind in wenigen Minuten bearbeitbar.
- 1
Kostenloses Plugin installieren
Öffne Codia AI Design in der Figma Community und starte es in einer beliebigen Figma-Datei.
- 2
Screenshot hochladen
Lade ein PNG, JPG oder WebP hoch: einen App-Screen, eine Webseite, ein Dashboard oder eine Design-Referenz.
- 3
Generierte Ebenen bearbeiten
Codia baut Text, Formen, Bilder und die Ebenenhierarchie auf deinem Canvas neu auf. Bearbeite alles wie jedes andere Figma-Design.
Lieber im Browser?
Lade das Bild oben auf dieser Seite hoch. Codia Studio öffnet es als bearbeitbaren Canvas; klicke auf „Nach Figma kopieren“ und füge es in deine Datei ein.
Was du bekommst
Bearbeitbare Figma-Ebenen statt eines flachen Bildes
Ein in Figma eingefügter Screenshot ist ein einziges Bild. Ein konvertierter Screenshot ist ein Design: Jedes Element ist eine eigene Ebene.
Echte Textebenen
Überschriften, Labels und Absätze kommen als bearbeitbarer Text zurück. So änderst du Texte, ohne den Screen abzutippen.
UI-Hierarchie statt loser Formen
Container, Listen, Buttons und Karten werden zu einem Ebenenbaum gruppiert, den du verschieben, skalieren und neu gestalten kannst.
Bilder und Icons auf eigenen Ebenen
Fotos, Illustrationen und Icons werden vom Hintergrund getrennt, statt mit ihm zu verschmelzen.
Schriften und mehrsprachiger Text
Die Schrifterkennung bewahrt den ursprünglichen Look, und Text wird in vielen Sprachen erkannt, nicht nur auf Englisch.
SVG-Ausgabe, wenn du Vektoren brauchst
Wandle denselben Screenshot in skalierbares SVG um, für Icons, Illustrationen und Assets, die scharf bleiben müssen.
Bereit für Design to Code
Ein strukturierter Ebenenbaum ist ein sauberer Ausgangspunkt für Codia Design to Code und andere Figma-zu-Code-Tools.
Einfügen, nachbauen oder konvertieren: drei Wege, einen Screenshot in Figma zu bringen
Einfügen geht sofort, liefert aber nur ein Bild. Von Hand nachbauen ist bearbeitbar, aber langsam. Konvertieren bietet beides.
| Mit Codia konvertieren | Bild einfügen | Von Hand nachbauen | |
|---|---|---|---|
| Bearbeitbarer Text | Ja, als Textebenen erkannt | Nein, Text besteht aus Pixeln | Ja, manuell abgetippt |
| Ebenenstruktur | Gruppierte, verschachtelte Ebenen | Ein flaches Bild | Manuell aufgebaut |
| Schriften und Farben | Aus dem Bild erkannt | Nur sichtbar | Nach Augenmaß angepasst |
| Zeit pro Screen | Minuten, dann Feinschliff | Sekunden | Oft Stunden |
Was Designer in der Figma Community sagen
Auszüge aus öffentlichen Kommentaren auf der Seite des Codia AI Design Plugins, im Originalwortlaut.
Very impressed! I was skeptical, having tried other 'screenshot to figma' plugins with terrible results. This Codia plugin rapidly created an almost pixel-perfect replica of the screenshots, with all the correct vectors and layers. … The free 5 credits is more than enough to test the outputs before making a purchase decision. I'm subscribing now.We tested it today. With various screen shots. Very cool. And very simple to use.It was super helpful! Codia allows you to use a free version with pre set image formats (size for example). I recommend it!Preise für Screenshot zu Figma
Starte kostenlos mit 5 KI-Credits pro Monat. Upgrade für größere Screenshots, Batch-Uploads und mehr Credits.
FAQ: Screenshot zu Figma
Antworten rund um die Umwandlung von Screenshots und Bildern in bearbeitbare Figma-Designs.
Noch Fragen? Schreib uns, wir helfen gern.
Support kontaktierenVerwandte Anleitungen und Konverter
- Anleitung: Screenshot zu FigmaTipps für sauberere Ergebnisse, von der Aufnahme bis zu den fertigen Ebenen.
- Plugin-DokumentationEinstellungen, Limits und Fehlerbehebung für Codia AI Design.
- Screenshot zu CanvaWandle Screenshots in bearbeitbare Canva-Designs um.
- Screenshot zu PhotoshopBaue Screenshots als bearbeitbare PSD-Ebenen nach.
- Screenshot zu SketchWandle Screenshots auf deinem Mac in Sketch-Ebenen um.
- Web to FigmaImportiere eine Live-Webseite über ihre URL in Figma.
- PDF zu FigmaWandle PDF-Seiten in bearbeitbare Figma-Frames um.
- Screenshot-zu-Design-APIWandle UI-Screenshots stapelweise in JSON-, SVG- und Figma-Daten um.
Wandle deinen ersten Screenshot
kostenlos in Figma um
Installiere das Plugin in Figma oder lade ein Bild im Browser hoch. Jedes Konto erhält jeden Monat kostenlose KI-Credits.
Keine Kreditkarte · Dateien werden nicht zum Training genutzt · 5 kostenlose KI-Credits pro Monat