code-connect-components

Stellt bidirektionale Verknüpfungen zwischen Figma-Designkomponenten und Code-Implementierungen mithilfe von Code Connect her. Erfordert eine Figma-MCP-Serververbindung und veröffentlichte Komponenten in Organisation- oder Enterprise-Plänen. Identifiziert automatisch nicht zugeordnete Komponenten in Figma-Auswahlen und durchsucht dann Ihre Codebasis nach passenden Codekomponenten anhand von Name, Struktur und Props. Präsentiert gefundene Komponenten zur Überprüfung, bevor Zuordnungen erstellt werden, und ermöglicht selektive Annahme oder Ablehnung. Unterstützt mehrere...

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

ZIP herunterladen GitHub

Mehr Skills von figma

video-interaction-mapper

Diese Fähigkeit sollte verwendet werden, wenn der Benutzer darum bittet, eine UI-Bildschirmaufnahme zu analysieren und Interaktionszustände in Figma zu kartieren. Auslöser für Anfragen wie "Video einfügen…

figma-code-connect

Erstellt und pflegt Figma Code Connect-Vorlagendateien, die Figma-Komponenten Code-Snippets zuordnen. Verwenden Sie dies, wenn der Benutzer Code Connect, Figma-Komponente… erwähnt.

create-design-system-rules

Benutzerdefinierte Design-System-Regeln für eine konsistente Figma-zu-Code-Implementierung in Ihrem Projekt. Generiert projektspezifische Konventionen für Komponentenorganisation, Styling, Design-Tokens und Asset-Handling, die KI-Agenten zu konsistentem Code führen. Unterstützt drei Regeldateiformate: CLAUDE.md für Claude Code, AGENTS.md für Codex CLI und .cursor/rules/figma-design-system.mdc für Cursor. Erfordert Figma-MCP-Serververbindung und Codebase-Analyse, um bestehende Muster vor der Regel... zu entdecken.

figma-implement-motion

Übersetzt Figma-Bewegungen und Animationen in produktionsreifen Anwendungscode. Verwenden Sie dies bei der Implementierung von Animationen/Bewegungen aus einem Figma-Design – der Benutzer erwähnt…

SwiftUI ↔ Figma-Übersetzung. Verwende, wenn der Benutzer Swift, SwiftUI, iOS, iPhone oder iPad erwähnt – in BEIDE Richtungen – und ein Figma-Design in… übersetzt.

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

Diese Fähigkeit hilft Agenten, das Figma-use_figma-MCP-Tool im Slides-Kontext zu verwenden. Kann zusammen mit figma-use verwendet werden, das grundlegendes Wissen zur Nutzung des…

figma-use-figjam

Diese Fähigkeit hilft Agenten, das use_figma MCP-Tool von Figma im FigJam-Kontext zu verwenden. Kann zusammen mit figma-use verwendet werden, das grundlegendes Wissen zur Nutzung des…