Quando parliamo di design, in particolare di prototipi o di mockup di un'applicazione o di un sito web, Figma è lo strumento più popolare e ampiamente utilizzato dai designer e dai freelance.
Tuttavia, può succedere che comportamenti involontari appaiano quando si lavora su Figma, facendoci perdere molto tempo e rovinando il nostro design.
Mentre stavo lavorando al prototipo del mio nuovo sito web, che dovrebbe essere lanciato molto presto (www.boutvalentin.com), purtroppo è emerso un problema. Ogni volta che ho aumentato le dimensioni del mio frame, alcuni elementi al suo interno hanno iniziato a crescere e spostarsi. Questo problema mi è capitato anche utilizzando il meccanismo di raggruppamento degli elementi.
Per correggere questo problema, è necessario in realtà prestare attenzione al modo in cui posizioniamo gli elementi all'interno di questi frame.
In effetti, di default, gli elementi vengono posizionati in funzione della distanza dal top e dalla sinistra del loro genitore. In altre parole, l'origine (X,Y) degli elementi corrisponde all'angolo superiore sinistro del nostro frame.
Utilizzando questi vincoli, quando aumentiamo le dimensioni del nostro frame o del nostro gruppo, il nostro elemento rimarrà nella sua posizione precedentemente definita.
Il problema si presenta quando i nostri elementi non sono vincolati all'angolo superiore sinistro del loro genitore.
Gli elementi posizionati secondo diversi vincoli avranno comportamenti diversi e variabili. Ad esempio, un elemento posizionato utilizzando il posizionamento scaled si ingrandirà o si espanderà in base al modo in cui modifichiamo il suo genitore.
Per comprendere meglio il problema, dobbiamo tenere a mente che questi vincoli determinano la posizione di ciascun elemento in funzione del suo genitore. In questo contesto, un oggetto posizionato con vincoli del tipo centre collocherà l'elemento al centro del suo genitore. Se modifichiamo le dimensioni del nostro frame, il centro di questo genitore si sposterà, influenzando la posizione dei suoi elementi figli.
In sintesi, per evitare che i vostri elementi si muovano in maniera inaspettata, devi utilizzare vincoli il più coerenti con il modo in cui stai ingrandendo il genitore. Utilizzando vincoli legati all'angolo superiore sinistro, potrai modificare le dimensioni del genitore superiormente, inferiormente o lateralmente senza rischiare di vedere i tuoi elementi allungati o spostati in un modo strano.
Altri vincoli possono essere utili se vuoi posizionare questi elementi in funzione di un altro punto del loro genitore. Ma per default, faresti meglio a utilizzare il vincolo dell'angolo superiore sinistro.
Spero che questo articolo ti abbia aiutato a migliorare il tuo design e a comprendere meglio i vincoli e il posizionamento degli elementi in Figma.
Se hai bisogno di un sito web, consulenza, audit in sicurezza informatica, DevOps o sviluppo web, non esitare a contattarmi e a consultare il mio sito web.
Questo articolo è disponibile in altre lingue:
Top comments (0)