Geçişi Yükle

Röle, her biri ayrı ayrı kurulması gereken üç bölümden oluşur:

  1. Figma Eklentisi için geçiş
  2. Android Studio Eklentisi için geçiş
  3. Relay Gradle Eklentisi

Ön koşullar

  • Figma Hesabı'nda oturum açmış olmanız gerekir.
  • Android Studio 2022.2.1 Flamingo veya sonraki bir sürümü yüklemeniz gerekir.
  • Java Runtime'ı yüklemiş olmalısınız.
  • Jetpack Compose 1.2 veya daha yeni bir sürüm kullanıyorsunuz.
  • Gradle Plugin 8.0 veya daha yeni bir sürümünü kullanıyorsunuz.

Relay for Figma eklentisini yükleme

Relay for Figma eklentisi, Figma'da çalışan herkesin tasarımlarına ek açıklama eklemesine ve bunu Android Studio ve Jetpack Compose kullanan geliştiricilerle paylaşmasına olanak tanır.

Relay for Figma eklentisi, Figma'nın topluluk eklentisi ticaret sitesinde yayınlandı. Eklentiyi yüklemek için:

  1. Figma'nın web sitesinde Relay for Figma eklentisi sayfasına gidin.
  2. Sayfanın sağ üst köşesinde Deneyin'i tıklayın.

    Figma eklentisi sayfasındaki "Deneyin" düğmesi
  3. Eklentiyi kullanmak isteyip istemediğinizi soran bir iletişim kutusuyla karşılaşabilirsiniz. İletişim kutusunda kuruluşunuzu seçin. Nadir durumlarda kuruluşunuz, herkese açık eklentileri devre dışı bırakabilir. Bu durumda Harici ekipler seçeneğini belirleyin.

    İletişim kutusunda "Harici ekipler" seçeneği

    Eklenti bilgileri sayfasının görüntülendiği bir Figma dosyası açılır. Eklentiyi kolayca yeniden kullanabileceğinizden emin olmak için ... simgesini tıklayın ve Kaydet'i seçin.

    Eklenti bilgileri sayfasındaki kaydet seçeneği
  4. Şimdi Çalıştır'ı tıklayın:

    Eklentiyi Figma tuvalinde çalışan şekilde görüntüleyebilirsiniz:

    Figma için röle

Android Studio için Relay eklentisini yükleme

Relay for Android Studio eklentisi, Android Studio'da çalışan geliştiricilerin Relay for Figma eklentisini kullanarak tasarım amacı bilgileriyle ek açıklamalı tasarımları içe aktarmalarına olanak tanır. Eklenti, Android Studio Plugin Marketplace'te yayınlanır. Yüklemek için:

  1. Android Studio'yu açın.
  2. Ana menüden:
    • macOS için Android Studio > Tercihler'i seçin.
    • Windows ve Linux için Dosya > Ayarlar'ı seçin.
  3. Eklentiler'i seçin.
  4. Marketplace sekmesini seçin, "Relay for Android Studio" (Android Studio için geçiş) araması yapın ve Google tarafından yayınlanan eklentiyi seçin:

    Marketplace'te Android Studio için geçiş
  5. Yükle'yi tıklayın.

  6. Yükleme tamamlandığında IDE'yi yeniden başlat'ı tıklayın.

  7. Yüklemenin başarılı olduğunu onaylamak için Tercihler veya Ayarlar'ı açın ve ardından Eklentiler'e gidin. Yüklüler bölümünde Android Studio için geçiş seçeneğini görürsünüz.

Relay Gradle eklentisini yükleme

Relay Gradle eklentisi, Relay for Figma eklentisi kullanılarak Figma'daki tasarım amacı bilgileriyle ek açıklamaya sahip tasarımların, derleme sırasında doğru şekilde koda dönüştürülmesini sağlar.

Relay Gradle eklentisi, birçok Gradle eklentisi içeren Google Maven'de yayınlanır. Android Studio, varsayılan olarak Gradle işlemlerini çağırır ve bu işlemler projenizin referansta bulunduğu bağımlılıkların indirilmesini ve yüklenmesini içerir.

Android Studio'nun ve dolayısıyla Gradle'ın kendisinin Relay Gradle eklentisini indirip yüklediğinden emin olmak için, eklentiyi projenizde, özellikle de modülünüzün dizinindeki build.gradle dosyasında bağımlılık olarak belirtmeniz gerekir. Bu genellikle app/build.gradle aralığındadır.

app/build.gradle dosyasının üst kısmında, kullanılan tüm eklentilerin listelendiği bir bölüm bulunur. Bu listeye Relay Gradle eklentisini ekleyin. Eklentinin indirilmesi ve yüklenmesiyle Gradle ilgilenir. Örnek:

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.relay' version '0.3.11'
}

Ayrıca, settings.gradle dosyanızda aşağıdaki bölümlerin bulunduğundan emin olun:

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}

Ayrıca yukarıda belirtilen yapılandırmayı içeren bir Önceden Yapılandırılmış Proje de kullanabilirsiniz.

Figma erişimini ayarlama

Relay, Figma tasarımlarınızı indirip koda dönüştürebilmesi için bir Figma kişisel erişim jetonu gerektirir. Hesabınız yoksa:

  1. Figma'yı açın ve Figma'ya giriş yapın.
  2. Dosya tarayıcısına gidin .
  3. Hesap simgenizi tıklayın ve Ayarlar'ı seçin.

    Hesap simgesinin altındaki ayarlar
  4. Kişisel erişim jetonları bölümüne ilerleyin.

  5. Bir jeton açıklaması (ör. "Geçiş") girin ve Return yazın. Bir jeton oluşturulur. Bu jetonu kopyala'yı tıklayın.

    Ayarlardaki kişisel erişim jetonları
  6. Android Studio'da, ana menüden Araçlar > Geçiş Ayarları'nı seçin.

    Figma erişim jetonunu ayarlamak için Araçlar'ın altındaki geçiş ayarları menü seçeneği
  7. Daha önce macOS'te bir Figma erişim jetonu oluşturduysanız aşağıdaki iletişim kutusunu görebilirsiniz. Bu iletişim kutusu, Android Studio'nun mevcut Figma erişim jetonunuzu kullandığını belirtir. Şifrenizi girin ve Her Zaman İzin Ver'i tıklayın.

    Anahtar zinciri sistemi iletişim kutusu
  8. Figma erişim jetonunuzu Figma Erişim Jetonu girişine yapıştırın. (İlk kez bir Figma erişim jetonu ayarlıyorsanız Mevcut Figma Erişim Jetonu girişini görebilirsiniz.)

    Figma Erişim Jetonu girişi
  9. Tamam'ı tıklayın.

Önceden yapılandırılmış projeyi indirip kurun

Önceden yapılandırılmış bir projeyi indirmek ve ayarlamak için:

  1. Proje ZIP dosyasını indirin.
  2. Sıkıştırılmış dosyayı açmak için dosyayı çift tıklayın. HelloFigma adlı bir klasör oluşturulur. Ana klasörünüze taşıyın.
  3. Android Studio'ya geri dönün. Dosya > Aç'a gidin, ana klasör klasörünüze gidin, HelloFigma'yı seçin ve 'ı tıklayın.
  4. Projeyi açtığınızda, Android Studio projeye güvenip güvenmediğinizi sorabilir. Projeye Güven'i tıklayın.

Önceden yapılandırılmış projeyi çalıştırma

Uygulamayı bir emülatörde veya cihazda çalıştırın. Boş bir ekranda "Hello, Android!" görünmesi gerekir.

Emülatördeki başlangıç durumu

Sonraki adım

Artık Relay'i kullanarak ilk tasarımlarımızı oluşturmaya hazırız.

Temel Eğitim