Websites

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?

PlattformWählen Sie es, wenn
Next.jsPerformance, individuelle Funktionen oder eine künftige Web-App zählen; ein Entwickler übernimmt strukturelle Änderungen
WebflowIhre Designer und Marketer wollen nach dem Launch weiter visuell bearbeiten
WordPressIhre 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. 1

    Dateiprüfung

    Wir gehen die Figma-Datei durch und senden eine kurze Liste mit Fragen zu Zuständen, Breakpoints und Verhalten.

  2. 2

    Tokens und Komponenten

    Stile werden zu Tokens; wiederholte Elemente werden zu Komponenten, bevor Seiten gebaut werden.

  3. 3

    Seitenbau

    Vorlagen aus Komponenten zusammengesetzt und mit Inhalten verbunden.

  4. 4

    Design-Review

    Sie oder Ihr Designer vergleichen den Bau mit Figma und hinterlassen Kommentare.

  5. 5

    Feinschliff und QA

    Prüfungen zu Barrierefreiheit, Leistung und Cross-Browser.

  6. 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.

Figma zur Website: Preisfaktoren
FaktorWarum er wichtig ist
Zahl der einzigartigen TemplatesSeiten, die Komponenten teilen, sind schneller gebaut als einmalige Layouts.
Vollständigkeit der DateiFehlende Breakpoints und Zustände müssen während des Aufbaus gestaltet werden.
AnimationKomplexe Scroll- und Interaktionseffekte brauchen zusätzliche Entwicklung und Tests.
CMS-BedarfBearbeitbare Inhalte erfordern ein Content-Modell und die Einrichtung des Editors.
PlattformWebflow-Aufbauten, WordPress-Themes und Next.js-Apps bedeuten unterschiedliche Arbeit.

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.

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.

  1. Wie es weitergeht
  2. 1Sie sagen uns, was Sie brauchen
  3. 2Wir melden uns möglichst innerhalb von 24 Stunden mit Rückfragen
  4. 3Sie erhalten ein schriftliches Angebot für Ihr Projekt