Figma Skills

mcp-server-guide/skills/code-connect-components

Figma tasarım bileşenleri ile kod uygulamaları arasında Code Connect kullanarak çift yönlü bağlantılar kurar. Figma MCP sunucu bağlantısı ve Organization veya Enterprise planlarında yayınlanmış bileşenler gerektirir. Figma seçimlerindeki eşlenmemiş bileşenleri otomatik olarak tanımlar, ardından kod tabanınızı ad, yapı ve prop'lara göre eşleşen kod bileşenleri için tarar. Eşleşen bileşenleri eşleme oluşturmadan önce incelemeniz için sunar ve seçici kabul veya reddetmeye olanak tanır. Birden fazla...

mcp-server-guide/skills/create-design-system-rules

Projenizde tutarlı Figma'dan koda geçiş uygulaması için özel tasarım sistemi kuralları. Bileşen organizasyonu, stil, tasarım token'ları ve varlık yönetimi için projeye özgü kurallar oluşturur; bu kurallar AI ajanlarını tutarlı kod üretmeye yönlendirir. Üç kural dosyası formatını destekler: Claude Code için CLAUDE.md, Codex CLI için AGENTS.md ve Cursor için .cursor/rules/figma-design-system.mdc. Kural oluşturmadan önce mevcut desenleri keşfetmek için Figma MCP sunucu bağlantısı ve kod tabanı analizi gerektirir...

mcp-server-guide/skills/figma-code-connect

Figma Code Connect şablon dosyalarını oluşturur ve sürdürür; bu dosyalar Figma bileşenlerini kod parçacıklarına eşler. Kullanıcı Code Connect, Figma bileşeninden bahsettiğinde kullanılır.

mcp-server-guide/skills/figma-code-connect-components

Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

mcp-server-guide/skills/figma-create-design-system-rules

Kullanıcının kod tabanı için özel tasarım sistemi kuralları oluşturur. Kullanıcı "tasarım sistemi kuralları oluştur", "projem için kurallar üret", "tasarım kuralları belirle", "tasarım sistemi yönergelerini özelleştir" dediğinde veya Figma'dan koda iş akışları için projeye özel kurallar belirlemek istediğinde kullanılır. Figma MCP sunucu bağlantısı gerektirir.

mcp-server-guide/skills/figma-create-new-file

Yeni bir boş Figma dosyası oluşturur. Kullanıcı yeni bir Figma tasarımı veya FigJam dosyası oluşturmak istediğinde ya da use_figma çağırmadan önce yeni bir dosyaya ihtiyaç duyulduğunda kullanılır. Gerekirse whoami aracılığıyla plan çözümlemesi yapar. Kullanım — /figma-create-new-file [editorType] [fileName] (ör. /figma-create-new-file figjam My Whiteboard)

mcp-server-guide/skills/figma-design-to-code

Bu beceriyi, bir Figma tasarımını kod olarak uygularken (tasarımdan koda) kullanın — Figma'dan OKUMA yönü. Tetikleyiciler: 'bu Figma tasarımını uygula', 'bunu oluştur…

mcp-server-guide/skills/figma-generate-design

Bu beceriyi, bir uygulama sayfası, görünüm veya çok bölümlü düzenin Figma'ya çevrilmesini içeren görevlerde figma-use ile birlikte kullanın. Tetikleyiciler: 'Figma'ya yaz', 'koddan Figma'da oluştur', 'sayfayı Figma'ya gönder', 'bu uygulamayı/sayfayı al ve Figma'da oluştur', 'ekran oluştur', 'Figma'da açılış sayfası oluştur', 'Figma ekranını kodla eşleşecek şekilde güncelle'. Kullanıcı, koddan veya açıklamadan Figma'da tam bir sayfa, ekran veya görünüm oluşturmak veya güncellemek istediğinde tercih ed

mcp-server-guide/skills/figma-generate-diagram

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…

mcp-server-guide/skills/figma-generate-library

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

mcp-server-guide/skills/figma-implement-design

We need to translate the given English text into Turkish, preserving the name "figma-implement-design" if it appears. The text is a description of an agent skill. We must not include any extra labels or commentary. The name "figma-implement-design" does not appear in the source text, so we don't include it. The text also mentions "use_figma" and "figma-use" which are technical terms to preserve. Translate naturally. Translation: "Figma tasarımlarını birebir görsel doğrulukla, üretime hazır uygulama koduna dönüştürür. Figma dosyalarından UI kodu uygulanırken, kullanıcı "tasarımı uygula", "kod oluştur", "bileşeni uygula" dediğinde, Figma URL'leri sağladığında veya Figma özelliklerine uygun bileşenler oluşturulmasını istedi

mcp-server-guide/skills/figma-implement-motion

Figma hareket ve animasyonlarını üretime hazır uygulama koduna çevirir. Bir Figma tasarımından animasyon/hareket uygulanırken kullanın — kullanıcı şunlardan bahseder…

mcp-server-guide/skills/figma-swiftui

SwiftUI ↔ Figma çevirisi. Kullanıcı Swift, SwiftUI, iOS, iPhone veya iPad'den bahsettiğinde — HER İKİ yönde de — bir Figma tasarımını çevirirken kullanın…

mcp-server-guide/skills/figma-use

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

mcp-server-guide/skills/figma-use-figjam

Bu beceri, ajanların Figma'nın use_figma MCP aracını FigJam bağlamında kullanmasına yardımcı olur. figma-use ile birlikte kullanılabilir; bu araç, … kullanımı için temel bağlam sağlar.

mcp-server-guide/skills/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…

mcp-server-guide/skills/figma-use-slides

Bu beceri, ajanların Figma'nın use_figma MCP aracını Slaytlar bağlamında kullanmasına yardımcı olur. figma-use ile birlikte kullanılabilir; figma-use, kullanım için temel bağlam sağlar…

mcp-server-guide/workflow-skills/generate-project-plan

Bir PRD ve kod tabanı bağlamından bir FigJam proje plan panosu oluşturun. Etkileşimli akış: araştırma → bölüm önerme → bölüm bazında derin araştırma → bölüm bazında…

mcp-server-guide/skills/implement-design

Figma tasarımlarını piksel mükemmelliğinde görsel doğrulukla üretime hazır koda dönüştürür. Figma MCP sunucu bağlantısı ve dosya anahtarı ile düğüm kimliği içeren bir Figma URL'si gerektirir; tasarım bağlamını, ekran görüntülerini ve varlıkları çıkarmak için. Yedi adımlı yapılandırılmış iş akışı: URL'yi ayrıştır, tasarım bağlamını getir, görsel referansı yakala, varlıkları indir, proje kurallarına çevir, birebir eşleşme sağla ve Figma'ya karşı doğrula. Kopyalama yerine tasarım sistemi yeniden kullanımına öncelik verir; Figma token'larını proje tasarımına eşler...

mcp-server-guide/workflow-skills/video-interaction-mapper

Bu beceri, kullanıcı bir UI ekran kaydını analiz etmesini ve etkileşim durumlarını Figma'ya haritalamasını istediğinde kullanılmalıdır. "videoyu koy..." gibi talepler için tetiklenir.