De Figma à Claude Code et retour | Gui Seiz & Alex Kern (Figma)

De Figma à Claude Code et retour | Gui Seiz & Alex Kern (Figma)

La plupart des équipes continuent d'échanger des fichiers de design statiques, et la plupart des fichiers Figma sont déjà obsolètes au moment où ils atteignent l'ingénierie. Gui Seiz (designer) et Alex Kern (ingénieur) de Figma expliquent le flux de travail exact que leur équipe utilise pour combler cette lacune avec l'IA, en direct à l'écran. Ils démontrent comment intégrer une application web en cours d'exécution directement dans Figma en utilisant le Figma MCP, l'éditer de manière collaborative et le renvoyer dans le code. L'ancien flux de travail linéaire en cascade est révolu. Ce qui le remplace est une boucle fluide et bidirectionnelle où le design et le code s'informent mutuellement en temps réel.

Ce que vous apprendrez :

• Comment utiliser le MCP de Figma pour extraire le code de production directement dans les fichiers Figma.
• Un flux de travail pour renvoyer les modifications de design de Figma vers votre base de code en utilisant Claude Code sans ajustements manuels de CSS.
• Comment exporter plusieurs états de code (comme les cinq états d'un flux d'inscription) dans Figma afin que les designers puissent travailler avec ce qui existe réellement en production.
• Pourquoi l'IA a déplacé le travail de design en amont vers la planification et en aval vers l'artisanat, éliminant ainsi la phase intermédiaire précipitée d'exécution.
• Comment créer des compétences personnalisées qui automatisent les vérifications préalables, les corrections de lint et la surveillance CI avant de pousser le code en production.
• Comment structurer votre base de code afin que l'IA puisse écrire 90 % de votre code de manière plus efficace.

Dans cet épisode, nous couvrons :

• (00:00) Introduction à Gui et Alex de Figma
• (02:56) Comment l'IA a transformé les flux de travail internes de Figma
• (05:17) L'effondrement des flux de travail linéaires de design à code
• (07:28) Démo : Intégration du code de production dans Figma en utilisant les MCP
• (10:49) Utilisation de Figma pour une manipulation précise du design et la collaboration en équipe
• (14:10) Démo : Renvoi des designs Figma dans le code avec Claude Code
• (16:06) Comment l'IA a changé le rôle des ingénieurs logiciels
• (18:43) Le passage à la planification en amont et à l'artisanat en aval
• (22:31) Démo : Exportation de plusieurs états de code dans Figma
• (25:23) Collaboration synchrone vs asynchrone avec l'IA
• (28:00) Élimination des tâches répétitives en design et ingénierie avec l'IA
• (29:03) Démo : Compétences personnalisées pour automatiser les vérifications préalables
• (34:06) Code d'abord ou design d'abord ?
• (35:24) Utilisation de l'IA pour apprendre et explorer les bases de code

Outils mentionnés :

• Figma
• Claude Code
• Codex
• Buildkite
• Balsamiq