Figma zu Website oder App
Ihre Figma-Designs als sauberer, responsiver Code umgesetzt: HTML und CSS, React, Next.js oder ein CMS-Theme.
Wichtige Merkmale
- Erstellte Seiten oder Komponenten
- Code in einem Repository, das Ihnen gehört
- Ergebnisse der Responsive- und Browsertests
- Readme mit Setup- und Deployment-Hinweisen
- Hier wird nichts bezahltSie erhalten zuerst ein schriftliches Angebot. Keine Zahlung, keine Verpflichtung.
- Verkauft und geliefert von GRADAXEin Vertrag und ein Team, egal wer die Arbeit macht.
- Ihre Daten bleiben in der EUNichts wird außerhalb der Union zur Verarbeitung verlagert.
Über diesen Service
Sie haben fertige Designs und möchten sie exakt umgesetzt haben. Wir verwandeln Figma-Dateien in responsiven Frontend-Code, der an jedem Breakpoint dem Design entspricht, mit dem von Ihnen gewählten Stack: reines HTML und CSS, React, Next.js oder ein WordPress- oder Shopify-Theme. Komponenten werden zur Wiederverwendung gebaut, und Designlücken werden gemeldet, bevor wir raten.
Wo Designs schweigen
Figma-Dateien zeigen, wie eine Seite bei einigen festen Breiten aussieht, meist Desktop und Mobil. Sie zeigen selten, was dazwischen passiert, was ein Button beim Hover macht, wie eine Karte mit sehr langem Titel aussieht, was erscheint, wenn ein Formular einen Fehler hat oder Inhalte laden. Genau in diesen Lücken weicht die Umsetzung vom Design ab.
Wir prüfen die Datei vor dem Aufbau und listen jede Lücke auf, die wir finden. Manche lösen wir mit sinnvollen Standardwerten, die der Logik des Designs folgen. Bei anderen fragen wir nach, denn falsch zu raten und neu zu bauen kostet mehr als eine kurze Frage. Das Ergebnis ist ein Aufbau, der dem Design folgt, wo es eindeutig ist, und seine Absicht respektiert, wo es das nicht ist.
Erst Komponenten, dann Seiten
Gute Design-Dateien werden aus Komponenten gebaut: Buttons, Cards, Navigation, Formularfelder. Guter Code sollte es auch sein. Seite für Seite zu bauen und Elemente beim Gehen zu kopieren und anzupassen, erzeugt eine Website, auf der jeder Button etwas anders aussieht und eine Design-Änderung Dutzende Stellen erfordert.
Wir bauen zuerst die gemeinsamen Komponenten, passend zu den Komponenten in Figma, und setzen dann Seiten daraus zusammen. Eine Änderung am Button-Stil aktualisiert jeden Button. Neue Seiten lassen sich aus vorhandenen Teilen bauen. Das Markup ist semantisch und barrierefrei, Bilder sind optimiert und Schriften laden effizient, denn eine pixelgenaue Seite, die auf dem Handy sechs Sekunden zum Laden braucht, ist kein guter Build.
Spezifikationen
- Kategorie
- Automatisierung & Daten
- Preis
- 290 € bis 1.050 €
- Sizes
- Klein (Landingpage), Mittel (Mehrseitige Umsetzung), Groß (Aufbau mit CMS)
- Bearbeitungszeit
- 3 Tage bis 5 Wochen
- Billed
- Einmalig
- Was Sie erhalten
- 4 Elemente, alle im Preis enthalten
- Was wir von Ihnen brauchen
- Figma-Datei mit Ansichts- und Dev-Mode-Zugang, Ihr bevorzugter Stack und wo er gehostet wird, Designs für Mobilgeräte oder die Erlaubnis, sie sinnvoll anzupassen
- Am häufigsten gekauft von
- SaaS, Agenturen und Studios, Startups, E-Commerce
- Verkauft und geliefert von
- GRADAX, ein Vertrag und ein Team
- Wo Ihre Daten verarbeitet werden
- Europäische Union
Was Sie erhalten
Alles unten ist im Preis enthalten. Nichts hier ist ein Upgrade.
- Erstellte Seiten oder Komponenten
- Code in einem Repository, das Ihnen gehört
- Ergebnisse der Responsive- und Browsertests
- Readme mit Setup- und Deployment-Hinweisen
Was sich ändert
- Seiten, die dem Figma-Design bei Desktop-, Tablet- und Mobilbreite entsprechen
- Wiederverwendbare Komponenten, die die Komponenten in der Design-Datei spiegeln
- Barrierefreies Markup: semantisches HTML, Tastaturnavigation, Alt-Text
- Schnell ladende Seiten, mit optimierten Bildern und effizient geladenen Schriften
Größen vergleichen
Der Standardpreis für jede Größe. Extras stehen daneben, nicht hinter einem Anruf versteckt.
| Enthalten | Landingpage290 €3 bis 5 Werktage | Mehrseitige Umsetzung500 €2 bis 3 Wochen | Aufbau mit CMS1.050 €3 bis 5 Wochen |
|---|---|---|---|
| Eine Seite, responsiv | Enthalten | Enthalten | Enthalten |
| HTML und CSS oder ein Framework | Enthalten | Enthalten | Enthalten |
| Formulare angebunden | Enthalten | Enthalten | Enthalten |
| Browser-Tests | Enthalten | Enthalten | Enthalten |
| Alles aus Landingpage, bis zu sechs Templates | Nicht enthalten | Enthalten | Enthalten |
| Komponentenbibliothek | Nicht enthalten | Enthalten | Enthalten |
| Animationen und Interaktionen aus dem Design | Nicht enthalten | Enthalten | Enthalten |
| Barrierefreiheits-Check | Nicht enthalten | Enthalten | Enthalten |
| Alles aus Mehrseitiger Aufbau, bis zu zwölf Templates | Nicht enthalten | Nicht enthalten | Enthalten |
| CMS angebunden: WordPress, Shopify, Sanity oder ähnlich | Nicht enthalten | Nicht enthalten | Enthalten |
| Inhaltseingabe für Launch-Seiten | Nicht enthalten | Nicht enthalten | Enthalten |
| Deployment und 14 Tage Fehlerbehebungen | Nicht enthalten | Nicht enthalten | Enthalten |
| Zum Angebot hinzufügen |
Hinzufügen, was Sie brauchen
Choose the size
Hinzufügen, was Sie brauchen
Ihr Gesamtpreis€500
Der Standardpreis plus alles, was Sie hinzufügen. Schriftlich bestätigt, bevor etwas beginnt; nichts wird berechnet, bis Sie es annehmen.
So läuft es
Prüfung
Design auf fehlende Zustände und Breakpoints geprüft, bevor gebaut wird.
Components
Gemeinsam genutzte Teile zuerst gebaut: Buttons, Karten, Navigation, Formulare.
Pages
Seiten aus Komponenten zusammengesetzt und am Design ausgerichtet.
Test
Über Browser und Geräte hinweg geprüft, dann übergeben.
Fragen
Können Sie nach einem Design ohne Mobilversion bauen?
Ja. Wir passen sinnvoll an und zeigen Ihnen die wichtigsten mobilen Screens, bevor wir alle bauen.
Wird es pixelgenau?
Es entspricht dem Design genau in den Breiten, für die es entworfen wurde. Zwischen diesen Breiten fließen die Layouts wie im Design vorgesehen; auf Unklarheiten weisen wir hin.
Nutzen Sie automatische Design-to-Code-Tools?
Wir schreiben den Code von Hand. Automatische Exporte neigen zu aufgeblähtem, schwer wartbarem Code, der später teuer zu ändern ist.
Ähnliche Suchanfragen
Verwandte Leistungen
EinmaligWebflow-Website erstellenEine individuell gestaltete Webflow-Website mit einem CMS, das Ihr Team bearbeiten kann, und Interaktionen, die schnell bleiben.from 420 €
ScopedUI-Design-SprintScreens in zwei Wochen gestaltet und prototypisiert, bereit zum Bauen.from 1.800 €je nach Umfang
EinmaligFull-Stack-Web-AppEine individuelle Webanwendung mit eigener Datenbank, Logins und Adminbereich, gebaut und bereitgestellt.from 420 €
EinmaligAndroid-App-EntwicklungNative Android-Apps in Kotlin, gebaut nach Googles Richtlinien und veröffentlicht bei Google Play.from 420 €
EinmaligiOS-App-EntwicklungEine native iPhone-App in Swift, nach Apples Richtlinien entwickelt und durch die App-Store-Prüfung gebracht.from 830 €
EinmaligHTML-E-Mail-Vorlage erstellenHandcodierte HTML-E-Mails, die in Outlook, Gmail, Apple Mail und im Dark Mode korrekt dargestellt werden.from 290 €
Passt keine Größe?
Manche Arbeiten haben eine eigene Form. Wir prüfen den Umfang zuerst und erstellen das Angebot schriftlich; das Abstimmungsgespräch ist kostenlos.