Figma Config 2026 : Calques de Code, Agents IA et Fin du Handoff Design

Config 2026 est la conférence la plus orientée développeurs de toute l'histoire de Figma. Plutôt que de livrer des mises à jour incrémentales, la société a repensé ce que le canvas peut contenir — design, code, motion, shaders et agents IA coexistant dans un seul fichier collaboratif multiplayer. Voici tout ce qui a été annoncé et ce que cela signifie pour vos équipes produit.

L'idée centrale : le code comme matériau du canvas

Dylan Field a ouvert Config avec une thèse unique : "Aucun outil ne devrait limiter la trajectoire d'une idée." Chaque annonce découle de cette prémisse. Le code, la motion, les shaders et les workflows IA sont désormais des matériaux de première classe sur le canvas Figma — au même titre que les images et les calques vectoriels.

Le résultat est une boucle plus serrée entre idéation et implémentation. Le designer n'exporte plus une spec statique ; l'ingénieur n'en réinterprète plus l'intention. Le canvas devient l'artefact partagé.

Calques de code : design et code côte à côte

La fonctionnalité phare est les calques de code — un mécanisme pour intégrer du code live et fonctionnel directement sur le canvas Figma en tant que type de calque dédié.

Pour démarrer, les équipes peuvent :

• Convertir n'importe quel frame de design en calque de code en un clic
• Cloner un dépôt GitHub directement sur le canvas
• Uploader un dossier de projet local
• Demander à l'agent Figma de générer un calque de code depuis une description textuelle

Une fois créé, un calque de code se comporte comme n'importe quel calque Figma : redimensionnable, commentable, duplicable pour explorer plusieurs directions côte à côte, et visible de tous les collaborateurs dans le fichier partagé. Les packages NPM se chargent dans les calques de code — bibliothèques de motion et frameworks 3D inclus — donc les prototypes interactifs font tourner de vraies dépendances plutôt que des approximations par smart-animate.

Extract Designs fonctionne dans l'autre sens : convertissez n'importe quel calque de code en calques de design Figma éditables, en sélectionnant des écrans, des états ou des flows entiers. Un clic resynchronise les modifications du canvas vers le code.

React est le premier framework supporté. Le déploiement des calques de code commence en juillet 2026 sur invitation — inscription sur figma.com/config-betas.

Figma Motion : timeline d'animation native

Figma Motion apporte une timeline d'animation basée sur des keyframes directement dans Figma Design. Sans outil tiers, sans handoff séparé.

Fonctionnalités clés :

• Éditeur de keyframes avec courbes d'easing, animations spring et préréglages
• Génération d'animations assistée par IA : décrivez une transition, l'agent la construit
• Motion comme composant de design system — réutilisable entre fichiers
• Inspection de la timeline dans Dev Mode, compatible MCP pour un accès programmatique

Formats d'export : CSS, JSON, React, MP4, WebM, SVG animé et GIF.

Motion est en bêta ouverte pour tous les abonnements avec sièges Full. La publication de composants animés et les exports vidéo haute résolution nécessitent un plan payant.

Agent Figma : Skills et Connectors

La mise à jour la plus significative de Config 2026 concerne l'agent Figma, qui passe d'assistant de chat à couche d'automatisation de workflows.

Skills

Les Skills permettent aux équipes d'encoder leurs conventions, règles de nommage, logiques d'espacement et patterns de composants sous forme d'automations réutilisables et partageables. Un designer peut créer un Skill qui :

• Renomme tous les calques selon la convention de l'équipe
• Applique un espacement cohérent sur une sélection
• Génère un jeu de tokens complet depuis une référence de couleurs de marque
• Convertit un frame vers une structure de composant spécifique

Aucune connaissance du Plugin API requise. Décrivez le comportement — l'agent crée le Skill. Partagez-le avec un fichier, et toute l'équipe peut l'exécuter à la demande.

Connectors

Les Connectors branchent l'agent sur des outils externes pour qu'il opère avec un contexte produit réel :

• GitHub — lire l'état des branches, inspecter les PRs, remonter les diffs récents
• Notion — importer les specs, docs et exigences produit
• Slack — remonter les fils de conversation comme contexte de design
• Atlassian — lier les tickets Jira à des calques de design spécifiques
• Granola et Hex — notes de réunion et notebooks de données

Les fils de l'agent sont visibles par tous les membres de l'équipe par défaut, rendant les décisions assistées par IA transparentes et auditables. Skills et Connectors sont en bêta ouverte sur les plans Professional, Organization et Enterprise.

Shader Fills et plugins génératifs

Shader Fills

Décrivez un effet visuel en texte — ou référencez une image — et l'agent Figma génère un shader WebGPU natif. Les shaders sont :

• Paramétrés avec des contrôles glissables directement sur le canvas
• Empilables sur les fills et effets existants
• Exportables via MCP ou en PNG et MP4

Les shaders interactifs (où les utilisateurs finaux interagissent avec le shader dans le navigateur) arriveront dans une prochaine mise à jour. Shader Fills est disponible en bêta ouverte sur les plans payants uniquement.

Plugins génératifs

Les plugins personnalisés ne nécessitent plus qu'une description textuelle. Définissez le comportement, les sliders et les paramètres dans le chat de l'agent, et Figma construit un plugin hébergé scopé au fichier courant. Aucun environnement de développement local requis ; le développement classique via le Plugin API reste inchangé.

La publication au niveau équipe et organisation est sur la roadmap. Plugins génératifs disponibles en bêta ouverte sur plans payants.

Weave Tools

Les Weave Tools apportent un workflow de génération de contenu visuel en nœuds au canvas de design. Les équipes composent des pipelines multi-modèles — combinant génération d'images, texte, sources de données et composants Figma — et les publient comme templates réutilisables ou outils communautaires. Le remplacement de fond, l'application de logos et l'ajustement du ratio sont dans la première livraison.

Plans Professional, Organization et Enterprise uniquement. Le produit Weave inclut une allocation mensuelle de crédits IA distincte.

Disponibilité en bref

Ce qui change pour les équipes design-to-code

Le set de fonctionnalités de Config 2026 comprime plusieurs étapes de handoff qui ont défini les équipes produit pendant une décennie :

• Les prototypes font tourner du vrai code de framework — les parties prenantes voient le comportement réel, pas des animations qui l'approximent
• Les specs de motion sont inspectables en Dev Mode et exportables en CSS ou React prêt pour la production — sans recréation
• Les conventions vivent dans des Skills, pas dans la connaissance tribale — les agents les appliquent automatiquement
• Le contexte externe (tickets, docs, conversations) atteint le canvas sans changement de contexte

Les équipes ont toujours besoin d'ingénieurs pour l'intégration des données, la conception des APIs et l'infrastructure de production. Mais la boucle de feedback design-to-implementation — celle qui compresse des semaines en jours quand elle fonctionne — devient mesurément plus rapide.

Accès anticipé

La liste d'attente pour les calques de code est ouverte sur figma.com/config-betas. Toutes les autres fonctionnalités de Config 2026 se déploient en bêta ouverte sur les plans Figma existants — vérifiez les toggles bêta dans vos paramètres.

Config 2026 confirme que Figma ne se positionne plus comme un simple outil de design. Il devient l'environnement partagé où les décisions de design et d'implémentation se prennent ensemble, dans le même fichier, par les mêmes équipes cross-fonctionnelles — et cela commence ce mois-ci.