FIGMA FÜR DIE WEB-ENTWICKLUNG
Schnell von der Idee zur Website
Figma hilft Web-Entwicklungsteams, schneller gemeinsam zu brainstormen, zu designen und zu konstruieren.
![Eine grafische Darstellung der Schaltfläche zum Umschalten zu Dev Mode, ein CSS-Box-Modell und Prototyping-Linien. Außerdem gibt es einen Smiley.](https://cdn.sanity.io/images/599r6htc/regionalized/ed9594ace473af842a0a7515419b8c01557ff757-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)
Im Einsatz bei den Teams von
![Vercel-Logo](https://cdn.sanity.io/images/599r6htc/regionalized/926e3cc5c12733ada700593e419dc2c5b522a95f-292x66.png?rect=0,1,292,64&w=137&h=30&q=75&fit=max&auto=format)
![Linear-Logo](https://cdn.sanity.io/images/599r6htc/regionalized/1ee7db4aecfc433c1ed21cfe6e2a5b90a4206d7a-273x69.png?rect=0,1,273,68&w=128&h=32&q=75&fit=max&auto=format)
Das Entwickeln von großartigen Web-Erfahrungen ist schwierig. Figma macht es einfacher.
Figma bringt Webdesign- und Entwicklungsteams auf einer Plattform zusammen.
Veröffentliche die Website so, wie du sie dir vorgestellt hast
Prototyping ermöglicht es Designer*innen, ihre umfassende Vision ihres Designs, einschließlich Animationen und Interaktionen, mit ihren Entwicklungspartner*innen zu teilen. Das reduziert nicht nur unnötiges Hin und Her, sondern auch Missverständnisse.
![Panels zur Darstellung von Symbolen, Farbstilen, Typografie‑ und Layoutstilen für die Mobilgeräte-Ansicht einer E-Commerce-Website.](https://cdn.sanity.io/images/599r6htc/regionalized/ab3268938592549a5a2de059c1610bfbb080091e-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Design und Code aufeinander abstimmen
Verwende ein freigegebenes Designsystem mit Komponenten und Stilen, die auf den Code abgestimmt sind, um Inkonsistenzen zu verringern und die Entwicklung zu beschleunigen.
![Ansicht von Produktfotos der App im hellen und dunklen Modus für den Export](https://cdn.sanity.io/images/599r6htc/regionalized/8aba504f624298af854a8e5a4ce2b4c1d4a25746-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Das Handoff effizient gestalten
Mit dem Dev Mode erhalten Entwickler*innen einen eigenen Bereich in Figma, in dem angezeigt wird, was für die Entwicklung bereit ist, und in dem sie Änderungen zwischen Versionen vergleichen und Anmerkungen von Designer*innen einsehen können.
Funktionen für die Web-Entwicklung entdecken
![Ein Tab mit booleschen Eigenschaften für eine Schaltflächenkomponente „Add to Basket“ (In den Warenkorb).](https://cdn.sanity.io/images/599r6htc/regionalized/b9cff110ea99245b350325ed17628a2594d54422-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Komponenten mit Code verknüpfen
Verwende Komponenteneigenschaften, um Komponenten anpassbarer zu machen und sie mit React-Eigenschaften zu verknüpfen.
![Eine Darstellung des Asana-Widgets in FigJam auf violettem Hintergrund](https://cdn.sanity.io/images/599r6htc/regionalized/21e1a20b163e2e8b16397715b0df778fec42ce62-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Integration mit deinem Tech-Stack
Verbinde deine Figma-Dateien mit anderen Tools wie Asana und Microsoft Teams über nützliche Integrationen, um organisiert und effizient zu bleiben.
![Ein Diagramm, das ein violettes FigJam-Symbol, ein blaues Figma-Symbol und eine grüne Dev-Modus-Schaltfläche zum Umschalten miteinander verbindet](https://cdn.sanity.io/images/599r6htc/regionalized/41f228a7719550ec384841e0ad7735244132856a-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Individuelle Workflows erstellen
Automatisiere Aufgaben, integriere Daten in deine Designs und verbessere die Zusammenarbeit mit einer Vielzahl von Plug-ins und Widgets, die von der Community für die Community entwickelt wurden.
Unabhängig von ihrer Fachrichtung haben alle Zugriff auf einen zentralen Ort, an dem Inhalte eingesehen, verstanden und ergänzt werden können.
Levon Sharrow, Director of Experience Design, Patagonia
Weitere Informationen zu Best Practices bei der Web-Entwicklung
![Das Figma-Logo vor einem mehrfarbigen Hintergrund mit einem gelben Cursor-Chat, der „Sweeeeet!“ anzeigt.](https://cdn.sanity.io/images/599r6htc/regionalized/6f9cdd24ac0f698c60d972961280426b972d9d7c-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Wie Figma unser Website-Designsystem aufgebaut hat
Schau dir an, wie das Marketingteam von Figma das Designsystem für figma.com aufgebaut hat und weiter ausbaut.
![Suchergebnisse für „web“ in der Figma Community](https://cdn.sanity.io/images/599r6htc/regionalized/292a176971797f12180ba6bedddfea3f92adc28e-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Ressourcen für die Web-Entwicklung
Durchsuche Inspirationen, Tools und Vorlagen für die Webentwicklung – erstellt und kuratiert von der Figma Community.
![Ein*e Entwickler*in wählt mit dem Cursor einen grünen Kreis aus und zeigt Heximalcodes für Farben der Marke in einer Designsystem-Bibliothek an.](https://cdn.sanity.io/images/599r6htc/regionalized/339a85a7edb268c4ae323eb8038b25f351e8d676-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Leitfaden für ein besseres Entwickler-Handoff
Sieh dir eine Sammlung mit Best Practices von Fachleuten an.