Önceden yapılandırılmış Figma dosyasını indirin
Figma'da bir bileşen oluşturarak başlayalım. Bu eğiticide örnek olarak mevcut bir Figma dosyasını kullanacağız. Bu dosya, resim ve başlık içeren bir otomatik düzen çerçevesi içerir. Figma hesabınıza giriş yaptığınızdan emin olun.
- Şu Figma dosyasını bilgisayarınıza indirin: HelloFigma.fig.
Figma'nın dosya tarayıcısında, fareyle Taslaklar'ın üzerine gelin. Bir + simgesi görünür. + simgesini, ardından İçe aktar... seçeneğini tıklayın ve az önce indirdiğiniz HelloFigma.fig dosyasını seçin.
İçe aktarılan dosyayı Figma'da açın.
Bileşen oluşturma
İçe aktarılan tasarımı Relay for Figma eklentisiyle kullanmak için önce bunu bir bileşene dönüştürmemiz gerekir. Merhaba Kart çerçevesini seçin ve araç çubuğundan Bileşen Oluştur'u tıklayın.
Kullanıcı Arayüzü Paketi Oluşturma
Relay for Figma eklentisi, bileşene ekstra bilgiler ekler. Böylece bileşeni kodlarında kullanabilecek geliştiricilerinizle birlikte çalışabilirsiniz.
Dosyanızda Relay for Figma eklentisini açın (Figma menüsünde: Plugins > Relay for Figma). Başlayın'ı tıklayın.
Bileşeni seçin ve Kullanıcı Arayüzü Paketi Oluştur'u tıklayın.
Kullanıcı Arayüzü Paketi seçiliyken Özet bölümüne bir açıklama ekleyin. Örneğin: "Resmi ve başlık içeriğini görüntülemek için kullanılan Merhaba Kart bileşeni"
Sonraki ekrana geçmek için iletişim kutusunun sağ alt köşesindeki Geliştiriciyle paylaş'ı tıklayın.
Geliştirici akışıyla paylaşma
Kullanıcı arayüzü paketi oluşturduğunuza göre bileşeninizi geliştirme ekibiyle paylaşmak için hazırlayabilirsiniz.
Bileşen dosyası dosyasının yeni bir adlandırılmış sürümünü oluşturun. Bileşenin adlandırılmış sürümlerinin kullanılması, istenmeyen değişikliklerin üretim bileşenlerini etkilemesini önler.
Bileşenin bu ilk sürümü için bir ad ve açıklama girip Kaydet'i tıklayın.
Daha sonra, paylaşılabilir bir bileşen bağlantısı oluşturun ve Mac'te CMD-L veya Windows'da CTRL-L tuşlarına basarak bunu panoya kopyalayın.
Sonraki adım
Artık kullanıcı arayüzü bileşeninizi Android Studio'ya aktarmaya hazırsınız.
Bu eğiticinin sonraki bölümünü tamamlamak için Android Studio'yu açın.
Android Studio'da tasarımları koda dönüştürme