Design system : Figma dévoile 5 nouveautés pratiques

Figma enrichit ses outils dédiés aux design systems avec de nouvelles fonctions centrées sur la cohérence visuelle, le code et l’intégration de l’IA.

Figma Make kits
Figma introduit les kits pour Make. © Figma

Ce mardi 28 octobre 2025, Figma a tenu son événement annuel Schema by Figma, consacré aux design systems (les bibliothèques conçues pour assurer la cohérence visuelle et technique des produits). L’outil de design d’interface en a profité pour présenter plusieurs nouveautés importantes. Retour sur les 5 principales annonces.

1. Des collections étendues

Sur Figma, les collections favorisent la cohérence de marque en regroupant des variables (couleurs, polices, espacements) organisées par thème ou usage. Jusqu’à présent, l’outil permettait de gérer un seul design system, ce qui pouvait poser problème pour les entités proposant plusieurs marques ou produits différents.

Pour résoudre ce problème et éviter aux marques de dupliquer le design system ou bricoler des variantes, Figma étend ses collections à partir de novembre. Il est donc désormais possible de créer des extensions d’un design system existant.

Désormais, les auteurs de design system peuvent publier une version simplifiée et personnalisable de leur système, que les designers de toute l’entreprise peuvent enrichir avec leurs propres thèmes, publier et réutiliser, indique Figma.

La collection étendue reste connectée au design system principal : elle reçoit automatiquement ses mises à jour (nouvelles variables, changements de couleurs), tout en gardant les ajustements qu’elle a elle-même personnalisés.

Collections étendues Figma
Les collections étendues reçoivent automatiquement les mises à jour du système principal. © Figma

2. Le serveur MCP disponible en version bêta

Le 4 juillet dernier, Figma lançait en version bêta son MCP Server, une technologie permettant aux outils d’IA de comprendre le contexte d’un design directement depuis Figma. L’objectif : aider les développeurs à générer un code fidèle à l’intention du design, en tenant compte des composants, variables et styles utilisés dans les maquettes. À l’époque, cette première version servait surtout à tester l’intégration entre Figma et des outils comme Copilot, Cursor ou Claude Code.

Le Figma MCP Server est désormais officiellement disponible pour tous. Et cette version finale va plus loin : elle permet désormais d’ajouter des règles personnalisées pour que l’IA respecte automatiquement le design system de chaque entreprise et devient compatible avec le tableau blanc FigJam.

3. Make kits : importer ses bibliothèques Figma dans Make

Lors de l’événement Config 2025, la firme a présenté Figma Make, un générateur de code par IA dédié au prototypage d’applications. Dans la continuité de cet outil, Figma introduit Make kits (voir image de une), une nouvelle fonctionnalité qui permet d’importer directement des bibliothèques de design depuis Figma.

Avec Make kits, les utilisateurs peuvent générer automatiquement des composants en React ainsi que des fichiers CSS à partir de leurs styles et variables, afin de créer des prototypes plus cohérents et plus proches du rendu final. Actuellement en accès anticipé, cette nouveauté sera prochainement disponible pour tous les abonnés payants.

4. L’importation de packages npm dans Make

Autre nouveauté pour Make : l’importation de packages npm. Cette fonctionnalité permettra aux équipes disposant déjà d’un système de conception dans leur base de code d’importer directement leurs composants React, qu’ils soient internes ou issus de bibliothèques open source.

Les packages npm publics seront accessibles à tous les utilisateurs, tandis que les packages privés seront réservés aux abonnés payants. Le déploiement est prévu pour novembre 2025.

5. Code Connect UI, pour simplifier le lien entre design et code

Figma fait évoluer son outil Code Connect, lancé en 2024 pour rapprocher design et développement, avec une nouvelle interface baptisée Code Connect UI. Cette mise à jour simplifie grandement la configuration : les utilisateurs peuvent désormais connecter directement Figma à leurs dépôts GitHub, sans avoir à écrire de code.

Code Connect a joué un rôle déterminant dans le rapprochement entre le design et le code dans Figma. Si l’enthousiasme des utilisateurs pour Code Connect et sa capacité à faciliter l’adoption des systèmes de conception en rendant le code plus accessible et utile aux développeurs est indéniable, certains ont également exprimé le souhait d’une prise en main plus simple, explique Figma.

Grâce à un système de suggestions alimenté par l’IA, Code Connect UI peut également identifier automatiquement les bons fichiers de code à associer aux composants Figma. La fonctionnalité est en cours de déploiement pour les clients des offres Organization et Enterprise.

Code Connect UI
Code Connect UI simplifie le lien entre design et code grâce à l’IA et une connexion directe à GitHub. © Figma
Sujets liés :
Publier un commentaire
Ajouter un commentaire

Votre adresse email ne sera pas publiée.

Les meilleurs outils Prototypage