An expert assistant for mastering Figma workflows, from system design to production-ready developer handoff.
Install
mkdir -p .claude/skills/figma-specialist-ia && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16921" && unzip -o skill.zip -d .claude/skills/figma-specialist-ia && rm skill.zipInstalls to .claude/skills/figma-specialist-ia
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Expert en Figma (auto-layout, components, variables, prototyping, dev handoff)Key capabilities
- →Design systems with components, variants, and variables
- →Implement responsive auto-layout
- →Create interactive prototypes with animations
- →Prepare files for developer handoff
- →Audit and optimize existing designs
How it works
The skill guides through setting up styles and variables, organizing pages, creating components, building layouts with auto-layout, and adding interactions for prototyping.
Inputs & outputs
When to use Figma Specialist IA
- →Set up responsive auto-layout
- →Create component variant systems
- →Prepare files for developer handoff
About this skill
Figma Specialist IA
Rôle
Expert en conception Figma. Crée des systèmes de design robustes avec auto-layout, composants réutilisables, variables, prototypage interactif et handoff développeur pour des projets UI/UX professionnels.
Quand l'utiliser
- Conception de systèmes de design (components, variants, variables)
- Mise en place d'auto-layout responsive
- Prototypage interactif avec animations et conditional logic
- Préparation de handoff développeur (inspect, specs, tokens)
- Création de templates et bibliothèques partagées
- Audit de design existant et optimisation
Compétences clés
- Auto Layout : Fill, Hug, Fixed; direction, gap, padding, wrap
- Components : Master components, variants, properties, nested instances
- Variables : Color, number, string, boolean; modes, collections
- Prototyping : Interactions, animations, conditional navigation, variables
- Styles : Color, typography, effect, grid styles; tokens
- Plugins : Auto-layout helpers, icon libraries, accessibility checkers
- Dev Handoff : Inspect, code snippets, CSS/Flutter/Swift export, Dev Mode
Workflow typique
- Setup : Créer le fichier, configurer les styles et variables
- Structure : Organiser pages et frames par flow
- Components : Créer les master components et variants
- Layout : Construire avec auto-layout (mobile-first)
- Prototype : Ajouter interactions et transitions
- Review : Annotations, commentaires, versioning
- Handoff : Activer Dev Mode, exporter specs et assets
Pièges connus
- Auto-layout imbriqué peut créer des conflits de sizing
- Variables non supportées dans tous les plugins
- Performance dégradée au-delà de 500 composants par page
- Prototypage avancé (conditional logic) nécessite Figma Pro
- Export SVG peut perdre des effets (inner shadow, blend modes)
- Les fonts manquantes bloquent le rendu sur toutes les plateformes
Connexions Knowledge Graph
- [[agent-ui-designer]] — UI design patterns et principes
- [[agent-frontend-react]] — Figma → React, design tokens
- [[agent-design-system-builder]] — Design systems dans Figma
- [[agent-accessibility-engineer]] — Accessibilité dans Figma
- [[agent-canva-specialist]] — Canva vs Figma, cas d'usage
Limitations
- →Auto-layout imbriqué peut créer des conflits de sizing
- →Variables non supportées dans tous les plugins
- →Performance dégradée au-delà de 500 composants par page
How it compares
This skill provides a structured workflow for creating reliable design systems and developer handoffs in Figma, contrasting with unstructured design processes.
Compared to similar skills
Figma Specialist IA side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| Figma Specialist IA (this skill) | 0 | 1mo | No flags | Advanced |
| penpot-uiux-design | 27 | 6mo | Review | Advanced |
| ui-ux-designer | 41 | 4mo | No flags | Intermediate |
| design-context | 1 | 7mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
design-context
WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
ux-audit-walkthrough
AIPexStudio
Minimalist UX/Interaction Audit Expert that deconstructs complex interactions through cognitive load and operational efficiency lenses. Use this skill when you need to perform a UX walkthrough audit on a Figma prototype or web interface, evaluating usability based on principles like fewer clicks, less UI elements, no hidden logic, and self-explanatory design.
ux-ui-design
jnPiyush
Design user experiences with wireframing, prototyping, user flows, accessibility, and production-ready HTML prototypes. Use when creating wireframes, building interactive prototypes, designing user flows, implementing accessibility standards, or producing HTML/CSS design deliverables.
wireframe-sketch
mick-gsk
Installiert aus nexu-io/open-design: erzeugt eine bewusst lo-fi, handgezeichnete Exploration mit Graph-Paper, Marker-Notizen und Varianten. Fuer Logoarbeit eignet sich das als fruehes Konzeptblatt, Richtungsboard oder Symbol-Exploration vor dem Feinschliff. Verwenden bei wireframe, sketch wireframe,