AI'nin doğrudan Figma tuvaline UI çizmesini ve tasarımları yapılandırılmış veri olarak okumasını sağlayan çift yönlü MCP köprüsü.
figma-ui-mcp, kurulum öncesi dokümantasyonu kontrol edilmesi gereken ve güven sinyalleri güçlü bir araç. En iyi sonuç için uyumlu agent ve kullanım senaryosu eşleşmesini kontrol et.
Repository başlangıç yönlendirmesi
gh repo view TranHoaiHung/figma-ui-mcp --webResmi repo veya web sitesini aç.
README'deki package manager, auth ve platform gereksinimlerini kontrol et.
Kendi agent/workflow içinde küçük bir test görevinde dene.
Bu araç, Claude Code veya Cursor gibi AI kodlama asistanlarını Figma'ya bağlar. AI'nin doğrudan Figma tuvalinde UI oluşturmasına ve değiştirmesine, ayrıca mevcut tasarımlardan renkler, metinler ve düzen gibi yapılandırılmış bilgileri okumasına olanak tanır. Her şey yerel bilgisayarınızda çalışır, API anahtarı gerekmez.
figma-ui-mcp, AI asistanlarının (Claude Code, Cursor, Windsurf, Antigravity, VS Code Copilot veya MCP uyumlu herhangi bir IDE) doğrudan Figma tuvaline UI çizmesini ve mevcut tasarımları yapılandırılmış veri, ekran görüntüsü veya koda hazır token'lar olarak okumasını sağlayan çift yönlü bir MCP (Model Context Protocol) köprüsüdür. Araç tamamen localhost üzerinde çalışır, Figma API anahtarı gerektirmez. 38451 portunda bir HTTP sunucusu başlatır ve uzun yoklama (long polling) ile Figma eklentisiyle iletişim kurar, neredeyse gerçek zamanlı gecikme (<100ms) sağlar. Köprü, oturum kimlikleri aracılığıyla birden fazla Figma dosyasını/sekmesini aynı anda destekler. Temel özellikler: figma_write ile çerçeve, şekil, metin ve prototip çizme; figma_read ile düğüm ağaçları, renkler, tipografi ve ekran görüntüleri çıkarma; figma_status ile bağlantı kontrolü; figma_docs ile API referansı; figma_rules ile tasarım sistemi kural sayfası oluşturma; ve get_design_context, get_component_map, get_unmapped_components, get_css gibi gelişmiş işlemler. Araç, UI tasarım oluşturmayı otomatikleştirmek, tasarım token'larını çıkarmak veya tasarım ve kod iş akışlarını birleştirmek isteyen geliştiriciler için tasarlanmıştır.
Güven sinyalleri güçlü; yine de production kullanımından önce README ve izinleri kontrol et.
Son commit yaklaşık 62 gün önce.
206 GitHub yıldızı topluluk ilgisini gösteriyor.
1 açık issue bakım yükü hakkında sinyal verir.
MIT lisansı görünüyor.
Doğal dil açıklamalarından AI kullanarak doğrudan Figma tuvalinde UI bileşenleri ve sayfaları oluşturma.
Mevcut Figma dosyalarından kodda kullanılmak üzere tasarım token'larını (renkler, tipografi, boşluk) çıkarma.
Kod değişikliklerine dayalı olarak AI'nin birden fazla Figma öğesini değiştirmesiyle tasarım sistemi güncellemelerini otomatikleştirme.
Düğüm yapılarını ve stillerini okuyarak Figma tasarımlarını CSS veya React koduna dönüştürme.
AI'ye bağlantılar ve etkileşimler eklemesi talimatı vererek etkileşimli akışlarla prototipler oluşturma.
Araç yerel bir HTTP sunucusu çalıştırır; genel internete açık olmadığından emin olun.
Figma eklentisi localhost üzerinden iletişim kurar; yalnızca güvenilir ağlarda kullanın.
Hiçbir veri harici olarak gönderilmez, ancak hassas tasarımlara aynı makinedeki diğer işlemler erişebilir.
206
Yıldız
43
Fork
1
Açık Sorun
MIT
Lisans
Herhangi bir web sitesinin tüm tasarım sistemini tek komutla çıkarın.
Argos, ekiplerin kaliteyi korumasına yardımcı olan, istenmeyen UI değişikliklerini tespit eden açık kaynaklı bir görsel test platformudur.
UI bileşenleriniz için tasarım sistemi dokümantasyonunu doğrudan AI ajanınızdan oluşturun, Figma veya taşınabilir .md dosyalarına dönüştürün.
AI'nin doğrudan Figma tuvaline UI çizmesini ve tasarımları yapılandırılmış veri olarak okumasını sağlayan çift yönlü MCP köprüsü.
Koddan veya doğal dilden UI tasarımları oluşturmak isteyen frontend geliştiricileri., Tasarım dosyalarını kod tabanlarıyla birleştirmesi gereken tasarım mühendisleri., Tasarım yazılımlarıyla etkileşime giren araçlar geliştiren AI/ML geliştiricileri.
Kurulum bölümü repository düzeyinde başlangıç yönlendirmesi sunar; bağımsız bir kurulum testi garantisi değildir. Resmi README ve sürüm notlarını kontrol edin.
Araç yerel bir HTTP sunucusu çalıştırır; genel internete açık olmadığından emin olun. Figma eklentisi localhost üzerinden iletişim kurar; yalnızca güvenilir ağlarda kullanın.
Değerlendirilebilecek benzer veya tamamlayıcı araçlar: design-extract, Argos, uSpec.
7 Haz 2026
3 güvenlik/güven notu kayıtlı.
Kurulum zorluğu 3/5.