Créez votre design system avec l'IA dans Figma Make
Concevez, prototypez et développez votre système plus rapidement – avec la puissance de l'IA. Utilisez l'IA pour développer, tester et faire évoluer votre design system – en reliant le design et le code dès le début.
Créez des design systems avec l'IA
Créez les fondations du système dans un langage naturel
Décrivez les composants, les tokens et les modèles dont vous avez besoin. Le générateur de design system IA crée des éléments cohérents et réutilisables, parfaitement alignés avec votre marque.
Validez avant de formaliser
Utilisez Make pour tester de nouveaux modèles, des mises en page ou des comportements réactifs en quelques minutes. Prototypez avec de vraies données, une logique et des contraintes pour voir ce qui fonctionne avant de le formaliser dans votre design system.
Reliez le design et le code
Intégrez des composants React ou une logique de production dans Make pour vérifier que chaque prototype reflète une fonctionnalité réelle. Lorsqu'un modèle est prêt, transmettez un code conforme aux normes qui maintient la cohérence de votre système à travers la conception et le développement.
Faites évoluer l'adoption avec un contexte partagé
Créez des modèles Figma Make intégrant votre design system, avec des directives pour garantir que l'IA l'applique correctement à chaque résultat. Chaque exploration commençant avec votre design system reflète une cohérence par défaut.
Des créations signées par de vraies équipes.
Découvrez comment les créateurs, les designers et les responsables produit utilisent Figma Make pour créer des applications web sans code, des outils internes aux MVP.
- Jacques Debeuneure Jr.
- Daniela Muntyan
- kishoree04u
- Seungmee Lee
Comment générer un design system avec l'IA dans Figma Make
Ouvrez Figma Make et importez les styles de votre marque ainsi que les composants de code – ou commencez à zéro avec un nouveau fichier.
Utilisez des prompts en langage naturel pour décrire les composants ou les flux que vous souhaitez explorer, et Make génère un prototype fonctionnel à partir de votre système existant.
Exemple de prompt : « Crée un composant de carte en utilisant nos tokens de couleur secondaires et nos directives sur le mouvement. »
Testez la réactivité, l'accessibilité et la logique dès le début, puis itérez jusqu'à ce que le modèle soit prêt à être adopté par le système.
Exemple de prompt : « Ajuste les marges intérieures et ajoute des états de survol et de focus qui respectent les normes d'accessibilité. »
Lorsque le modèle est prêt, transmettez directement le code fonctionnel à l'ingénierie. Vos équipes de conception et de développement travaillent à partir de la même source de vérité – donc ce que vous prototypez dans Make est ce qui est réalisé.
FAQ
C'est un moyen d'utiliser l'IA pour aider les équipes de design system à prototyper, à tester et à faire évoluer des composants cohérents plus rapidement. Dans Figma Make, vos tokens de conception et vos composants deviennent la base d'une exploration et d'une validation pilotées par l'IA.
Oui. Figma Make s'intègre à vos bibliothèques de styles Figma et à vos composants de code, de sorte que ce que vous générez demeure cohérent avec votre système actuel.
Vous n'avez pas besoin de coder. Vous pouvez concevoir, styliser et publier vos composants à l'aide de prompts. Si nécessaire, les développeurs peuvent toujours accéder à un code clair et prêt à être produit.
Absolument. Figma Make est conçu pour la collaboration. Les designers, PM et ingénieurs peuvent travailler ensemble dans le même fichier, tout en voyant les changements en temps réel.
Oui. Vous pouvez décrire des états et des interactions en utilisant des prompts tels que « Ajoute un effet de survol à tous les boutons principaux », et Make les crée automatiquement.
Vous pouvez essayer Figma Make gratuitement avec le forfait de base. Les fonctionnalités avancées d'IA et de conception de système sont disponibles dans les forfaits payants.
Plus de ressources
Qu'est-ce que le MCP ?
Lire l'articleDécouvrez le protocole MCP (Model Context Protocol), la norme ouverte qui simplifie l'intégration de l'IA comme un USB-C pour les données.
Qu'est-ce que le vibe coding ?
Lire l'articleLe vibe coding combine un design axé sur l'humeur à un codage fluide pour créer des expériences numériques immersives qui se connectent émotionnellement et fonctionnent parfaitement.
Comment concevoir une application en cinq étapes
Lire l'articleLa création d'une application nécessite des recherches et une itération constante pour répondre aux besoins des clients. Dans ce guide, apprenez à concevoir une application et découvrez comment Figma peut vous aider.
Créez des builds avec vos composants de code et vos bibliothèques de styles Figma, afin que chaque résultat reflète votre marque. Vous pouvez également publier des modèles Make afin de créer une base de référence cohérente pour les explorations de designs, ainsi que des fichiers de directives afin de définir comment Make applique votre design system.