Geçişi Yükle

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

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

Ön koşullar

  • Bir Figma Hesabında oturum açmış olmanız gerekir.
  • Android Studio 2022.2.1 Flamingo veya sonraki bir sürümü yüklemiş olmalısınız.
  • Java Çalışma Zamanı'nı yüklediniz.
  • Jetpack Compose'un 1.2 veya sonraki sürümünü kullanıyorsunuz.
  • Gradle Plugin 8.0 veya sonraki bir sürümü kullanıyorsunuz.
ziyaret edin.

Relay for Figma eklentisini yükleme

Relay for Figma eklentisi, Figma'da çalışan herkesin Android Studio ve Jetpack Compose'u kullanan geliştiricilerle paylaşacağım.

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

  1. Figma'nın Relay for Figma eklentisi sayfasına gidin. web sitesi.

  2. Sayfanın sağ üst kısmında 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. kuruluşunuzu seçin. Nadiren de olsa kuruluşunuz genel eklentileri devre dışı bırakır. Öyleyse Harici ekipler seçeneğini belirleyin.

    İletişim kutusundaki harici ekipler seçeneği

    Eklenti bilgileri sayfasının gösterildiği bir Figma dosyası açılır. Sonraki slayta geçin ... bağlantısını tıklayın ve eklentiyi kolayca yeniden kullanabileceğinizden emin olmak için Kaydet'i seçin.

    Eklenti bilgileri sayfasındaki Kaydet seçeneği

  4. Ardından Çalıştır'ı tıklayın:

    Figma zemininde çalışan eklentiyi görüntüleyebilirsiniz:

    Figma için geçiş

Relay for Android Studio eklentisini yükleme

Relay for Android Studio eklentisi, Android Studio'da çalışan geliştiricilere olanak tanır. Relay for Figma eklentisine geçin. Eklenti, Android Studio eklentisinde yayınlanmış olmalıdır. pazar yeri. Yüklemek için:

  1. Android Studio'yu açın.
  2. Ana menüden:
    • macOS için Android Studio > Tercihler.
    • Windows ve Linux için Dosya > Ayarlar.
  3. Eklentiler'i seçin.

  4. Marketplace sekmesini seçin ve “Relay for Android Studio” ifadesini arayın ve Google tarafından yayınlanan eklentiyi seçin:

    Pazar yerinde Android Studio'ya 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'i açın veya Ayarlar'ı, ardından Eklentiler'e gidin. Relay for Android"i göreceksiniz. Studio'yu indirin.

Relay Gradle eklentisini yükleyin

Relay Gradle eklentisi, Figma'daki tasarımların tasarım açıklamasıyla birlikte gösterilmesini sağlar Relay for Figma eklentisi kullanılarak niyet bilgilerinin doğru şekilde koda ekleyebilirsiniz.

Relay Gradle eklentisi, aşağıdakileri içeren bir sunucu olan Google Maven'de yayınlanır: birçok Gradle eklentisidir. Android Studio, varsayılan olarak Gradle işlemlerini çağırır ve Bu işlemler, kullandığınız her türlü bağımlılığın indirilmesi ve yüklenmesini içerir. müzakere tekniği de eklediniz.

Android Studio'nun ve buna bağlı olarak Gradle'ın indirebileceği Relay Gradle eklentisini yüklediğinde eklentiyi bağımlılık olarak belirtmeniz gerekir projenizde, özellikle de modülünüzün build.gradle dosyasında dizin. Bu saat genellikle app/build.gradle olur.

app/build.gradle dosyasının üst tarafında tüm emin olmanız gerekir. Bu listede Relay Gradle eklentisini ekleyin. Gradle işleyicileri indirme ve yükleme. Örnek:

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

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

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

Ayrıca, son 30 güne ait yapılandırmanın yer aldığı bir Önceden Yapılandırılmış Proje dikkat edin.

Figma erişimini ayarlayın

Relay, Figma tasarımları yapar ve bunları koda dönüştürür. Hesabınız yoksa:

  1. Figma'yı açıp 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 gidin.

  5. "Geçiş" gibi bir jeton açıklaması girin ve Return yazın. Jeton elde edilir. Copy this token (Bu jetonu kopyala) seçeneğini tıklayın.

    Ayarlardaki kişisel erişim jetonları

  6. Android Studio'da ana menüden Araçlar > Geçiş Ayarları.

    Figma erişim jetonunu ayarlamak için Araçlar bölümündeki geçiş ayarları menü seçeneği

  7. macOS'te daha önce Figma erişim jetonu oluşturduysanız iletişim kutusu açılır. Bu iletişim kutusu, Android Studio'nun mevcut Figma erişim jetonunuz. Şifrenizi girin ve Her zaman İzin ver.

    Anahtar zinciri sistem iletişim kutusu

  8. Figma erişim jetonunuzu Figma Access Token girişine yapıştırın. ( bu, ilk kez Figma erişim jetonu oluşturduğunuzda bir Mevcut Figma Erişim Jetonu girişine dokunun.)

    Figma Erişim Jetonu girişi

  9. Tamam'ı tıklayın.

Önceden yapılandırılmış projeyi indirme ve ayarlama

Ö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. Bu işlemle HelloFigma'yı seçin. Dosyayı ana klasörünüze taşıyın.
  3. Android Studio'ya geri dönün. Dosya > Aç, evinize gidin HelloFigma'yı seçin ve Open'ı (Aç) tıklayın.
  4. Projeyi açtığınızda Android Studio, belirler. Projeye Güvenin'i tıklayın.
ziyaret edin.

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

Uygulamayı bir emülatörde veya cihazda çalıştırın. "Hello, Android!" (Merhaba, Android) mesajını görürsünüz. boş ekran.

Emülatördeki başlangıç durumu

Sonraki adım

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

Temel Eğitim

ziyaret edin.