Gestione delle varianti di progettazione

In Figma, le varianti vengono utilizzate per raggruppare diverse varianti dello stesso componente, ad esempio stati o dimensioni differenti. L'inoltro conserva le varianti di un componente quando viene tradotto in codice. In questa sezione, vedremo in che modo Relay gestisce le varianti nei design.

Punto di partenza

Inizieremo con un file Figma contenente un componente News Card con tre varianti:

• hero-item è l'articolo più importante
• article-item è un tipico articolo
• audio-item è per un articolo che ascolti, invece di leggere

Copia esempio Figma

Utilizzeremo un file Figma esistente come esempio per questo tutorial. Assicurati di aver eseguito l'accesso al tuo account Figma.

1. Scarica HelloNews.fig sul computer.

2. In Figma, vai al browser di file. Sul lato sinistro, passa il mouse sopra Bozze. Verrà visualizzata un'icona +: fai clic sull'icona +, quindi su Importa. Seleziona il file HelloNews.fig che hai appena scaricato. L'operazione può richiedere da 10 secondi a un minuto.

   

3. Apri il file importato in Figma.

Crea un pacchetto UI

Il plug-in Relay for Figma aggiunge ulteriori informazioni al componente, in modo da poter collaborare con i nostri sviluppatori che utilizzeranno il componente nel loro codice.

1. Apri il plug-in Relay for Figma nel file (nella barra dei menu: Plugin > Relay per Figma). Fai clic su Inizia.

2. Seleziona il componente e fai clic su Crea pacchetto UI.

   

3. Con il pacchetto UI selezionato, aggiungi una descrizione alla casella di riepilogo. Ad esempio: "Componente scheda di notizie destinato a visualizzare le notizie per un elenco".

   

Salva la versione denominata

Ora che hai creato un pacchetto UI, prepara il componente per condividerlo con il team di sviluppo.

1. Apri il plug-in Figma Relay, se non è già aperto.
2. Fai clic su Condividi con lo sviluppatore.
3. Dalla schermata Condividi con lo sviluppatore, puoi inserire un nuovo nome e una nuova descrizione nella sezione Salva la cronologia delle versioni.

4. Fai clic su Salva.

   Titolo di esempio: Nuova scheda iniziale

   Descrizione di esempio: prima iterazione degli articoli

Scarica il progetto Android Studio

Per la parte di questo tutorial relativa ad Android Studio, utilizzeremo un progetto Android Studio preconfigurato. Questo progetto contiene un'app che mostra articoli in formato di testo normale.

1. Scarica il file HelloNews.zip di esempio.
2. Fai doppio clic sul file per decomprimerlo, creando una cartella denominata HelloNews. Spostalo nella cartella Home.
3. Torna ad Android Studio. Vai a File > Apri, vai alla tua cartella principale, seleziona HelloNews e fai clic su Apri.
4. All'apertura del progetto, Android Studio ti chiederà se ritieni attendibile il progetto. Fai clic su Trust Project (Progetto attendibile).

Importa in Android Studio

Importiamo il componente Figma nel progetto.

1. Torna in Figma e copia l'URL del file Figma del tutorial News Card. Utilizzeremo questo URL per importare i nostri componenti. Nell'angolo in alto a destra di Figma, fai clic sul pulsante Condividi. Nella finestra di dialogo che si apre, fai clic su Copia link.

   

2. Passa al progetto HelloNews in Android Studio. Vai a File > Nuovo > Importa pacchetti UI... dalla barra dei menu di Android Studio.

   

3. Incolla l'URL del file Figma e fai clic su Avanti.

   

   

   1. Al termine del recupero del file (l'operazione potrebbe richiedere del tempo), fai clic su Fine.

   

4. Fai clic su per creare il progetto. L'operazione potrebbe richiedere circa un minuto.

   

Anteprima dell'app e del componente

1. Nella visualizzazione Android, apri app/java/com/example/hellonews/ui/home/HomeScreen.kt. Vedrai un'anteprima dell'app, che mostra diversi articoli in formato di testo normale, con notizie cartacee sopra le storie audio.

   

2. Apri app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. Questo è il codice Jetpack Compose generato per il nostro componente Figma. Dall'anteprima, possiamo vedere che tre varianti del componente NewsCard sono state tradotte da Figma al codice. Diamo un'occhiata più da vicino al codice.

   

3. L'enumerazione View ci consente di scegliere la variante da utilizzare per questo componente. Il nome dell'enum e i suoi valori sono stati derivati dalle varianti del nostro componente Figma. Questo viene utilizzato nel parametro view del nostro componibile NewsCard.

   

4. La componibile NewsCard è stata generata dal pacchetto UI. Include un parametro di tipo View, che imposta la variante della scheda di notizie per instaurare.

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * This composable was generated from the UI Package 'news_card'.
   * Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem
   ) {...}
   
   

Successivo

Non siamo ancora pronti a utilizzare NewsCard. Il componente non sa come mostrare diverse notizie, ma solo la stessa hardcoded in Figma. Quindi, se aggiungessimo il componente ora, otterremmo solo la stessa notizia ripetuta. Dobbiamo trovare un modo per specificare quali parti di NewsCard devono essere riempite con dati dinamici.

Parametri dei contenuti

In questa sezione aggiungeremo i parametri dei contenuti al componente NewsCard.

Consigliato per te

• Nota: il testo del link viene visualizzato quando JavaScript è disattivato
• Parametri dei contenuti
• Scorri
• Utilizzare Scrivi nelle visualizzazioni