De Figma au site ou à l'application
Vos maquettes Figma intégrées en code propre et responsive : HTML et CSS, React, Next.js ou un thème CMS.
Points clés
- Pages ou composants développés
- Code dans un dépôt qui vous appartient
- Résultats des tests responsive et navigateurs
- Readme avec notes d'installation et de déploiement
- Aucun paiement iciVous recevez d'abord un devis écrit. Aucun paiement, aucun engagement.
- Vendu et livré par GRADAXUn contrat et une équipe, quel que soit celui qui fait le travail.
- Vos données restent dans l'UERien n'est déplacé en dehors de l'Union pour être traité.
À propos de ce service
Vous avez des maquettes finalisées et vous voulez qu'elles soient intégrées à l'identique. Nous transformons les fichiers Figma en code front-end responsive qui correspond à la maquette à chaque point de rupture, avec la stack que vous choisissez : HTML et CSS natifs, React, Next.js, ou un thème WordPress ou Shopify. Les composants sont conçus pour être réutilisés, et les manques de la maquette sont signalés avant que nous ne devinions.
Là où les maquettes sont muettes
Les fichiers Figma montrent à quoi ressemble une page à quelques largeurs fixes, généralement bureau et mobile. Ils montrent rarement ce qui se passe entre les deux, ce que fait un bouton au survol, à quoi ressemble une carte avec un titre très long, ce qui apparaît quand un formulaire contient une erreur ou pendant le chargement du contenu. C'est dans ces écarts que le développement s'éloigne de la maquette.
Nous examinons le fichier avant de développer et listons chaque manque que nous trouvons. Certains sont résolus par des choix par défaut pertinents qui suivent la logique de la maquette. Pour d'autres, nous posons la question, car deviner de travers et reconstruire coûte plus cher qu'une courte question. Le résultat est un développement fidèle à la maquette là où elle est explicite et respectueux de son intention là où elle ne l'est pas.
Les composants d'abord, les pages ensuite
Les bons fichiers de design sont construits à partir de composants : boutons, cartes, navigation, champs de formulaire. Le bon code devrait l'être aussi. Construire page par page, en copiant et ajustant les éléments au fur et à mesure, produit un site où chaque bouton est légèrement différent et où un changement de design impose de modifier des dizaines d'endroits.
Nous construisons d'abord les composants partagés, en correspondance avec les composants Figma, puis assemblons les pages à partir d'eux. Une modification du style de bouton met à jour tous les boutons. De nouvelles pages peuvent être créées à partir de pièces existantes. Le code est sémantique et accessible, les images sont optimisées et les polices se chargent efficacement, car une page au pixel près qui met six secondes à charger sur un téléphone n'est pas une bonne réalisation.
Caractéristiques
- Catégorie
- Automatisation et données
- Prix
- 290 € à 1 050 €
- Tailles
- Petite (Page d'atterrissage), Moyenne (Développement multi-pages), Grande (Construire avec CMS)
- Délai
- 3 jours à 5 semaines
- Facturé
- Paiement unique
- Ce que vous obtenez
- 4 éléments, tout compris
- Ce dont nous avons besoin de votre part
- Fichier Figma avec accès en lecture et en Dev Mode, Votre stack préférée et l'hébergement prévu, Des maquettes pour mobile, ou l'autorisation de les adapter intelligemment
- Le plus souvent acheté par
- SaaS, Agences et studios, Startups, E-commerce
- Vendu et livré par
- GRADAX, un contrat et une seule équipe
- Lieu de traitement de vos données
- Union européenne
Ce que vous obtenez
Tout ce qui suit est compris dans le prix. Rien ici n'est une option payante.
- Pages ou composants développés
- Code dans un dépôt qui vous appartient
- Résultats des tests responsive et navigateurs
- Readme avec notes d'installation et de déploiement
Ce qui change
- Des pages conformes à la maquette Figma en largeurs ordinateur, tablette et mobile
- Composants réutilisables reprenant les composants du fichier de design
- Balisage accessible : HTML sémantique, navigation au clavier, texte alternatif
- Des pages au chargement rapide, avec des images optimisées et des polices chargées efficacement
Comparez les formules
Le prix standard pour chaque taille. Les options sont affichées à côté, pas cachées derrière un appel.
| Inclus | Page d'atterrissage290 €3 à 5 jours ouvrés | Développement multi-pages500 €2 à 3 semaines | Construire avec CMS1 050 €3 à 5 semaines |
|---|---|---|---|
| Une page, responsive | Inclus | Inclus | Inclus |
| HTML et CSS ou un framework | Inclus | Inclus | Inclus |
| Formulaires connectés | Inclus | Inclus | Inclus |
| Tests navigateur | Inclus | Inclus | Inclus |
| Tout le contenu de Page de destination, jusqu'à six modèles | Non inclus | Inclus | Inclus |
| Bibliothèque de composants | Non inclus | Inclus | Inclus |
| Animations et interactions issues de la maquette | Non inclus | Inclus | Inclus |
| Contrôle d'accessibilité | Non inclus | Inclus | Inclus |
| Tout ce qui est inclus dans Site multi-pages, jusqu'à douze gabarits | Non inclus | Non inclus | Inclus |
| CMS connecté : WordPress, Shopify, Sanity ou similaire | Non inclus | Non inclus | Inclus |
| Saisie du contenu pour les pages de lancement | Non inclus | Non inclus | Inclus |
| Déploiement et 14 jours de corrections | Non inclus | Non inclus | Inclus |
| Ajouter au devis |
Ajoutez ce qu'il vous faut
Choose the size
Ajoutez ce qu'il vous faut
Votre total€500
Le prix standard, plus ce que vous ajoutez. Confirmé par écrit avant tout démarrage ; rien n'est facturé tant que vous ne l'avez pas accepté.
Comment ça marche
Audit
Design vérifié pour les états manquants et les points de rupture avant la construction.
Composants
Éléments partagés développés en premier : boutons, cartes, navigation, formulaires.
Pages
Pages assemblées à partir de composants et conformes à la maquette.
Test
Vérifié sur différents navigateurs et appareils, puis livré.
Questions
Pouvez-vous construire à partir d'un design sans version mobile ?
Oui. Nous adaptons intelligemment et vous montrons les écrans mobiles clés avant de tous les construire.
Le rendu sera-t-il au pixel près ?
Le rendu sera fidèle au design aux largeurs pour lesquelles il a été conçu. Entre ces largeurs, les mises en page s'adaptent comme le design le prévoit ; nous signalons tout point ambigu.
Utilisez-vous des outils automatiques de design vers code ?
Nous écrivons le code à la main. Les exports automatiques produisent souvent du code lourd et difficile à maintenir, coûteux à modifier par la suite.
Recherches associées
Réalisations similaires
Paiement uniqueCréation de site WebflowUn site Webflow sur mesure avec un CMS que votre équipe peut modifier et des interactions qui restent rapides.from 420 €
ScopedSprint de design UIÉcrans conçus et prototypés en deux semaines, prêts à développer.from 1 800 €selon le périmètre
Paiement uniqueApplication web full-stackUne application web sur mesure avec sa propre base de données, ses connexions et son administration, développée et déployée.from 420 €
Paiement uniqueDéveloppement d'application AndroidApplications Android natives en Kotlin, développées selon les recommandations de Google et publiées sur Google Play.from 420 €
Paiement uniqueDéveloppement d'applications iOSUne application iPhone native en Swift, développée selon les directives d'Apple et menée jusqu'à la validation de l'App Store.from 830 €
Paiement uniqueCréation de modèle d'e-mail HTMLE-mails HTML codés à la main qui s'affichent correctement dans Outlook, Gmail, Apple Mail et en mode sombre.from 290 €
Aucune formule ne convient ?
Certains travaux ont une forme propre. Nous en étudions d'abord le périmètre et le chiffrons par écrit ; l'appel de cadrage est gratuit.