Il mondo del software di progettazione grafica è enorme e ha molta concorrenza. Figma è uno strumento di progettazione che sta correndo al primo posto per i progettisti di UX/UI in tutto il mondo. Ma cosa sai di questo strumento intuitivo?
Sebbene sia semplice, c'è anche una curva di apprendimento se sei abituato ad altri strumenti di progettazione. Diamo un'occhiata a Figma e a come usarlo. Benvenuti in Figma 101.
Cos'è Figma?
Se hai lavorato come grafico o web designer negli ultimi anni, probabilmente hai sentito parlare di Figma. Potresti anche averlo usato.
Figma è uno strumento di progettazione ed è diventato costantemente uno dei preferiti dai designer digitali, superando opzioni come Adobe XD, Adobe Photoshop e Sketch, per il web design e altro ancora. Tuttavia, da quando Adobe ha acquisito Figma nel 2022, potrebbero esserci alcune modifiche che rimescoleranno la classifica.
Ci sono molti usi per Figma. Viene utilizzato principalmente per la progettazione digitale e non è possibile progettare in CMYK per la stampa. Alcuni degli usi principali di Figma includono:
- Prototipazione
- Progettazione UX/UI
- Progettazione dell'app
- web design
- Progettazione della presentazione
Puoi usa i plug-in Figma mockup per aiutarti a mostrare i tuoi progetti, converti pagine web reali in design Figma utilizzando plugin e persino creare modelli principali per i progetti Figma per risparmiare tempo nei tipi di progettazione ripetitivi.
Quanto costa Figma?
Puoi creare un account Figma gratuitamente su Sito Figma oppure scaricando il Applicazione Figma. Un account gratuito fornisce funzionalità per tutti gli aspetti di progettazione dell'app. Puoi progettare con Figma e FigJam: lo strumento di collaborazione di Figma.
Se stai usando Figma come hobbista o come unico libero professionista, la versione Free Forever è quasi perfetta. Hai ancora accesso a tutti i plug-in, puoi invitare collaboratori illimitati, utilizzare file personali illimitati e utilizzare Figma da tutte le piattaforme.
Mentre la versione gratuita di Figma offre più che sufficiente per qualsiasi designer standard, un abbonamento Figma Professional ti consente di farlo invitare compagni di squadra, lavorare dalle librerie del team, avere accesso a file Figma illimitati e cronologia delle versioni e altro ancora, per $ 12 al mese per editore. Se sei uno studente o un educatore, puoi ottenere Figma Professional gratuitamente.
Come usare Figma: le basi
Sia che utilizzi l'app Figma o la versione del browser, puoi seguire facilmente.
Quando apri Figma, ti verranno presentate le opzioni per avviare un nuovo file Figma, un nuovo file FigJam o importare un file creato in un altro programma, come Sketch o Adobe XD. Se hai già utilizzato Figma, vedrai anche i tuoi precedenti progetti Figma che puoi aprire e su cui lavorare.
Navigazione nell'area di lavoro di Figma
L'apertura di un nuovo file inizialmente sembra poco interessante. A differenza di molti altri programmi di progettazione, non si inizia con la tavola da disegno o la tela, ma con una pagina di progettazione completamente vuota. Ma con una mente piena di ispirazione, non rimarrà a lungo uno spazio vuoto.
Il menu orizzontale in alto a sinistra inizia con il Menu principale icona: il logo Figma. Selezionando il Menu principale, puoi navigare verso gli altri tuoi file, azioni rapide Figma, opzioni file tipiche e accedere a plug-in, widget e librerie.
Successivamente, troverai il Mossa attrezzo (v), con il Scala attrezzo (K) annidato sotto di esso. Questi strumenti servono per spostare elementi o ridimensionare parti del tuo progetto verso l'alto o verso il basso. E a destra di questi strumenti, vedrai gli strumenti Regione, Telaio (F), Sezione, E Fetta, accoccolato insieme.
In Figma, una cornice è ciò che altri programmi possono chiamare una tavola da disegno o una tela. Selezionare Telaio per disegnare la tua tela di dimensioni personalizzate. Se selezionato, il menu a destra presenterà opzioni di frame predefinite per le dimensioni dei dispositivi comuni: smartphone, tablet, desktop, smartwatch, presentazioni e opzioni di social media. Puoi anche fare clic e trascinare direttamente la cornice per renderla di qualsiasi dimensione personalizzata.
Tornando al menu in alto a sinistra, a destra degli strumenti Regione ci sono i Forma utensili, Penna strumenti, e il Testo attrezzo. Seguito, poi, da Risorse—Componenti, Plugin, E Widget-e il Mano strumento per spostare il file. E infine, il Commenti strumento ottimo per prendere appunti e collaborare con i compagni di squadra.
Il menu Design Figma
Con una cornice disegnata, selezionandone il titolo si attiva la cornice, pronta per il disegno. Il menu a destra mostra i titoli per Progetto, Prototipo, E Ispezionare. Come suggerisce il nome, l'opzione Design è il menu che utilizzerai per progettare gli elementi sulla cornice.
Sebbene il menu Design iniziale sia alquanto semplicistico, man mano che aggiungi più elementi al tuo design, le opzioni del menu si evolvono. All'inizio, il menu scorre dall'alto verso il basso con strumenti di allineamento, strumenti di dimensionamento, Disposizione automatica, Griglia di layout, Strato, Riempire, Colpo, Effetti, E Esportare. Alcuni di questi sono ridotti a icona per impostazione predefinita, ma facendo clic su + segno, puoi aprire qualsiasi menu o premere – per minimizzarlo.
Dopo aver disegnato la cornice principale per il progetto, puoi utilizzare gli strumenti Forma o Penna per disegnare forme o aggiungi segnaposti immagine e puoi aggiungere testo usando lo strumento Testo in modi che probabilmente hai fatto in altri Software.
Una volta che hai forme o testo sulla cornice, usa le varie opzioni del menu a destra per modificare e progettare quegli elementi. IL Strato il menu offre modalità di opacità e fusione; con Riempire puoi aggiungere colore o inserire immagini con alcune funzioni di modifica come Esposizione, Contrasto, Temperatura, e altro ancora.
Man mano che crei più elementi nel tuo progetto, i livelli si formeranno sulla sinistra Strati menu accanto al Risorse scheda. Puoi fare doppio clic sul titolo di un livello per trovare l'elemento e viceversa; puoi fare doppio clic su un elemento di progettazione per trovare il livello evidenziato. Facendo doppio clic sui titoli è possibile rinominarli per un'organizzazione ottimale.
Il menu del prototipo Figma
A destra del Progetto opzione di menu è il Prototipo menù. Dopo aver finalizzato gli aspetti visivi del tuo progetto e aver impostato le caselle di immagini e il testo dove dovrebbero andare, puoi utilizzare gli strumenti del prototipo per aggiungere animazioni e transizioni ai tuoi progetti.
IL Prototipo menu consente di collegare tra loro frame o componenti come transizioni. Puoi scegliere quale ordine e come ogni fotogramma passa a un altro.
Funziona alla grande se lo sei fare una presentazione Figma che si anima da una diapositiva all'altra, ma lo strumento consente anche sapientemente di visualizzare animazioni per pulsanti o menu per app e web design. Puoi aggiungere più transizioni per pagina per tutte le cose diverse, così puoi vedere come gli utenti interagirebbero con il tuo sito web quando è attivo.
Sebbene utilizzare Figma per progettare un sito Web non sia la stessa cosa che creare un sito Web live, puoi consegnare Figma design al tuo team di sviluppo che può ricreare le interazioni del tuo prototipo come progetti di animazione della vita reale per il tuo sito web. Ciò significa che puoi passare da una pagina all'altra in base a clic, tempo o altre interazioni.
Iniziare con Figma è facile
Ora sai come navigare nel layout di Figma e come funzionano gli strumenti di progettazione e prototipo di base. Dato che Figma è così facilmente accessibile, è ora di andare ad armeggiare con questo strumento di progettazione e vedere cosa puoi creare.
