Adobe XD, gli aggiornamenti di luglio: Design Tokens, Stacks e Scroll Groups

L’aggiornamento di Adobe XD di luglio è ricco di nuove funzionalità.

Esploriamo le novità!

Stacks
Gli stack sono un nuovo modo di lavorare con gruppi e componenti in XD. Simile a Flexbox in CSS, gli stack sono colonne o righe di oggetti con una spaziatura impostata tra di loro. Quando aggiungi, rimuovi, riordini o ridimensioni oggetti in una pila, tutti gli altri oggetti si regolano automaticamente, mantenendo la spaziatura.

Quando crei una stack, XD rileva la direzione della pila (verticale o orizzontale). Puoi regolare la spaziatura tra gli oggetti, distribuendo gli oggetti in modo uniforme. Passa il mouse sullo spazio tra gli oggetti in una pila e premi S per regolare uno spazio o premi Maiusc + S per regolare equamente tutti gli spazi.
Inutile aggiungere troppe parole il video rappresenta meglio quello che c’è da sapere su questo aggiornamento.

Gruppi di scorrimento
I gruppi di scorrimento fanno sì che i tuoi prototipi si comportino come siti Web e app live. Puoi trasformare qualsiasi parte del disegno in un gruppo di scorrimento e impostarlo per scorrere verticalmente, orizzontalmente o in entrambe le direzioni. Quando crei un gruppo di scorrimento, vedrai delle maniglie blu sull’oggetto che puoi utilizzare per regolare l’area di scorrimento visibile. Meglio affidarsi nuovamente al video per capire meglio con cosa abbiamo a che fare.

Qui puoi trovare un file demo.

Design Tokens

Ora puoi aggiungere nomi personalizzati a colori e stili nel pannello Risorse che vengono pubblicati automaticamente in file CSS scaricabili per gli sviluppatori. Gli sviluppatori possono fare riferimento al file CSS nel loro codice e se modifichi uno stile nel tuo progetto, possono semplicemente prendere il CSS aggiornato senza dover aggiornare il codice manualmente.

Il concetto di design token è stato introdotto per la prima volta da Jina Anne come parte del Lightning Design System. I token di progettazione sono un modo semplice per fare riferimento a decisioni di progettazione visiva, come un colore o lo stile del corpo del testo, che possono essere utilizzati nel codice. In Adobe, utilizziamo i token di progettazione in Spectrum, il nostro sistema di progettazione, ad esempio utilizzando “button-cta-background-color” per descrivere il colore blu utilizzato nelle pagine Web di Adobe.com.

Quando crei o aggiorni un collegamento “Condividi per sviluppo”, il collegamento includerà un file CSS scaricabile con tutti i tuoi token rappresentati.

Ma guardiamoci un bel video al riguardo!

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on email
Email

What are you looking for?

Tell us something

Questo sito o gli strumenti terzi da questo utilizzati si avvalgono di cookie necessari al funzionamento ed utili alle finalità illustrate nella cookie policy. Se vuoi saperne di più o negare il consenso a tutti o ad alcuni cookie, consulta la cookie policy.