Come importare icone e schermate di Google Material in Adobe XD

Italo Sannino è immerso nella creatività digitale da oltre 20 anni, da quando si è diplomato dall’Accademia di Belle Arti di Napoli, dove ora insegna progettazione delle interfacce utente. Nel 1997 fonda “Geko”, una piccola agenzia di New Media, che è diventata il suo campo di sperimentazione personale. Grazie al progetto Adobe Guru e alla partecipazione in veste di professionista nella community di Adobe, ha collaborato strettamente alla metodologia, alla progettazione e alla pianificazione di interfacce utilizzabili e di strumenti Adobe pertinenti ed è recentemente è stato nominato Wacom Ambassador. 

Puoi vedere cosa crea con la sua creatività qui.

Google Material è un sistema di progettazione sviluppato da Google principalmente per il sistema operativo Android. La composizione tipografica è fondamentale nell’utilizzo dei sistemi di progettazione. Per assicurarti che le progettazioni funzionino correttamente, attiva i font di riferimento dalle librerie di Adobe Fonts.

Per attivare il font corretto, segui questi passaggi:

Preparazione all’importazione dei kit per interfaccia utente

Quando hai ottenuto il file con gli elementi dell’interfaccia utente di Google Material, puoi importarlo senza problemi nella progettazione o in un nuovo file in due modi, a seconda di quali esigenze devi soddisfare. Puoi importare un singolo elemento alla volta o tutte le tavole da disegno che a loro volta contengono tutti gli elementi (inclusi i componenti).

Importazione di singoli elementi nella progettazione

L’innegabile vantaggio offerto da questo metodo è che avrai il totale controllo sulle risorse e sulla dimensione del file.

Importazione di più tavole da disegno nella progettazione

Utilizzo dei componenti per importare più tavole da disegno

La possibilità di incollare più tavole da disegno è conveniente e potente, ma dalla versione più recente, Adobe XD utilizza il modello dei componenti collegati. Non è possibile modificare quelle parti dell’interfaccia utente che sono state convertite in un componente nel file di Google, a meno che non lo scolleghi dall’origine o lo modifichi dal file di origine. In questo caso, prova a scollegare un componente dalla sua origine.

Oggi come oggi, la condivisione dei file tra più persone che lavorano allo stesso progetto non è un evento raro. Questo pertiene, ovviamente, anche al file di XD del kit di interfaccia utente di Google. In questi casi, i componenti collegati mostrano tutta la loro efficacia.

I componenti collegati ti consentono di avere un solo file di origine (una guida di stile o un sistema di progettazione, come in questo caso) con tutti gli elementi nell’interfaccia utente del progetto e di usarli in altri file di Adobe XD.

Quando nel tuo file di XD usi un componente collegato proveniente dal file di origine, riceverai una notifica quando uno di questi componenti è cambiato, potrai visualizzare in anteprima le modifiche e decidere se accettarle o rifiutarle.

Questa potente funzione non solo semplifica il tuo flusso di lavoro ma garantisce la coerenza della tua UI/UX, che probabilmente è l’aspetto più importante di questo tipo di lavoro.

Utilizzo del comando Crea componente locale

• Attiva il pannello Risorse premendo Comando+Maiusc+Y (Mac) o Ctrl+Maiusc+Y (Windows).
• Seleziona il componente (o i componenti) da convertire quindi fai clic tenendo premuto il tasto Ctrl (Mac) o premi il tasto destro del mouse (Windows) e seleziona Crea componente locale dal menu di scelta rapida.