Una volta implementati, i contenuti della maggior parte dei componenti non sono statici, ma cambiano in base ai dati forniti a un componente. Per riflettere questo aspetto nel tuo progetto, puoi utilizzare i parametri dei contenuti. I parametri dei contenuti consentono di specificare quale parte di un progetto contiene dati, senza hardcoded sui dati effettivi.
Aggiungere un parametro dei contenuti
Nel file Figma, seleziona il componente e apri il plug-in Relay for Figma (Plugin > Relay per Figma).
Nella finestra di Figma principale, seleziona il livello Titolo con ⌘ + clic su Mac o Ctrl + clic su Windows e Linux. Poi, nel plug-in, fai clic su + accanto a "Parametri" e seleziona text-content per aggiungere un parametro per il livello.
Per modificare il nome del parametro dei contenuti testuali del titolo, inseriscilo in Nome. Per questo tutorial, inserisci Titolo.
Oltre a modificare il nome, puoi selezionare diversi tipi di proprietà o aggiungere una descrizione per generare un commento nel codice. Collabora con i tuoi sviluppatori per trovare lo schema di denominazione più adatto. I nomi dei parametri del contenuto si traducono nei nomi dei parametri nell'elemento componibile generato.
Salva la versione denominata
Ora contrassegniamo questa versione come pronta per essere importata nel codice.
- Apri il plug-in Figma Relay, se non è già aperto.
- Fai clic su Condividi con lo sviluppatore.
Nella schermata Condividi con lo sviluppatore, inserisci un nome e una descrizione per la versione.
Titolo di esempio: Hello World Card V3
Descrizione di esempio: parametri aggiunti
Aggiorna il componente in Android Studio
Aggiorniamo il componente in Android Studio.
In Android Studio, assicurati che la finestra dello strumento Progetto sia in visualizzazione Android. Fai clic con il tasto destro del mouse su
app/ui-packages/hello_card/
e fai clic su Aggiorna pacchetto UI.Fai clic su per creare di nuovo il progetto.
Se apri
app/java/com/example/hellofigma/hellocard/HelloCard.kt
, noterai che è stato aggiunto un parametro:title
. Il nome del parametro è il nome del parametro del contenuto specificato in Figma:Apri
app/java/com/example/hellofigma/MainActivity.kt
.Modifica una riga nella classe
MainActivity
per aggiungere un valore al parametrotitle
:class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { HelloFigmaTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { HelloCard(title="Balloon World!") // Change this line } } } } }
Più in basso nello stesso file, nell'anteprima del componibile, modifica una riga:
@Preview(showBackground = true) @Composable fun DefaultPreview() { HelloFigmaTheme { HelloCard(title="Balloon World!") // Change this line } }
Crea di nuovo il progetto e osserva il componente aggiornato nell'anteprima. Tieni presente che il nuovo valore parametro è ora visibile.
Esegui l'app per vedere gli stessi aggiornamenti nell'emulatore.
Evviva! Hai appreso le nozioni di base del flusso di lavoro di inoltro.
Passaggio successivo
Il tutorial di base è terminato. Hai già visto molte delle funzionalità del flusso di lavoro di inoltro, ma sono disponibili molte altre caratteristiche. Se vuoi imparare a usare funzionalità come i gestori dell'interazione, lavorare con componenti che hanno più varianti di Figma e altro ancora, vai al tutorial avanzato.
Consigliato per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Convertire i progetti in codice in Android Studio
- Apportare e propagare aggiornamenti al design
- Nozioni di base sul layout di scrittura