Figma zur Website, genau wie gestaltet gebaut
Gjethe verwandelt Figma-Designs in produktive Websites mit Next.js, Webflow oder WordPress. Wir übersetzen Ihre Stile in Design Tokens, bauen wiederverwendbare Komponenten, ergänzen fehlende responsive und Interaktionszustände, erfüllen Barrierefreiheitsstandards und binden ein CMS an, passen eng ans Design an und halten dabei den Code sauber.
- Kostenlose Erstberatung
- Schriftliches Angebot für Ihr Projekt
- Flexible Zahlungsmeilensteine
Auf einen Blick
- Bauen in
- Next.js, Webflow oder WordPress
- Vorgehen
- Tokens und Komponenten
- Barrierefreiheit
- WCAG 2.2 AA
- Arbeitet zusammen mit
- Designer und Agenturen
Definition
Was ist Figma zur Website?
Figma zur Website (auch Figma-to-Code genannt) ist die Frontend-Entwicklung einer Website aus einer Figma-Designdatei: Layouts, Komponenten und Styles werden in responsiven, barrierefreien Code oder einen No-Code-Aufbau umgesetzt.
Designern raubt die Übergabe den Schlaf: Abstände, die driften, Schriften, die anders dargestellt werden, Hover-Zustände, die nie erscheinen. Ein guter Aufbau respektiert die Absicht des Designs, nicht nur seine Pixel, und stellt die richtigen Fragen, wenn die Datei schweigt: Wie sieht das auf einem kleinen Smartphone aus, was passiert bei einem langen Titel, wohin geht der Fokus?
Für wen ist es geeignet?
Freiberufliche Designer
Sie gestalten; Sie brauchen einen Entwickler, der Ihre Arbeit respektiert und alles nach der Figma-Datei übernimmt.
Designagenturen
Eine Website, die Ihre Arbeit zeigt, mit Fallstudien, die Sie selbst aktualisieren können.
Interne Designteams
Ihr Team gestaltet die Marketing-Website, hat aber keinen Frontend-Entwickler, um sie zu bauen.
Startups mit fertigem Design
Sie haben ein Design beauftragt und brauchen es nun live, schnell und wartbar.
Was enthalten ist und was Sie behalten
Was enthalten ist
- Prüfung der Designdatei mit schriftlichen Fragen
- Design Tokens für Farbe, Schrift, Abstand und Radius
- Wiederverwendbare Komponentenbibliothek
- Responsive Layouts für jeden Breakpoint
- Hover-, Fokus-, aktive und leere Zustände
- Barrierefreiheit nach WCAG 2.2 AA
- Animation und Interaktion wie gestaltet
- CMS-Anbindung für bearbeitbare Inhalte
- Bild- und Schriftoptimierung
- Cross-Browser- und Gerätetests
Was Sie erhalten
Wird am Ende übergeben. Gehört Ihnen.
- Die Live-Website oder ein Staging-Link
- Quellcode oder Webflow-Projekt, das Ihnen gehört
- Komponentendokumentation
- Hinweise zu Designentscheidungen während des Baus
- CMS-Zugang
Was eine Figma-Datei für einen reibungslosen Aufbau braucht
Fehlende Teile sind in Ordnung, wir fragen nach, aber wenn Sie diese bereithalten, sparen Sie Fragerunden.
- Mobile und Desktop-Versionen jedes Templates
- Textstile und Farbstile oder Variablen
- Auto Layout auf Frames, damit Abstände eindeutig sind
- Hover-, Fokus- und aktive Zustände für interaktive Elemente
- Echte oder realistische Inhalte, einschließlich langer Titel
- Exportierte oder exportierbare Icons und Bilder
Wie bleiben wir dem Design treu?
Wir beginnen damit, die Styles des Designs in Tokens zu übersetzen (benannte Werte für Farben, Schriftgrößen, Abstände und Radien), damit der Code dieselbe Sprache spricht wie die Figma-Datei. Ändert der Designer ein Token, folgt die ganze Website.
Wiederkehrende Elemente werden zu Komponenten mit definierten Varianten und Zuständen. Dort verstecken sich die meisten Übergabeprobleme: ein Button, der in Figma einen Hover-Stil hat, aber keinen deaktivierten, eine Karte, die mit einem kurzen Titel funktioniert, aber nicht mit einem langen. Wir listen diese Lücken auf, schlagen eine Lösung im Sinne des Designs vor und bestätigen sie mit Ihnen.
Vor dem Launch prüft der Designer den Aufbau im Browser und hinterlässt Kommentare direkt auf der Seite. Korrekturen erfolgen anhand dieser Kommentare, sodass die Abnahme auf der echten Website beruht statt auf Screenshots.
Welche Plattform soll Ihr Figma-Design werden?
| Plattform | Wählen Sie es, wenn |
|---|---|
| Next.js | Performance, individuelle Funktionen oder eine künftige Web-App zählen; ein Entwickler übernimmt strukturelle Änderungen |
| Webflow | Ihre Designer und Marketer wollen nach dem Launch weiter visuell bearbeiten |
| WordPress | Ihre Redakteure kennen WordPress bereits oder brauchen sein Plugin-Ökosystem |
Was mit jedem Teil Ihres Designs geschieht
Styles und Variablen
Werden zu Design Tokens im Code oder globalen Klassen in Webflow, damit das System konsistent bleibt.
Komponenten
Werden zu wiederverwendbaren Code-Komponenten oder Webflow-Komponenten mit denselben Varianten und Eigenschaften.
Seiten-Frames
Werden zu Templates, die mit einem CMS verbunden sind, damit neue Seiten keinen Entwickler brauchen.
Prototyp-Interaktionen
Werden zu echten Animationen, abgestimmt auf Performance und Reduced-Motion-Einstellungen.
So funktioniert Figma zu Website, Schritt für Schritt
Jeder Schritt hat ein klares Ergebnis, das Sie prüfen können. Der Zeitrahmen wird in Ihrem Angebot vereinbart.
- 1
Dateiprüfung
Wir gehen die Figma-Datei durch und senden eine kurze Liste mit Fragen zu Zuständen, Breakpoints und Verhalten.
- 2
Tokens und Komponenten
Stile werden zu Tokens; wiederholte Elemente werden zu Komponenten, bevor Seiten gebaut werden.
- 3
Seitenbau
Vorlagen aus Komponenten zusammengesetzt und mit Inhalten verbunden.
- 4
Design-Review
Sie oder Ihr Designer vergleichen den Bau mit Figma und hinterlassen Kommentare.
- 5
Feinschliff und QA
Prüfungen zu Barrierefreiheit, Leistung und Cross-Browser.
- 6
Launch oder Übergabe
Bereitstellung auf Ihrem Hosting oder Übergabe des Repositories oder Webflow-Projekts.
Tools und was Ihr Angebot beeinflusst
Die Preisgestaltung richtet sich nach Ihrem Projekt und wird in Ihrem Angebot vereinbart. Diese Faktoren bestimmen es.
| Faktor | Warum er wichtig ist |
|---|---|
| Zahl der einzigartigen Templates | Seiten, die Komponenten teilen, sind schneller gebaut als einmalige Layouts. |
| Vollständigkeit der Datei | Fehlende Breakpoints und Zustände müssen während des Aufbaus gestaltet werden. |
| Animation | Komplexe Scroll- und Interaktionseffekte brauchen zusätzliche Entwicklung und Tests. |
| CMS-Bedarf | Bearbeitbare Inhalte erfordern ein Content-Modell und die Einrichtung des Editors. |
| Plattform | Webflow-Aufbauten, WordPress-Themes und Next.js-Apps bedeuten unterschiedliche Arbeit. |
| Bereich | Tools |
|---|---|
| Design-Eingabe | Figma, Dev Mode, Variablen und Styles |
| Bauen | Next.js, React, TailwindCSS, Webflow, WordPress |
| CMS | Sanity, Webflow CMS, WordPress |
| Qualität | axe, Lighthouse, Playwright, BrowserStack |
Häufige Fehler, die Sie vermeiden sollten
Was bei uns am häufigsten schiefgeht und wie ein gutes Projekt es vermeidet.
Pixel für Pixel ohne Komponenten bauen
Fest codierte Seiten sehen am ersten Tag richtig aus und driften mit jeder Änderung auseinander. Komponenten halten sie einheitlich.
Nur-Desktop-Designs
Mobile der Fantasie des Entwicklers zu überlassen, erzeugt Layouts, die der Designer nie freigegeben hat.
Echte Inhalte ignorieren
Designs mit kurzen Platzhaltertiteln brechen, wenn echte, längere Texte eintreffen.
Barrierefreiheit als Nachgedanke
Kontrast, Fokusreihenfolge und Beschriftungen sind während des Baus günstiger richtig zu machen als danach.
Häufig gestellte Fragen
Wie nah wird der Aufbau am Design sein?
Sehr nah. Wir bilden Abstände, Typografie und Layout nach und markieren jede Stelle, an der das Design wie gezeichnet nicht funktionieren kann, etwa auf sehr kleinen Bildschirmen, bevor wir gemeinsam entscheiden.
Was, wenn meine Figma-Datei keine mobile Version hat?
Wir können die mobilen Layouts nach Ihrem Desktop-Design gestalten und vor dem Aufbau zur Freigabe senden.
Auf welcher Plattform sollte ich bauen?
Webflow, wenn Ihr Team visuell bearbeiten will, WordPress, wenn die Redakteure es kennen, Next.js für Performance und individuelle Funktionen. Wir empfehlen eine, je nachdem, wie die Website genutzt wird.
Arbeiten Sie White-Label für Agenturen?
Nein. Wir arbeiten direkt mit den Unternehmen, für die wir entwickeln, unter unserem eigenen Namen. Siehe Webentwicklung für Agenturen.
Können Sie unser Design System in Code bauen?
Ja. Wir können Ihre Figma-Komponenten und -Variablen in eine programmierte Komponentenbibliothek verwandeln, die Ihre Produkt- und Marketing-Websites gemeinsam nutzen.
Wird die Website barrierefrei sein?
Wir bauen nach WCAG 2.2 AA: semantisches HTML, Tastaturnavigation, Fokuszustände, Beschriftungen und ausreichender Kontrast, und wir markieren Designfarben, die den Kontrast nicht bestehen.
Können Sie auch aus Adobe-XD- oder Sketch-Dateien arbeiten?
Ja, auch wenn Figma unser Haupttool ist. Wir können aus XD- oder Sketch-Exporten arbeiten oder die Dateien zuerst in Figma importieren.
Gestalten Sie die Teile, die der Figma-Datei fehlen?
Ja. Wir gestalten fehlende Zustände, Breakpoints und Randfälle im Sinne Ihres Designs und senden sie vor dem Aufbau zur Freigabe, damit nichts ohne Ihre Zustimmung improvisiert wird.
Können wir das Design nach dem Launch weiter aktualisieren?
Ja. Weil der Aufbau Tokens und Komponenten nutzt, lassen sich Designänderungen in Figma konsistent übernehmen. Wir können auch einen Ablauf einrichten, bei dem die Updates Ihres Designers monatlich umgesetzt werden.
Wie gehen Sie mit Schriften und Lizenzen um?
Wir nutzen die Schriften aus Ihrem Design und prüfen deren Weblizenzen. Lizenzierte Schriften werden auf Ihren Namen gekauft oder von Ihnen geliefert; Google Fonts hosten wir selbst, für Geschwindigkeit und Datenschutz.
Können Sie nur einen Teil einer Website bauen, etwa neue Landingpages?
Ja. Wir bauen regelmäßig einzelne Templates oder Landingpages aus Figma in eine bestehende Next.js-, Webflow- oder WordPress-Website ein und passen sie an das Vorhandene an.
Verwandte Leistungen
Webflow-Entwicklung
Designerfreundliche Webflow-Websites mit strukturiertem CMS.
Next.js-Entwicklung
Serverseitig gerenderte React-Websites und -Apps.
UI/UX-Design
Recherche, Wireframes, Prototypen und Oberflächen.
Figma-Design & Designsysteme
Komponenten, Variablen und Bibliotheken, die Ihr Team skalieren kann.
Website-Entwicklung
Individuelle Unternehmenswebsites mit Next.js, React oder WordPress.
Figma zu Website nach Branche
Senden Sie uns Ihre Figma-Datei.
Sagen Sie uns, was Sie brauchen. Sie erhalten eine ehrliche Einschätzung, einen klaren Plan und ein schriftliches Angebot. Die erste Beratung ist immer kostenlos.
- Wie es weitergeht
- 1Sie sagen uns, was Sie brauchen
- 2Wir melden uns möglichst innerhalb von 24 Stunden mit Rückfragen
- 3Sie erhalten ein schriftliches Angebot für Ihr Projekt