In questa sezione imparerai a modificare un componente in Figma (in questo caso, a modificare la formattazione del testo) e a vedere le modifiche propagarsi nel codebase in Android Studio, basandoti sul tuo progetto precedente.
Cambiamenti nella Figma
Aggiorniamo il componente Figma. Torna al file Figma:
Seleziona il livello di testo Titolo. Nella sezione Testo, modifica lo stile in Grassetto.
Salva la versione denominata
Ora integra il componente aggiornato nel tuo codebase. Per assicurarti che gli sviluppatori utilizzino la nuova versione del componente, ripeti i passaggi per salvare una versione.
Apri il plug-in Figma Relay se non è già aperto.
Fai clic su Condividi con lo sviluppatore.
Dalla schermata Condividi con lo sviluppatore, puoi inserire un nuovo nome e una nuova descrizione nella sezione Salva la cronologia delle versioni.
Sulla tastiera, premi CMD-L su un Mac o CTRL-L su Windows per copiare il nuovo link negli appunti.
Aggiorna il codice del componente
Ora eseguiamo di nuovo l'importazione del componente:
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 seleziona Aggiorna pacchetto UI.
Attendi il completamento della barra di caricamento nell'angolo in basso a destra:
Fai clic su
per creare il progetto e visualizza il componente aggiornato nell'anteprima di app/java/com/example/hellofigma/MainActivity.kt. Nota che il testo è ora in grassetto.
Esegui l'app per visualizzare gli stessi aggiornamenti nell'emulatore.
Passaggio successivo
Ora che abbiamo aggiornato il design e visto come viene aggiornato anche il codice risultante, possiamo rivolgere la nostra attenzione all'annotazione del nostro design con parametri dei contenuti che consentono dati variabili nei nostri componenti.
Consigliato per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Parametri dei contenuti
- Convertire i progetti in codice in Android Studio