5 modi essenziali per utilizzare i vincoli di progettazione

Ricordi la buona "vecchia era del design tecnologico", quando dovevi creare interfacce - al massimo - per un PC e un Mac? Neanche io. Quell'universo sembra lontano anni luce nel mondo di oggi dipendente dallo schermo.

I lavori dei designer sono diventati esponenzialmente più difficili con l'introduzione di telefoni cellulari e tablet. Stai progettando innumerevoli adattamenti e contesti, un incessante compito di Sisifo.

Sentiamo il tuo dolore per Figma, motivo per cui abbiamo costruito il nostro strumento con una potente funzione di vincoli. Ti consente di fissare elementi del tuo design su diversi lati della loro struttura madre. Se imposti correttamente i tuoi vincoli, il tuo design verrà ridimensionato per adattarsi a qualsiasi dimensione dello schermo.

Puoi trovarli qui, nel pannello delle proprietà a destra quando selezioni una cornice:

Diverse opzioni di vincolo

I vincoli sono fantastici, ma ci vogliono un po 'per abituarsi. In Figma, ti consentiamo di fissare gli oggetti a sinistra, a destra, in alto, in basso, al centro, in scala, a sinistra e a destra o in alto e in basso. Puoi giocare con un semplice pulsante in una cornice per vedere come gli oggetti reagiscono a diversi tipi di vincoli.

Come reagisce un pulsante con vincoli diversi quando viene ridimensionato un frame

Hai bisogno di aiuto per capire come metterli in pratica? Abbiamo raccolto cinque modi in cui i vincoli possono semplificarti la vita, dal livello principiante all'intermedio.

1) Appuntare un pulsante nell'angolo

Molte interfacce utente mobili hanno pulsanti di azione situati sempre nello stesso posto. Ad esempio, le Linee guida per la progettazione dei materiali di Google favoriscono un pulsante in basso a destra (noto anche come FAB) che incoraggia l'utente a intraprendere un'azione.

Con i vincoli, è possibile impostare quel pulsante nell'angolo in basso a destra del frame principale. Ciò garantisce che il pulsante non fluttui attorno allo schermo quando le dimensioni dello schermo si espandono - rimane esattamente dove lo si desidera.

2) La magia dei componenti + vincoli

Puoi lavorare con un po 'di divertente magia del design utilizzando la funzionalità dei componenti di Figma in connessione con le griglie. I componenti (che altre applicazioni chiamano simboli) consentono di trasformare parti del progetto in istanze ripetute e speculari. Quando si apportano modifiche all'originale, le modifiche si riflettono in qualsiasi altro punto in cui è stato utilizzato quel componente. (Puoi leggere di più sui componenti qui.)

Ora, per aggiungere vincoli a questo: una volta che hai vincolato le parti chiave del tuo disegno ai lati della cornice, trasforma la cornice in un componente. Duplica la cornice per più dimensioni dello schermo. Ora, quando cambi gli attributi dell'originale, come il colore o la dimensione del testo, puoi immediatamente vederli riflessi in diverse dimensioni dello schermo.

3) La magia di vincoli + griglie

Bene, allacciati perché stiamo diventando un po 'più avanzati. Con Figma, è possibile utilizzare i vincoli per agganciare oggetti a una griglia. Ciò è particolarmente utile per qualcosa come una barra di navigazione nella parte inferiore di un'app.

Per creare una barra di navigazione flessibile in Figma, crea la cornice che funge da schermo del telefono, quindi annida la cornice della barra di navigazione nella parte inferiore dello schermo.

Impostare i vincoli della barra di navigazione su sinistra e destra e in basso. Con quel riquadro della barra di navigazione ancora selezionato, scegliere una griglia di layout dal pannello delle proprietà di destra e impostare il tipo su "allungare".

Quindi, posiziona un oggetto - come un pulsante circolare - all'interno di ciascuna colonna della griglia. Impostare i vincoli su ciascun pulsante da centrare. Quando le dimensioni dello schermo cambiano, i pulsanti si adatteranno di conseguenza. Per un tuffo ancora più profondo nelle griglie, dai un'occhiata a questo post.

4) celle della tabella

È possibile utilizzare i vincoli per rendere flessibili i riutilizzabili progetti di celle di tabella. I designer hanno spesso bisogno di celle di tabella per presentare elenchi di persone o informazioni e l'aggiunta di vincoli alla cella di base semplifica l'adattamento. Ad esempio, ho raggruppato il testo e un avatar (premendo il controllo g), e li ho vincolati al centro a sinistra della cornice. Ho quindi raggruppato il testo e un rettangolo con gli angoli arrotondati in un pulsante e l'ho vincolato al centro a destra della cornice.

Come puoi vedere, il componente ora reagisce come speri, con ogni informazione che abbraccia il lato del frame a cui appartiene, indipendentemente dalle dimensioni del frame.

5) Illustrazioni divertenti

Infine, abbiamo pensato di dare un esempio divertente di vincoli solo per i calci. Puoi aggiungere vincoli orizzontali o verticali su illustrazioni o disegni per aggiungere un po 'di umorismo in più. Puoi trasformare un hot dog in una versione slinky di se stesso o trasformare un cane che assomiglia a un hot dog in ancora più di uno. Ci abbiamo giocato per uno dei recenti compleanni del nostro designer a Figma.

Un grande ringraziamento a Chris Hamamoto, Johan Prag e Rasmus Andersson per l'aiuto e le illustrazioni per questo post.