Intégration de maquette

Une intégration coûte en général 50 à 800 €, et prend 2 à 10 jours. Le prix suit le nombre de modèles de pages plus que le nombre de pages : vingt articles sur le même gabarit demandent moins de travail que cinq pages toutes différentes. Les animations, une version mobile à imaginer et le raccordement à un CMS font aussi monter le prix.

Un intégrateur web convient pour transformer une maquette Figma en pages fidèles, en HTML et CSS ou dans un CMS. Un développeur s’impose si ces pages doivent afficher des données, dialoguer avec une API ou s’insérer dans une application React. Sur WordPress, Webflow ou Shopify, cherchez quelqu’un qui connaît cet outil-là.

Pour juger un prestataire, ouvrez côte à côte une maquette et le site qu’il en a tiré, si possible sur téléphone, et comparez les espacements et les menus.

• Les formats d’écran : au moins une version mobile et une version ordinateur des pages clés.
• Les états : survol, menu ouvert, erreur de formulaire, liste vide.
• Des styles cohérents : couleurs, tailles de texte et composants réutilisés.
• Des contenus proches du réel : un titre de trois lignes ne se comporte pas comme un mot factice.
• Des polices utilisables sur le web : celles de Google Fonts sont libres, celles d’Adobe Fonts dépendent d’un abonnement actif.

Un accès en lecture suffit le plus souvent à l’intégrateur pour relever les mesures et exporter les images. Le Dev Mode complet demande une place payante. Un fichier Adobe XD, Sketch ou Photoshop reste possible : vérifiez-le avant de commander. Si la maquette manque encore, commencez par une création de maquette UI/UX.

• HTML et CSS : léger et adapté à une page peu modifiée, mais chaque changement de texte passe par quelqu’un qui sait coder.
• React ou un framework équivalent : logique si la maquette rejoint une application existante.
• Un CMS, comme WordPress ou Webflow : vous modifiez ensuite vos contenus vous-même, mais le design s’adapte parfois aux contraintes de l’outil.

Décidez selon la personne qui modifiera le site et ce qu’il deviendra, car presque tous ces formats peuvent reproduire un beau design.

Très proche sur les formats dessinés, mais pas identique partout. Une maquette montre une largeur fixe et un contenu donné, alors qu’un site s’adapte à tous les écrans et à des textes de longueurs variables. L’expression « pixel perfect » n’a de sens que si vous précisez sur quelles largeurs et quels navigateurs la comparaison se fera.

Certains écarts sont même souhaitables : un texte trop petit, un contraste trop faible ou un bouton difficile à toucher gagnent à être corrigés. Convenez que le prestataire les signale plutôt que de les reproduire.

En partie. Des extensions Figma exportent du HTML ou du React, et Figma Make génère du code React à partir d’une demande. C’est rapide pour un prototype ou une base de travail.

Pour un site durable, faites relire le résultat : structure des titres, accessibilité, adaptation aux écrans et code superflu. Vous pouvez confier ce nettoyage à un intégrateur. Demandez-lui avant s’il préfère repartir de zéro, ce qui revient parfois moins cher.

Elle couvre le plus souvent les pages convenues, leur adaptation aux écrans, les animations simples et l’optimisation des images. Sauf mention contraire, ne comptez pas sur l’envoi réel des formulaires, la recherche, le paiement, un espace membre, la saisie de tous vos contenus ou la mise en ligne.

Listez ces besoins dès le départ. Ce qui demande une vraie logique relève plutôt d’un développement personnalisé.