התקנת הממסר

הממסר מורכב משלושה חלקים, שאת כל אחד מהם צריך להתקין בנפרד:

  1. שרת ממסר לפלאגין Figma
  2. שרת ממסר לפלאגין של Android Studio
  3. פלאגין Relay Gradle

דרישות מוקדמות

  • אתם צריכים להיות מחוברים לחשבון Figma.
  • התקנת את Android Studio מגרסה 2022.2.1 Flamingo ואילך.
  • התקנתם את Java Runtime.
  • אתם משתמשים ב-Jetpack פיתוח נייטיב בגרסה 1.2 ואילך.
  • במכשיר שלך מותקנת גרסה 8.0 ואילך של Gradle Plugin.

התקנת הפלאגין Relay for Figma

הפלאגין Relay for Figma מאפשר לכל מי שעובד ב-Figma להוסיף הערות ותשתפו אותו עם מפתחים שמשתמשים ב-Android Studio וב-Jetpack פיתוח נייטיב.

הפלאגין Relay for Figma פורסם בזירת המסחר של יישומי הפלאגין מהקהילה של Figma. כדי להתקין את הפלאגין:

  1. עוברים אל הדף של הפלאגין Relay ל-Figma ב-Figma האתר.
  2. בפינה השמאלית העליונה של הדף, לוחצים על אני רוצה לנסות.

    לחצן 'התנסות' בדף הפלאגין של Figma
  3. יכול להיות שתוצג תיבת דו-שיח שבה תתבקשו לאשר אם אתם רוצים להשתמש בפלאגין. ב בוחרים את הארגון. במקרים נדירים, הארגון להשבית יישומי פלאגין ציבוריים. אם כן, צריך לבחור באפשרות צוותים חיצוניים.

    אפשרות של צוותים חיצוניים בתיבת הדו-שיח

    ייפתח קובץ Figma שבו מוצג דף המידע של הפלאגין. לוחצים על ... ובוחרים באפשרות Save (שמירה) כדי להבטיח שאפשר יהיה להשתמש שוב בפלאגין בקלות.

    אפשרות השמירה בדף המידע של הפלאגין
  4. עכשיו לוחצים על Run:

    אפשר לראות את הפלאגין פועל באזור העריכה של Figma:

    שרת ממסר ל-Figma

התקנת הפלאגין Relay ל-Android Studio

הפלאגין Relay ל-Android Studio מאפשר למפתחים שעובדים ב-Android Studio כדי לייבא עיצובים שסומנו עם מידע על כוונת רכישה של עיצוב באמצעות את הפלאגין Relay for Figma. הפלאגין פורסם בפלאגין Android Studio Marketplace. כדי להתקין:

  1. פותחים את Android Studio.
  2. מהתפריט הראשי:
    • ב-macOS, בוחרים באפשרות Android Studio > העדפות.
    • עבור Windows ו-Linux, בוחרים בקובץ > הגדרות.
  3. בוחרים באפשרות Plugins (יישומי פלאגין).
  4. בוחרים בכרטיסייה Marketplace, מחפשים את "Relay for Android Studio" ואז בוחרים את הפלאגין שפורסם על ידי Google:

    שרת ממסר ל-Android Studio בזירת המסחר
  5. לוחצים על התקנה.

  6. בסיום ההתקנה, לוחצים על הפעלה מחדש של סביבת פיתוח משולבת (IDE).

  7. כדי לוודא שההתקנה הצליחה, פותחים את העדפות או Settings (הגדרות) ולאחר מכן עוברים אל Plugins (יישומי פלאגין). אמורה להופיע ההודעה שרת ממסר ל-Android גרסת Studio בקטע 'מתקינים'.

התקנת הפלאגין של Relay Gradle

הפלאגין Relay Gradle מבטיח שהעיצובים ב-Figma כוללים הערות עם עיצוב פרטי Intent שנעשה בהם שימוש בפלאגין Relay for Figma מומרים בצורה נכונה ל- במהלך ה-build.

הפלאגין Relay Gradle פורסם ב-Google Maven, שרת שמכיל יישומי פלאגין רבים של Gradle. Android Studio מפעיל פעולות Gradle כברירת מחדל הפעולות האלה כוללות הורדה והתקנה של יחסי תלות הפניות לפרויקט.

כדי להבטיח שמערכת Android Studio, ובאמצעותה, Gradle עצמה, מורידים מתקין את הפלאגין Relay Gradle, צריך לציין את הפלאגין כתלות בפרויקט, במיוחד בקובץ build.gradle שבמודול בדרך כלל משתמשים בapp/build.gradle.

בחלק העליון של הקובץ app/build.gradle מופיע קטע שמפרט את כל יישומי הפלאגין בשימוש. כדאי להוסיף את הפלאגין Relay Gradle לרשימה הזו, ואת נקודות האחיזה של Gradle מורידים ומתקינים אותו. לדוגמה:

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

בנוסף, חשוב לוודא שבקובץ settings.gradle מופיע הקטע הבא:

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

אפשר גם להשתמש בפרויקט מוגדר מראש, שכולל את ההגדרות שהוזכרו למעלה.

הגדרת גישה ל-Figma

שרת הממסר דורש אסימון גישה אישית של Figma כדי שיוכל להוריד את Figma מעצבים וממירים אותם לקוד. אם עדיין אין לכם חשבון:

  1. פותחים את Figma ומתחברים לחשבון ב-Figma.
  2. עוברים אל מנהל הקבצים והתיקיות .
  3. לוחצים על סמל החשבון ובוחרים באפשרות הגדרות.

    הגדרות מתחת לסמל החשבון
  4. גוללים למטה לקטע אסימוני גישה אישיים.

  5. מזינים תיאור של האסימון, לדוגמה: 'Relay' (ממסר) ומקלידים Return. אסימון הוא שנוצר. לוחצים על העתקת האסימון הזה.

    אסימוני גישה אישיים בהגדרות
  6. ב-Android Studio, בתפריט הראשי, בוחרים כלים > הגדרות של הממסר.

    האפשרות בתפריט ההגדרות של שרת הממסר בקטע 'כלים' להגדרת אסימון גישה של Figma
  7. אם הגדרתם בעבר אסימון גישה ל-Figma ב-macOS, יכול להיות שתראו את בתיבת הדו-שיח הבאה. תיבת הדו-שיח הזו מראה ש-Android Studio משתמש אסימון הגישה הקיים ב-Figma. מזינים את הסיסמה ולוחצים על תמיד אישור.

    תיבת דו-שיח של מערכת 'צרור מפתחות'
  8. מדביקים את אסימון הגישה של Figma בקלט של Figma Access Token. (אם זו לא הפעם הראשונה שאתם מגדירים אסימון גישה של Figma, יכול להיות שתראו קלט אסימון גישה קיים של Figma).

    קלט של אסימון גישה ב-Figma
  9. לוחצים על אישור.

הורדה והגדרה של הפרויקט שהוגדר מראש

כדי להוריד ולהגדיר פרויקט מוגדר מראש:

  1. מורידים את קובץ ה-ZIP של הפרויקט.
  2. לוחצים לחיצה כפולה על הקובץ כדי לפתוח את הדחיסה, והפעולה הזו יוצרת תיקייה בשם HelloFigma. מעבירים אותו לתיקיית הבית.
  3. חוזרים אל Android Studio. עוברים אל קובץ > פתיחה, ניווט לבית בוחרים בתיקייה HelloFigma ולוחצים על Open.
  4. כשתפתחו את הפרויקט, יכול להיות שמערכת Android Studio תשאל אתכם אם אתם סומכים על פרויקט. לוחצים על Trust Project.

הפעלת הפרויקט שהוגדר מראש

מפעילים את האפליקציה על אמולטור או מכשיר. ההודעה "שלום, Android!" אמורה להופיע תוך שימוש מסך ריק.

מצב ההתחלה באמולטור

השלב הבא

עכשיו אנחנו מוכנים ליצור את העיצובים הראשונים באמצעות Relay.

מדריך בסיסי