Figma Config 2023 Yenilikleri

Figma, tasarım dünyasında önde gelen bir araç olarak sürekli olarak gelişmeye devam ediyor. 2023 yılında Figma Config’e eklenen yeni özelliklerle, kullanıcı deneyimini daha da geliştirmeyi hedefliyor. Bu yenilikler, tasarımcıların daha verimli, tutarlı ve özelleştirilebilir bir şekilde çalışmalarını sağlamak için tasarlanmıştır.

Kamil Kalkan
Tasarım
4 min readJun 25, 2023

--

Bildiğiniz üzere geçen yıl Adobe şirketi Figma’yı satın aldı. Bu haber tasarımcılar arasında endişe yaratmıştı ve ben de aynı şekilde endişelenmiştim. Ancak, Adobe’nun satın almasından sonra Figma, uzun bir süre sonra beklenen birçok yeniliği duyurdu.

1. Değişkenler!

Tasarım dünyasında, tutarlılık her zaman en önemli hedeflerden biridir. Ancak, farklı ekipler arasında veya hatta aynı takımlar içinde bile bileşenlerin farklılık gösterdiği, renklerin uyumsuz olduğu veya köşelerin farklı yuvarlaklık oranlarına sahip olduğu durumlar sıklıkla karşılaşılan bir sorundur. Bu durum, hem tasarımcılar hem de geliştiriciler için zaman kaybına, iletişim hatalarına ve tutarsızlıklara yol açabilir.

Figma, Config 2023 ile duyurduğu “variables” özelliği ile bu sorunu çözmeye yönelik büyük bir adım atmaktadır. Figma’nın “variables” özelliği, bir tasarım bileşeninin çeşitli özelliklerini tek bir yerden yönetebilmemizi sağlar. Örneğin, renk, tipografi, köşe yarıçapı gibi bileşen özelliklerini değiştirdiğimizde, bu değişiklik otomatik olarak tüm tasarım içindeki ilgili bileşenlere yansır.

Bu yenilik, tasarım sistemlerini daha tutarlı ve yönetilebilir hale getirirken aynı zamanda tasarımcılar ve geliştiriciler arasındaki iletişimi ve işbirliğini güçlendirir. Artık farklı takımlar arasında veya farklı projelerde çalışırken bileşenlerin tutarlılığı sağlanabilir. Böylece zaman kaybı ve hatalar azalırken, tasarımların kalitesi ve uyumluluğu artar.

Figma Config 2023'ün “variables” özelliği, tasarım sürecini daha verimli hale getirirken aynı zamanda tasarımcıların yaratıcılıklarını da destekler. Değişikliklerin hızlı ve kolay bir şekilde uygulanabilmesi, tasarımcıların daha esnek bir şekilde çalışmasını sağlar.

Sonuç olarak, Figma Config 2023 ile duyurulan “variables” özelliği, tasarım dünyasında tutarlılığın sağlanmasına ve daha verimli bir çalışma ortamının oluşturulmasına önemli katkılar sunmaktadır.

2. Geliştirici Modu

Figma, geliştiriciler için özel olarak tasarlanmış olan Dev Mode adlı yeni bir çalışma alanını tanıttı. Bu arayüz, tasarım ve geliştirme arasındaki boşluğu kapatmaya yardımcı olan çeşitli özellikler içermektedir. Geliştiriciler, özellikle Zeplin gibi üçüncü taraf uygulamalara ihtiyaç duymadan tasarımı kodlara dökebilecekler.

Dev Mode, Figma tarafından tanıtılan bir yenilik olarak tasarım ve geliştirme arasındaki boşluğu doldurma amacını taşımaktadır. Şu anda beta aşamasında olan Geliştirme Modu, 2023 yılına kadar tüm kullanıcılara ücretsiz olarak sunulmaktadır.

3. Geliştirmeye Hazır Arayüzleri Takip Etme

Geliştiricilerin nihai üründe uygulanması gereken tasarım öğelerini ve değişiklikleri takip etmelerine yardımcı olan kullanışlı bir özelliktir. Figma tasarım dosyanızın birden fazla bölüm veya Frame’den oluştuğu durumlarda hangilerinin geliştirmeye hazır olduğunu takip etmek için “Open in dev mode” özelliği duyuruldu.

Bu özellik, üretim aşamasına taşınmaya hazır olan öğelerin net ve düzenli bir genel bakışını sağlayarak canlı bir üründe değişikliklerin ve güncellemelerin uygulanma sürecini kolaylaştırmaya yardımcı olacaktır.

Bunun için tasarımlarınızı bir Frame içine alıp daha sonra “Convert to frame” özelliğiyle bölüme çevirdikten sonra geliştirmeye hazır olduğunu belirtebilirsiniz. Bu sayede geliştirici ekiple daha iyi bir iletişim kurmuş oluruz.

4. VS Code’da Geliştirme Yaparken Figma Dosyasını Yan Tarafa Açabilirsiniz.

Geliştiriciler, Visual Studio Code’u kullanarak kodlama yaparken tasarım dosyalarını da kolaylıkla gözden geçirebilirler. Bu, tasarım ve geliştirme arasındaki etkileşimi artırarak farklı araçlar arasında geçiş yapma ihtiyacını azaltır.

Figma for VS Code eklentisi, geliştirme ortamınızdan ayrılmadan tasarım dosyalarınızda gezinmenizi, incelemenizi, tasarımcılarla işbirliği yapmanızı, değişiklikleri takip etmenizi ve kodlama sürecini hızlandırmanızı sağlar.

5. Geliştirilmiş Auto Layout

Figma Auto Layout özelliği ilk çıktığında işimizi oldukça kolaylaştırmıştı. Ancak, yatay veya dikey hizalamada yapılabiliyor olması, bir eksiklik olarak görülüyordu.

Figma Config 2023 ile duyurulan Auto Layout Wrap özelliği, bu eksikliği gidererek kapsayıcı elemanın sonuna geldiğinde otomatik olarak başa dönmesini sağlıyor.

Kaydırma, tasarım öğelerinin metin gibi akmasını sağlar. Eğer yatay olarak düzenlenmiş bir öğe grubunuz varsa ve grup, üst sınırları için çok geniş hale gelirse, öğeler otomatik olarak bir sonraki satıra kaydırılır. Bu özellik, özellikle etiket listelerindeki etiketler veya ızgaralardaki öğeler gibi farklı miktarlarda içeriğe veya ekran boyutlarına uyum sağlaması gereken bileşenleri tasarlarken oldukça kullanışlıdır.

6. Gelişmiş Prototip Oluşturma

Figma Config 2023 ile birlikte, prototiplerinizde daha gerçekçi ve duyarlı tepkiler verebileceğiniz değişkenler, koşullar ve ifadeler kullanarak tasarımlarınıza daha fazla dinamizm ve etkileşim katabilirsiniz.

Prototiplerinizde kullanabileceğiniz değişkenler, sayılar, metin, renkler veya mantıksal değerler gibi çeşitli değerleri tutabilir. Bu değerler, prototipinizde daha dinamik etkileşimler oluşturmanıza ve değiştirmenize olanak tanır. Örneğin, bir değişken, bir düğmenin tıklama sayısını saklayabilir veya bir geçiş anahtarının mevcut durumunu belirleyebilir. Koşullar, prototiplerinizde mantıksal akışlar oluşturmanızı sağlar.

Bir değişkenin geçerli değerine bağlı olarak farklı eylemler veya sonuçlar belirleyebilirsiniz. Örneğin, “butona 5 defadan fazla tıklanırsa farklı bir ekrana geç” gibi bir koşul belirleyebilirsiniz.

İfadeler, değişkenleriniz üzerinde hesaplamalar veya dönüşümler yapmanızı sağlar. Örneğin, bir düğmeye her tıklandığında bir sayaç değişkenini artırabilir veya kullanıcı girişine bağlı olarak yeni bir renk hesaplayabilirsiniz.

--

--