Figma’nın MCP Server güncellemesi; özellikle tasarım sistemleri ve arayüz tasarımcıları için oldukça önemli bir gelişme oldu. Artık bir yeni bir devir başlıyor gibi. 👀

Renkler, spacing'ler, component state’ler gibi tüm detayları geliştiricilere açıklamak, UAT toplantıları ayarlamak, paydaşlardan yorum almak saatler alıyor. Üstelik uygulamanın doğru teslim edilmesi için defalarca kontrol etmek, yorum bırakmak, düzeltme istemek gerekiyor. “Button hizası bozuk”, “font kalınlığı uymamış” gibi geri bildirimler deadline baskısıyla birleşince ekipler arası verimi düşürüyor, odağı dağıtıyor ve zaman zaman tansiyonu yükseltiyor.

Oysa artık bu sürecin büyük kısmı otomatikleşmeye başlıyor. MCP (Model Context Protocol) gibi yeni nesil yapılar sayesinde, tasarımın bağlamı doğrudan yapay zeka destekli asistanlara aktarılabiliyor. Böylece statik ekran paylaşımları, kırmızı oklarla dolu geri bildirimler ve “tasarımda böyle değildi” gibi gerilimli anlar yavaş yavaş tarihe karışıyor.

Yaşasınnnnn! Artık daha net bir iş akışı, daha hızlı teslimatlar, daha az revizyon. 🎉

Peki, Model Context Protocol (MCP) nedir?

Model Context Protocol, Anthropic tarafından Kasım 2024'te büyük dil modelleri gibi yapay zeka sistemlerinin harici araçlar, sistemler ve veri kaynaklarıyla veriyi entegre etme ve paylaşma şeklini standartlaştırmak için tanıtılan açık standartlı, açık kaynaklı bir çerçevedir. (Kaynak: wikipedia)

Figma MCP server nasıl kullanılır?

Figma üzerinden Figma MCP sunucusunu etkinleştirin. (Prefences > Enabled Dev Mode MCP Server)

1. Figma MCP sunucusunu IDE’nizde çalıştırın.

2. Artık Figma’daki bir tasarımınızı hızlıca IDE Agent’ınızda koda dönüştürebilirsiniz.

Şimdi gelin Figma MCP Server’da enpoint ile yapabildiklerimize bir bakalım.

get_code

Figma’da seçili olan bir node’un (bileşen, frame, ekran, vs.) kod karşılığını otomatik olarak üretir. Yani, Figma’daki tasarımın HTML, CSS, React, Vue, Tailwind gibi kodunu hızlıca elde etmeni sağlar.

“get_code” ne işe yarar?

• Figma’daki bir tasarım öğesinin kodunu otomatik olarak oluşturur.

• Seçili node’un yapısına ve ayarlarına göre, düz HTML+CSS, Tailwind CSS, React, Vue, vs. çıktısı alabilirsin.

• Tasarımcıdan geliştiriciye geçişi hızlandırır: “Bu ekranın kodunu çıkar” dediğinde, anında kodunu alırsın.

• Kodun içinde, Figma’daki görsellerin (SVG, PNG) linkleri de otomatik olarak yer alır.

“get_code” nasıl kullanılır?

• Figma’da bir buton, kart, ekran, menü, vs. seçip, bunun kodunu (ör. HTML+CSS veya React bileşeni) almak.

• Tasarımın kodunu hızlıca prototiplemek veya projeye entegre etmek.

• Kodun içinde kullanılan görsellerin (ikon, logo, vs.) linklerini doğrudan almak.

• Tasarım ve kodun birebir uyumlu olmasını sağlamak.

get_variable_defs

Figma tasarımında seçili olan bir node’un (bileşen, frame, vs.) kullandığı değişkenleri (variables) otomatik olarak listeler. Bu değişkenler; renkler, fontlar, spacing (boşluk), radius (köşe yuvarlatma), opaklık, efekt gibi tasarımda tanımlı ve tekrar kullanılabilen değerlerdir.

“get_variable_defs” ne işe yarar?

• Figma’daki bir node’un hangi değişkenleri kullandığını otomatik olarak gösterir.

• Tasarım sisteminde tanımlı olan renk, font, spacing, radius gibi değerlerin kodunu ve adını kolayca görmeni sağlar.

• Kod ile tasarım arasında değişkenlerin eşleşmesini ve tutarlılığını kontrol etmeye yardımcı olur.

• Tasarımcı ve geliştirici arasında “Bu kartta hangi renk/spacing/font kullanılmış?” gibi sorulara hızlı yanıt verir.

“get_variable_defs” nasıl kullanılır?

• Bir Figma bileşeninde kullanılan tüm renk, font, spacing, radius, efekt değişkenlerini görmek.

• Kodda, Figma’dakiyle aynı değişkenleri kullanıp kullanmadığını kontrol etmek.

• Tasarım sisteminin güncelliğini ve tutarlılığını denetlemek.

• Figma’dan kod üretirken, değişken isimlerini ve değerlerini doğrudan almak.

get_code_connect_map

Figma tasarımındaki bir node’un (örneğin bir bileşen, frame veya seçim) kod tabanındaki karşılığını (yani ilgili React/Vue/HTML/CSS dosyasını veya bileşenini) otomatik olarak eşleştirmek için kullanılır.

“get_code_connect_map” ne işe yarar?

• Figma tasarımındaki bir öğenin, kodda hangi dosya veya bileşene karşılık geldiğini bulur.

• Tasarım ve kod arasında otomatik bağlantı (mapping) sağlar.

• Tasarımcı ve geliştirici arasında iletişimi hızlandırır: “Bu butonun kodu nerede?” sorusunun cevabını otomatik verir.

• Kodun güncel olup olmadığını, Figma’dakiyle uyumlu olup olmadığını kontrol etmeye yardımcı olur.

“get_code_connect_map” nasıl kullanılır?

• Figma’da bir node (örneğin bir buton, kart, navbar) seçili iken bu aracı çağırırsın.

• Araç, seçili node’un ID’sini alır ve kod tabanında bu node’a karşılık gelen dosya/bileşen yolunu ve adını döndürür.

• Sonuç: { nodeId: { codeConnectSrc: 'src/components/Button.tsx', codeConnectName: 'Button' } } gibi bir eşleşme elde edersin.

get_image

Figma’da seçili olan bir node’un (bileşen, frame, ekran, ikon, vs.) görselini (PNG veya SVG olarak) otomatik olarak üretir ve bir link olarak sunar.

“get_image” ne işe yarar?

• Figma’daki bir tasarım öğesinin görselini (image) hızlıca almanı sağlar.

• Seçili node’un ekran görüntüsünü veya vektörel çıktısını (SVG/PNG) elde edersin.

• Kodda veya dokümantasyonda, Figma’daki tasarımın görselini doğrudan kullanabilirsin.

• Tasarım ve kodun birebir görsel karşılaştırmasını kolaylaştırır.

“get_image” nasıl kullanılır?

• Figma’daki bir buton, ikon, kart, ekran, vs. için görsel linki almak.

• Kodda <img src="..."> ile doğrudan kullanmak.

• Tasarım dokümantasyonunda veya sunumda, Figma’daki öğenin görselini göstermek.

• Tasarım ve kodun görsel olarak birebir karşılaştırmasını yapmak.

Şimdi ise gelin örneklere bakalım.

Daha iyi kod için Figma dosyanızı yapılandırın ⚒️

Bir tasarımcı olarak kod kalitesini her zaman düşünmelisiniz ve Figma dosyanızı doğru yapılandırmalısınız.

• Tekrar eden her şeyi component yap. (buton, kart, input vs.)

• Spacing, renk, radius, typo gibi değerlerde variable kullan.

• Katmanları anlamlı isimlendir (örnek: CardContainer).

• Auto layout ile responsive niyetini belirt.

• Tasarımın doğru çalıştığından emin olmak için frame’i yeniden boyutlandırarak test et.

Yukarıdaki bu önerileri Figma’nında önerdiğini unutmayın. Ayrıca daha önce hazırladığım 5 dk’lık Tasarım dosyalarınızı düzenli ve temiz tutmanın yolları yazıma da göz atabilirsiniz.