Figma für Entwickler*innen
Produkte schneller erfassen und versenden
Für einen effektiveren Produktentwicklungsprozess bringt Figma Entwickler*innen und Designer*innen zusammen.
![Eine grafische Darstellung von Entwicklungssymbolen und -formen, einschließlich Codeschnipseln, Abständen und der Schaltfläche zum Umschalten zum Dev Mode.](https://cdn.sanity.io/images/599r6htc/regionalized/bf6428df8de7b47978beb51494324e94816a44af-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)
Im Einsatz bei den Teams von
An einem Ort von der Idee zum fertigen Produkt
Figma unterstützt dich und dein Team bei der Zusammenarbeit bei Design‑ und Entwicklungsentscheidungen von Anfang bis Ende.
Designs schneller in Code übersetzen
Schaffe effizientere Workflows vom Design bis zur Produktion. Finde die Details, die du brauchst, schnell mit dem Dev Mode, um mit dem Designen zu beginnen.
![Eine Bibliothek mit Symbolen, Farben, Schriftarten und Abstandshaltern](https://cdn.sanity.io/images/599r6htc/regionalized/876225f41a3f420c161b8b2dc62aa018f88fb73a-1080x864.png?w=780&h=624&q=75&fit=max&auto=format)
Konsistentere Produkte entwickeln
Verwende standardisierte Stile, Variablen und Komponenten, um deine Designs an deine Code-Basis anzupassen. So lässt sich repetitive Arbeit reduzieren.
![Ein farbiges Workflow-Diagramm in FigJam, das die technische Architektur zwischen HR, Rechtsabteilung, Vertrieb, Design und einem internen Hub darstellt](https://cdn.sanity.io/images/599r6htc/regionalized/5b1cf7a440bb8ab962be15902ef08f3f5156e911-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Komplexität in Klarheit verwandeln
Organisiere Zeitpläne, skizziere technische Architekturen und vieles mehr in FigJam, um eine gemeinsame Strategie festzulegen, bevor die Entwicklung beginnt.
Der Dev Mode hat eine wichtige Funktion dabei übernommen, unser Designsystem verständlicher und leichter anwendbar zu machen.
Saurabh Soni, Head of Design bei Razorpay
Figma-Funktionen, die Entwickler*innen begeistern
Designs prüfen
Navigiere durch Dev Mode-Dateien, um Maße, Spezifikationen und Stile direkt im Kontext des Designs zu finden. Generiere produktionsfertige Codeschnipsel für CSS, iOS oder Android.
![Nebeneinanderliegende Ansicht der alten und neuen Version der Bedienoberfläche für Mobilgeräte](https://cdn.sanity.io/images/599r6htc/regionalized/66f7ce8f51d909d60d391d18242bce970bc38b2a-1080x864.png?w=540&h=432&q=75&fit=max&auto=format)
Änderungen vergleichen
Organisiere Designdateien mit Abschnittsstatus, damit Entwickler*innen wissen, was zur Umsetzung bereit ist. Vergleiche Änderungen und exportiere Anlagen mit nur einem Klick, um ohne langes Hin und Her das abzurufen, was du benötigst.
![Eine Panel-Ansicht der Entwicklungseigenschaften für eine Schaltflächenkomponente „Add to Basket“ (In den Warenkorb).](https://cdn.sanity.io/images/599r6htc/regionalized/9692ab0e31723bae28278df364300b4a7920ecf1-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
Mit Code abgeglichene Komponenten
Passe Variablen an Design-Token an, und weise Komponenten React-Eigenschaften zu, um doppelte Arbeit zu vermeiden und die endgültigen Ausgaben näher an den Designdateien zu halten.
![Ein Projekt-Arbeitsbereich in Visual Studio Code](https://cdn.sanity.io/images/599r6htc/regionalized/65f9c5d4c1ebd2081ba5bf62792a8d1b302120cb-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)
Integration mit VS Code
Mit Figma for VS Code können Entwickler*innen Designdateien prüfen und direkt in deiner Entwicklungsumgebung zusammenarbeiten. Du musst deinen Workflow nicht unterbrechen, um Änderungen nachzuverfolgen und auf Kommentare zu reagieren.
Weitere Ressourcen für Entwickler*innen
![Eine grafische Darstellung einer gelben Form, überlagert von einem CSS-Box-Modell und Objektabstand sowie einer Schaltfläche zum Umschalten zum Dev Mode am Rand](https://cdn.sanity.io/images/599r6htc/regionalized/bc392a262b9c318211a97043400c17f69f46b5b5-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Dev Mode-Testumgebung
Sieh dir diese Playground-Datei an, um mehr über den Dev Mode zu erfahren und zu lernen, wie du ihn verwenden kannst.
![Eine grafische Darstellung einer ausgewählten Form und eines CSS-Box-Modells auf violettem Hintergrund](https://cdn.sanity.io/images/599r6htc/regionalized/5d87a680c53960190689c08fd4743edec1f55e12-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Leitfaden zum Dev Mode
Mache dich mit den Unterlagen vertraut, um mehr über die Verwendung der Dev Mode-Funktionen zu erfahren.
![Eine grafische Darstellung einer Komponente und der Schaltfläche zum Umschalten zum Dev Mode, die als Sprechblasen dargestellt werden, als ob sie miteinander kommunizieren würden](https://cdn.sanity.io/images/599r6htc/regionalized/4d2805c29b92d4db14168d337d6eaf29f14f2956-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Alles Wissenswerte über den Dev Mode
Erfahre mehr über unsere Produktphilosophie und wie wir die Erfahrung von Entwickler*innen und Designer*innen in Figma verbessern.