FIGMA : DU DESIGN AU DÉVELOPPEMENT WEB
Passez rapidement de l'idée au site Web
Figma aide les équipes de développement web à planifier, concevoir et créer plus rapidement, ensemble.
![Représentation graphique du bouton d'activation de Dev Mode, d'un modèle de boîte CSS et de « nouilles » de prototypage. Un smiley souriant est également représenté.](https://cdn.sanity.io/images/599r6htc/regionalized/ed9594ace473af842a0a7515419b8c01557ff757-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)
Ces entreprises font confiance à Figma
![logo vercel](https://cdn.sanity.io/images/599r6htc/regionalized/926e3cc5c12733ada700593e419dc2c5b522a95f-292x66.png?rect=0,1,292,64&w=137&h=30&q=75&fit=max&auto=format)
![logo linear](https://cdn.sanity.io/images/599r6htc/regionalized/1ee7db4aecfc433c1ed21cfe6e2a5b90a4206d7a-273x69.png?rect=0,1,273,68&w=128&h=32&q=75&fit=max&auto=format)
Concevoir des expériences web de qualité est un défi. Figma vous facilite la tâche.
Figma rassemble web design et développement web sur la même plateforme.
Livrez les sites Web que vous avez imaginé
Grâce au prototypage, les designers peuvent communiquer à leurs partenaires de développement leur vision complète du design, y compris les animations et les interactions, ce qui réduit les allers-retours et les erreurs de communication.
![Panneaux présentant les icônes, les styles de couleur et les styles de caractères et de mise en page pour un écran mobile d'un site de commerce électronique.](https://cdn.sanity.io/images/599r6htc/regionalized/ab3268938592549a5a2de059c1610bfbb080091e-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Aligner le design et le code
Utilisez un design system partagé avec des composants et des styles alignés sur le code pour réduire les incohérences et accélérer le développement.
![Vue en mode clair et en mode sombre d'illustrations de produit d'applications pour l'exportation](https://cdn.sanity.io/images/599r6htc/regionalized/8aba504f624298af854a8e5a4ce2b4c1d4a25746-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Facilitez le transfert
Avec Dev Mode, les développeurs disposent d'un espace dédié dans Figma où ils peuvent voir ce qui est prêt à être conçu, comparer les changements effectués d'une version à l'autre et voir les annotations des designers.
Découvrez les fonctionnalités dédiées au développement web
![Illustration d'un panneau de propriétés booléennes pour un composant de bouton « Add to Basket ».](https://cdn.sanity.io/images/599r6htc/regionalized/b9cff110ea99245b350325ed17628a2594d54422-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Reliez les composants au code
Utilisez les propriétés des composants pour les rendre plus personnalisables et les faire correspondre aux propriétés React.
![Illustration du widget Asana dans FigJam sur un fond violet.](https://cdn.sanity.io/images/599r6htc/regionalized/21e1a20b163e2e8b16397715b0df778fec42ce62-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Intégrer à votre écosystème de données
Connectez vos fichiers Figma à d'autres outils, tels qu'Asana et Microsoft Teams, grâce à des intégrations pratiques pour rester organisé et efficace.
![Diagramme reliant une icône FigJam violette, une icône Figma bleue et une icône du bouton d'activation de Dev Mode verte.](https://cdn.sanity.io/images/599r6htc/regionalized/41f228a7719550ec384841e0ad7735244132856a-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Créez des flux de travail personnalisés
Automatisez les tâches, intégrez des données dans vos designs et stimulez la collaboration grâce à de nombreux plugins et widgets créés par et pour la communauté.
Quelle que soit la discipline, tous les collaborateurs bénéficient d'une plateforme centralisée pour voir le projet, le comprendre et y contribuer.
Levon Sharrow, director of experience design chez Patagonia
En savoir plus sur les meilleures pratiques en matière de développement web
![Le logo Figma sur un arrière-plan multicolore, avec un curseur de tchat jaune indiquant « Sweeeeet! » (Joli !)](https://cdn.sanity.io/images/599r6htc/regionalized/6f9cdd24ac0f698c60d972961280426b972d9d7c-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Comment Figma a conçu le design system de son site Web
Un aperçu de la façon dont l'équipe marketing de Figma a élaboré, et continue d'élaborer le design system du site figma.com.
![Recherchez les résultats correspondant à « Web » dans la communauté Figma.](https://cdn.sanity.io/images/599r6htc/regionalized/292a176971797f12180ba6bedddfea3f92adc28e-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Ressources de développement web
Explorez des sources d'inspiration, des outils et des templates pour le développement web, créés et intégrés par la communauté Figma.
![Le curseur d'un développeur sélectionnant un cercle vert et affichant des codes hexadécimaux des couleurs de la marque dans une bibliothèque de design system.](https://cdn.sanity.io/images/599r6htc/regionalized/339a85a7edb268c4ae323eb8038b25f351e8d676-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Guide pour améliorer les transferts aux développeurs
Lire les meilleures pratiques conseillées par des experts.