Figma, tasarımcılar ve geliştiriciler arasındaki iletişim engelini aşmaya yardımcı olan işbirliği odaklı bir arayüz tasarım aracıdır.
Bu kılavuz, Figma ile nasıl işbirliği yapacağınızı açıklar.
Erişim
- Access the shared link: You can access the project’s Figma file here.
- Oturum açın: Henüz oturum açmadıysanız, Figma sizden oturum açmanızı isteyecektir.
Geliştirici modu ve ayrılmış bir çerçeveyi seçme yeteneği gibi ana özellikler yalnızca oturum açmış kullanıcılara sunulur.
Bir hesabınız olmadan etkili bir şekilde işbirliği yapamazsınız.
Figma yapısı
On the left sidebar, you can access the different pages of Twenty’s Figma. Bu şekilde organize edilmişlerdir:
- Bileşenler sayfası: Bu, ilk sayfadır. Tasarımcı, tasarım dosyası boyunca kullanılan yeniden kullanılabilir tasarım öğelerini oluşturmak ve organize etmek için kullanır. Örneğin, düğmeler, simgeler, semboller veya diğer herhangi bir yeniden kullanılabilir bileşen. Bu, tasarımda tutarlılığı sağlamak amacıyla hizmet eder.
- Ana sayfa: İkinci sayfa ana sayfadır ve projenin tam kullanıcı arayüzünü gösterir. You can press Play to use the full app prototype.
- Özellikler sayfaları: Diğer sayfalar genellikle devam eden özelliklere adanmıştır. Uygulama veya web sitesinin belirli özelliklerinin veya modüllerinin tasarımlarını içerir. Genellikle hala devam etmektedirler.
Kullanışlı İpuçları
Yalnızca-okuma erişimiyle tasarımı düzenleyemezsiniz, ancak tasarımları koda dönüştürmek için kullanışlı olan tüm özelliklere erişebilirsiniz.
Geliştirici modunu kullan
Figma’nın Geliştirici Modu, tasarım ve geliştirme arasındaki boşluğu doldurarak, kolay tasarım gezintisi, etkili varlık yönetimi, verimli iletişim araçları, araç kutusu entegrasyonları, hızlı kod parçacıkları ve önemli katman bilgileri ile geliştiricilerin üretkenliğini arttırır. Geliştirici Modu hakkında daha fazla bilgiyi buradan öğrenebilirsiniz.
Tasarım özelliklerini görmek, CSS kopyalamak ve varlıklara erişmek için araç çubuğunun sağ kısmında, “Geliştirici” moduna geçiş yapın.
Prototipi kullan
Click on any element on the canvas and press the “Play” button at the top right edge of the interface to access the prototype view. Prototip modu, tasarımla nihai ürünmüş gibi etkileşim kurmanızı sağlar. Ekranlar arasındaki akışı gösterir ve düğmeler, bağlantılar veya menüler gibi arayüz öğelerinin etkileşim sırasında nasıl davrandığını gösterir.
- Geçişler ve animasyonları anlama: Prototip modunda, bir tasarımcı tarafından ekranlar veya UI öğeleri arasında eklenen herhangi bir geçişi veya animasyonu görebilir, geliştiricilere hedeflenen davranış ve stille ilgili net görsel talimatlar verir.
- Uygulama açıklaması: Bir prototip aynı zamanda belirsizlikleri azaltmaya da yardımcı olabilir. Geliştiriciler, belirli öğelerin işlevselliği veya görünümü hakkında daha iyi bir anlayış kazanmak adına onunla etkileşime geçebilirler.
Figma platformunu öğrenmek ile ilgili daha kapsamlı detaylar ve rehberlik için resmi Figma Dokümantasyonu sayfasını ziyaret edebilirsiniz.
Mesafeleri ölç
Select an element, hold Option key (Mac) or Alt key (Windows), then hover over another element to see the distance between them.
VSCode için Figma uzantısı (Önerilir)
Figma for VS Code ile tasarım dosyalarını gezebilir ve inceleyebilir, tasarımcılarla işbirliği yapabilir, değişiklikleri takip edebilir ve uygulama hızını artırabilirsiniz - tüm bunları metin düzenleyicinizden ayrılmadan yapabilirsiniz.
Önerilen uzantılarımızın bir parçasıdır.
İşbirliği
- Yorumları Kullanarak: Araç çubuğunun sol kısmındaki balon simgesine tıklayarak yorum yapma özelliğini kullanabilirsiniz.
- İmleç sohbeti: Figma’nın güzel bir özelliği İmleç sohbetidir. Eğer bir başkasının sizinle aynı anda Figma’yı kullandığını görürseniz, bir mesaj göndermek için Mac’te
; tuşuna, Windows’ta ise / tuşuna basın.
