Figma naar website of app
Uw Figma-ontwerpen gebouwd als schone, responsieve code: HTML en CSS, React, Next.js of een CMS-thema.
Belangrijkste kenmerken
- Gebouwde pagina's of componenten
- Code in een repository die u bezit
- Resultaten van responsive- en browsertests
- Readme met installatie- en deploymentnotities
- Hier wordt niets betaaldU ontvangt eerst een schriftelijke offerte. Geen betaling, geen verplichting.
- Verkocht en geleverd door GRADAXEén contract en één team, wie het werk ook uitvoert.
- Uw data blijven in de EUNiets wordt buiten de unie verwerkt.
Over deze dienst
U hebt ontwerpen af en wilt ze exact laten bouwen. Wij zetten Figma-bestanden om in responsieve front-endcode die op elk breakpoint overeenkomt met het ontwerp, met de stack die u kiest: platte HTML en CSS, React, Next.js, of een WordPress- of Shopify-thema. Componenten worden gebouwd om te hergebruiken, en hiaten in het ontwerp worden gemeld voordat we gokken.
Waar ontwerpen zwijgen
Figma-bestanden laten zien hoe een pagina eruitziet op een paar vaste breedtes, meestal desktop en mobiel. Ze laten zelden zien wat ertussen gebeurt, wat een knop doet bij hover, hoe een kaart eruitziet met een heel lange titel, wat verschijnt bij een fout in een formulier of terwijl content laadt. Die gaten zijn waar builds van het ontwerp afdrijven.
We beoordelen het bestand voordat we bouwen en noteren elke leemte die we vinden. Sommige lossen we op met verstandige standaardwaarden die de logica van het ontwerp volgen. Over andere stellen we vragen, want verkeerd gokken en herbouwen kost meer dan een korte vraag. Het resultaat is een build die het ontwerp volgt waar het expliciet is en de intentie respecteert waar het dat niet is.
Eerst componenten, dan pagina's
Goede ontwerpbestanden zijn opgebouwd uit componenten: buttons, cards, navigatie, formuliervelden. Goede code zou dat ook moeten zijn. Pagina voor pagina bouwen en elementen onderweg kopiëren en aanpassen levert een site op waar elke button net anders is en een ontwerpwijziging tientallen plekken raakt.
We bouwen eerst de gedeelde componenten, afgestemd op de componenten in Figma, en stellen daarna pagina's samen uit die componenten. Een wijziging in de knopstijl werkt elke knop bij. Nieuwe pagina's kunnen uit bestaande onderdelen worden gebouwd. De markup is semantisch en toegankelijk, afbeeldingen zijn geoptimaliseerd en fonts laden efficiënt, want een pixelperfecte pagina die zes seconden laadt op een telefoon is geen goede build.
Specificaties
- Categorie
- Automatisering en data
- Prijs
- € 290 tot € 1.050
- Maten
- Klein (Landingspagina), Middel (Meerpagina-opbouw), Groot (Bouwen met CMS)
- Doorlooptijd
- 3 dagen tot 5 weken
- Gefactureerd
- Eenmalig
- Wat u krijgt
- 4 items, allemaal in de prijs
- Wat wij van u nodig hebben
- Figma-bestand met weergave en toegang tot Dev Mode, Uw voorkeursstack en waar die gehost wordt, Ontwerpen voor mobiel, of toestemming om verstandig aan te passen
- Meest gekocht door
- SaaS, Bureaus en studio's, Startups, E-commerce
- Verkocht en geleverd door
- GRADAX, één contract en één team
- Waar uw gegevens worden verwerkt
- Europese Unie
Wat u krijgt
Alles hieronder zit in de prijs. Niets hiervan is een upgrade.
- Gebouwde pagina's of componenten
- Code in een repository die u bezit
- Resultaten van responsive- en browsertests
- Readme met installatie- en deploymentnotities
Wat verandert
- Pagina's die overeenkomen met het Figma-ontwerp op desktop-, tablet- en mobiele breedte
- Herbruikbare componenten die de componenten in het ontwerpbestand volgen
- Toegankelijke markup: semantische HTML, toetsenbordnavigatie, alt-tekst
- Snel ladende pagina's, met geoptimaliseerde afbeeldingen en efficiënt geladen lettertypen
Vergelijk de pakketten
De standaardprijs per formaat. Extra's staan ernaast geprijsd, niet verstopt achter een belafspraak.
| Inbegrepen | Landingspagina€ 2903 tot 5 werkdagen | Meerpagina-opbouw€ 5002 tot 3 weken | Bouwen met CMS€ 1.0503 tot 5 weken |
|---|---|---|---|
| Eén pagina, responsief | Inbegrepen | Inbegrepen | Inbegrepen |
| HTML en CSS of één framework | Inbegrepen | Inbegrepen | Inbegrepen |
| Formulieren gekoppeld | Inbegrepen | Inbegrepen | Inbegrepen |
| Browsertests | Inbegrepen | Inbegrepen | Inbegrepen |
| Alles uit Landingspagina, tot zes templates | Niet inbegrepen | Inbegrepen | Inbegrepen |
| Componentbibliotheek | Niet inbegrepen | Inbegrepen | Inbegrepen |
| Animaties en interacties op basis van het design | Niet inbegrepen | Inbegrepen | Inbegrepen |
| Toegankelijkheidscheck | Niet inbegrepen | Inbegrepen | Inbegrepen |
| Alles uit Meerpagina-opbouw, tot twaalf templates | Niet inbegrepen | Niet inbegrepen | Inbegrepen |
| CMS gekoppeld: WordPress, Shopify, Sanity of vergelijkbaar | Niet inbegrepen | Niet inbegrepen | Inbegrepen |
| Content invoeren voor lanceringspagina's | Niet inbegrepen | Niet inbegrepen | Inbegrepen |
| Deployment en 14 dagen fixes | Niet inbegrepen | Niet inbegrepen | Inbegrepen |
| Toevoegen aan offerte |
Voeg toe wat u nodig hebt
Choose the size
Voeg toe wat u nodig hebt
Uw totaal€500
De standaardprijs, plus wat u toevoegt. Schriftelijk bevestigd voordat er iets begint; er wordt niets in rekening gebracht tot u akkoord gaat.
Hoe het werkt
Beoordelen
Ontwerp gecontroleerd op ontbrekende staten en breekpunten voordat er wordt gebouwd.
Componenten
Gedeelde onderdelen eerst gebouwd: knoppen, kaarten, navigatie, formulieren.
Pagina's
Pagina's opgebouwd uit componenten en afgestemd op het ontwerp.
Test
Gecontroleerd in browsers en op apparaten, daarna overgedragen.
Vragen
Kun je bouwen vanuit een ontwerp zonder mobiele versie?
Ja. We passen verstandig aan en tonen u de belangrijkste mobiele schermen voordat we ze allemaal bouwen.
Wordt het pixel-perfect?
Het komt dicht bij het ontwerp op de breedtes waarvoor het is ontworpen. Tussen die breedtes lopen layouts zoals het ontwerp bedoelt; we signaleren alles wat onduidelijk is.
Gebruikt u automatische design-to-code-tools?
Wij schrijven de code met de hand. Automatische exports leveren vaak opgeblazen, moeilijk te onderhouden code op die later kostbaar is om te wijzigen.
Gerelateerde zoekopdrachten
Gerelateerd werk
EenmaligWebflow-website bouwenEen op maat ontworpen Webflow-site met een CMS dat uw team kan bewerken en snelle interacties.from € 420
ScopedUI-designsprintSchermen ontworpen en geprototyped in twee weken, klaar om te bouwen.from € 1.800op scope
EenmaligFull-stack webappEen custom webapplicatie met eigen database, logins en beheer, gebouwd en uitgerold.from € 420
EenmaligAndroid-appontwikkelingNative Android-apps in Kotlin, gebouwd volgens de richtlijnen van Google en gepubliceerd in Google Play.from € 420
EenmaligiOS-appontwikkelingEen native iPhone-app in Swift, gebouwd volgens Apple's richtlijnen en door de App Store-review begeleid.from € 830
EenmaligHTML-e-mailsjabloon bouwenHandgecodeerde HTML-mails die correct renderen in Outlook, Gmail, Apple Mail en dark mode.from € 290
Past geen pakket?
Sommig werk heeft een eigen vorm. We bekijken eerst de scope en offreren die schriftelijk; het scopinggesprek is gratis.