In questo articolo discuteremo delle impostazioni di base del progetto in Figma, ovvero tutto ciò che devi sapere prima di iniziare a progettare. Spiegheremo cosa sono i Frame, la griglia di layout e i Righelli. Continua a leggere per scoprire di più.
Prima di tutto, devi scegliere un’area della Canvas per creare i tuoi design. Questo è ciò per cui serve lo strumento Frame. Lo troverai nella Toolbar. Dopo aver attivato lo strumento Frame, hai alcune opzioni per creare un frame.
Dopo aver aggiunto e selezionato un frame, hai accesso ad esso nel pannello Proprietà.
a) Posizione della Canvas (X e Y) – qui puoi specificare la posizione del frame nella Canvas sugli assi orizzontale (X) e verticale (Y).
b) Dimensioni dell’oggetto (Larghezza e Altezza) – qui puoi cambiare la dimensione del frame
c) Costruire proporzioni – Ti consente di mantenere le proporzioni del frame durante il ridimensionamento. In questo modo puoi cambiare l’altezza o la larghezza del frame, e il secondo parametro si adatterà automaticamente.
d) Ridimensiona per adattare – questa funzione ti consente di ridimensionare il frame per adattarlo ai suoi contenuti.
Consiglio utile: Puoi anche cambiare manualmente la dimensione del frame: afferra il bordo o l’angolo del frame (il cursore si trasformerà in una doppia freccia nera), quindi trascina per ottenere la dimensione preferita.
e) Ritratto e Paesaggio – qui puoi cambiare l’orientamento del tuo frame in verticale o orizzontale
f) Rotazione – ti consente di regolare l’angolo di un frame
g) Raggio degli angoli – grazie a questa funzione puoi arrotondare l’angolo di un frame per creare bordi più morbidi
h) Angoli indipendenti – l’impostazione degli angoli indipendenti ti consente di regolare il raggio degli angoli per ogni angolo.
i) Clip Contenuto – ti permetterà di nascondere eventuali oggetti che si estendono oltre i confini del frame
j) Layout automatico – ti consente di creare frame reattivi
k) Griglie di layout – questa funzione aiuta a creare un’interfaccia utente strutturata
l) Riempimento – utilizzando questa opzione potrai riempire il tuo frame con colore, gradiente o foto
m) Tratto – aiuta ad aggiungere tratti a un frame. Puoi anche utilizzare le impostazioni avanzate del tratto che si trovano sotto l’icona dei puntini di sospensione.
n) Effetti – qui puoi aggiungere un’ombra o sfocature a un Frame. Clicca sull’icona delle impostazioni degli effetti per regolare le impostazioni dell’ombra.
o) Esporta – qui puoi esportare il tuo frame nei seguenti formati: PNG, JPG, SVG e PDF.
Al di sopra di ogni frame nella Canvas, viene visualizzato il suo nome. Per cambiarlo, clicca su di esso due volte. Puoi copiare i frame insieme ai loro contenuti e incollarli nella Canvas quante volte vuoi.
Compito.3.1
Inizia a lavorare sul progetto scegliendo la giusta dimensione di un frame. Consiglio utile: Se non sai quale dimensione dovrebbe avere il tuo frame, una buona scelta sarebbe utilizzare una delle dimensioni di schermo più popolari. Vai a https://gs.statcounter.com/screen-resolution-stats per ulteriori informazioni.In questo tutorial progetteremo un’app mobile per e-commerce, quindi selezioniamo una delle risoluzioni più frequentemente utilizzate per gli smartphone – 360×640 px.
Prepareremo insieme 3 progetti
Dopo aver aggiunto un frame, duplicalo immediatamente e nomina correttamente ogni schermo, in modo da mantenere il file organizzato.
La griglia di layout è un sistema di linee orizzontali e verticali (colonne o righe) che ti aiutano a mantenere gli elementi precisamente allineati nei tuoi frame. Una griglia impostata correttamente renderà sicuramente il tuo lavoro più facile e accelererà l’intero processo di design. Ci sono due modi per impostare la griglia di layout nel tuo design:
Consiglio utile: Se sei un designer alle prime armi, ti consigliamo di applicare una griglia di layout a qualsiasi progetto. Non c’è niente di peggio di uno spazio di lavoro completamente vuoto.
Puoi aggiungere una griglia di layout a un frame attivo nel pannello Proprietà. Hai 3 opzioni: griglia, colonne, righe. Puoi scegliere alcune opzioni contemporaneamente.
Puoi regolare le impostazioni di ogni griglia nel pannello delle impostazioni della griglia di layout. Puoi attivare o disattivare la visibilità della griglia in qualsiasi momento cliccando sull’icona dell’occhio.
Consiglio utile: Se non sai quale griglia di layout scegliere nel tuo progetto, puoi utilizzare il plugin Grid System, che lo farà per te.
Compito 3.2. Imposta la griglia di layout nel tuo progetto. Per le esigenze di questo progetto, abbiamo selezionato Colonne e impostato i seguenti valori:
I righelli sono un’altra funzione utile che ti aiuterà ad allineare gli elementi nel file e mantenerlo in ordine. Per attivare la vista dei righelli, clicca sul menu principale, poi Vista e Righelli.
I righelli possono essere visti in alto e a sinistra della Canvas. Con questa funzione, puoi creare linee verticali e orizzontali (guide) – clicca e tieni premuto il righello scelto, quindi sposta il cursore nell’area della Canvas. Apparirà una sottile linea rossa, che puoi spostare. Puoi creare quante più guide vuoi. Puoi facilmente eliminare le linee non necessarie – basta selezionare la linea (la linea scelta diventerà blu), e poi cliccare su Elimina.
Compito 3.3. Sperimenta con l’aggiunta di righelli. Saranno utili quando allinei gli elementi.
Hai appena appreso le impostazioni di base del progetto in Figma. Leggi anche: Chat bot assistiti da AI.
Se ti piace il nostro contenuto, unisciti alla nostra comunità di api operose su Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.
Un designer grafico e UX che trasmette nel design ciò che non può essere espresso a parole. Per lui, ogni colore, linea o font utilizzato ha un significato. Appassionato di design grafico e web.
Quando si tratta di intelligenza artificiale nella produzione musicale, è migliore nella co-creazione e, in…
Nell'articolo di oggi, tratteremo il tema della cooperazione tra il Product Owner e lo Scrum…
Ogni leader ha obiettivi come costruire un team che fornisca risultati adeguatamente elevati, raggiungere gli…
Le campagne pubblicitarie sui social media, il contatto diretto durante gli eventi del settore, l'offerta…
Diverse eventi più piccoli compongono uno Sprint in Scrum. Gli Sprint, a loro volta, formano…
I destinatari sempre più spesso si rivolgono ai materiali video. Le forme scritte diventano meno…