Padroneggiare lo strumento di progettazione Figma: suggerimenti e procedure utili
Pubblicato: 2019-03-26Tutti coloro che hanno lavorato con Google Documenti sanno quanto sia conveniente: è facile modificare, collaborare e salvare i file sul Web. E se i web designer avessero lo stesso strumento per i loro progetti? Beh, in realtà ne hanno uno ed è Figma. In questa recensione di Figma, ti guideremo attraverso le caratteristiche più brillanti della piattaforma che la rendono lo strumento preferito dai designer.
Cos'è Figma
Figma è uno strumento di progettazione basato su cloud che, a differenza di altri popolari strumenti di progettazione che funzionano esclusivamente su Mac OS o Windows, può funzionare anche su Linux. Pertanto questa piattaforma consente la collaborazione di designer che utilizzano diversi sistemi operativi e hanno bisogno di generare codice SVG, CSS e codice iOS o Android per il loro lavoro.
La piattaforma consente ai suoi utenti di creare progetti, realizzare prototipi e raccogliere feedback su un'unica piattaforma.
Perché usare Figma
Prima di addentrarci nelle bellezze dello strumento di progettazione Figma, diamo un'occhiata a ciò che rende questa piattaforma così attraente per i designer.
- È basato sul web. Figma viene eseguito nel tuo browser e puoi lavorare sui tuoi progetti senza doverli salvare come file separati sul tuo computer: tutte le modifiche vengono salvate automaticamente sul tuo cloud. Ma ricorda, avrai bisogno di una connessione Internet attiva per salvare tutte le modifiche.
- Permette il lavoro di squadra . Con Figma, puoi avere un team da due a un numero illimitato di editor, il tutto a seconda del tuo piano tariffario. Sarai sempre in grado di vedere quanti membri del team stanno lavorando su un singolo progetto e quali modifiche stanno apportando.
- È gratuito per i designer solisti. Tutte le funzionalità sono assolutamente gratuite senza periodi di prova.
Nel complesso, Figma ha tre piani tariffari. Scopriamo quali funzionalità la piattaforma mette a disposizione per ciascuno di essi.
Piani tariffari Figma
| Antipasto | Professionale | Organizzazione |
| Gratuito Usa questo piano per testare la piattaforma e farti un'idea delle sue funzionalità di base: prototipazione, attributi del codice, commenti, spazio di archiviazione illimitato e visualizzatori illimitati, importazione di schizzi e vari formati di file da importare. | $ 12 per editore/mese Passa al piano seguente se il tuo progetto richiede la modifica e la condivisione del team. Con questo piano, puoi usufruire di un numero illimitato di editor, progetti e visualizzatori gratuiti, oltre a cronologia delle versioni e spazio di archiviazione illimitati. Sarai anche in grado di creare progetti e sistemi privati con componenti dell'interfaccia utente condivisi che l'intero team può utilizzare. | $ 45 per editore/mese Esegui l'upgrade a questo piano e goditi una gamma ancora più ampia di funzionalità: numero illimitato di team, proprietà delle bozze, controlli di accesso ai collegamenti o caratteri condivisi. Sarai in grado di approfondire con i controlli dell'account garantiti dai rapporti sui registri delle attività, dalla gestione centralizzata dei membri, dal single sign-on (SSO) e dal provisioning remoto con il provider di identità dell'organizzazione. |
Iniziare con Figma
Al momento della registrazione, l'utente riceve un'e-mail di benvenuto con i collegamenti necessari per l'onboarding: centro assistenza, tutorial video, forum e risorse utili.
Inoltre, quando gli utenti iniziano a lavorare con lo strumento, viene loro offerta una rapida procedura dettagliata della piattaforma. Puoi sia lavorare online che scaricare la versione desktop di Figma per impostare il tuo flusso di lavoro offline. In effetti, l'interfaccia è piuttosto intuitiva, con il Pannello Livelli, che include gli elementi del tuo progetto, una barra degli strumenti con gli strumenti e le opzioni disponibili e il Pannello delle proprietà tutto sul lato destro.
Ora descriviamo le caratteristiche e le opzioni più importanti di Figma e vediamo come applicarle.
Caratteristiche di Figma e opzioni utili
prototipazione
Figma ti consente di creare una versione cliccabile di un sito Web o di un'app creando tutte le schermate di cui hai bisogno. In questo modo sarai in grado di testare, modificare o regolare qualsiasi funzione ― funzionalità del pulsante, rollover degli elementi, animazione della finestra modale ― senza dover passare da una scheda all'altra. Sarai in grado di creare connessioni e hotspot per il tuo progetto per simulare come apparirà in un ambiente reale.
Passa semplicemente a Prototipo nel pannello Proprietà e inizia a creare percorsi e interazioni.
Componenti
Questi sono elementi dell'interfaccia utente che possono essere riutilizzati nei tuoi progetti. Questa funzione consente di creare componenti simmetrici capovolgendoli o ripetere modelli affiancando i componenti. È possibile creare componenti da pulsanti, campi o menu. Per creare un componente principale, fare clic sul pulsante Crea componente nel menu Opzioni o fare clic con il pulsante destro del mouse sul livello e scegliere l'opzione Crea componente.
Puoi riutilizzare i componenti principali creando istanze. Puoi anche trasformare questi componenti in elementi dell'interfaccia utente come colori, blocchi, pulsanti, forme e pagine di destinazione come componenti separati.
Per creare componenti di istanza, scegli il componente principale, tieni premuto il tasto di scelta rapida (Alt o D rispettivamente per Windows e Mac OS), trascina l'istanza dal componente e copia e incolla in un'altra posizione se necessario.
Ricorda, le istanze che crei sono collegate ai componenti Master, il che significa che tutte le modifiche apportate a quest'ultimo si applicheranno a tutte le prime. Ad esempio, aggiornando la forma o il colore del pulsante nel componente principale, aggiornerai i suoi componenti figlio nel design del tuo sito web.
Reti vettoriali
Questa funzione di Figma ti consente di creare forme vettoriali complesse poiché non sei più limitato da due sole linee provenienti da due punti. Puoi usare lo strumento penna per disegnare linee extra da qualsiasi punto della forma che hai creato.
Inoltre, Vector Networks può semplificare la tua routine HTML poiché puoi copiare il codice SVG da una fonte esterna e incollarlo come livello vettoriale direttamente in Figma. Puoi anche copiare i vettori Figma come codici SVG. Per fare ciò, fai clic con il pulsante destro del mouse sull'elemento, scegli copia come SVG e incolla il codice nell'HTML o in qualsiasi progetto web che stai creando.
Commenti, modifica e condivisione integrati
Con Figma, puoi creare un team e selezionare ciò che ogni membro del team ha il permesso di fare con i tuoi progetti: visualizzare o visualizzare e modificare. Puoi anche guardare come i membri del team aggiornano o modificano il design in tempo reale.
Il tuo team può lasciare un feedback o discutere qualsiasi elemento del progetto direttamente nell'area di lavoro e appuntarlo ovunque sulla tela, proprio come in Google Documenti. Per lasciare i tuoi commenti, scegli il fumetto nel menu in alto, fai clic sull'elemento che desideri commentare e scrivi il tuo feedback.
Controllo della versione
Con Figma, puoi tenere traccia della cronologia di ciascun collaboratore e persino tornare alla versione precedente. Il servizio salva automaticamente le versioni quando gli utenti chiudono la scheda con il progetto o se non sono state apportate modifiche entro 30 minuti. Per accedere rapidamente a questa opzione, seleziona l'icona a discesa a sinistra del nome del progetto nella barra degli strumenti. Vedrai la cronologia delle versioni alla tua destra con un'opzione per nominare, ripristinare o duplicare una versione specifica.
Strumento di progettazione Figma in azione
Dopo aver acquisito familiarità con la piattaforma e le sue funzionalità, abbiamo deciso di provare le opzioni di progettazione Figma e creare una semplice pagina per un eBook. Innanzitutto, abbiamo fatto clic sul segno "+" nel menu in alto. Successivamente, abbiamo fatto clic sull'icona "Cornice" nella barra degli strumenti per creare una cornice e organizzare il nostro design sulla tela. Successivamente, abbiamo riempito il nostro progetto con i livelli necessari - blocchi di testo, rettangoli e immagini - e configurato tutti gli spazi tra gli elementi.
Ecco cosa siamo riusciti a creare:
Tieni presente che non sarai in grado di eseguire una stampa di qualità, poiché la piattaforma non dispone della tavolozza principale per la pittura - tavolozza CMYK - o del cambio di dimensione tra millimetri e centimetri.
ciak finale
Figma sembra uno strumento che è stato attentamente pensato dai designer per i designer. La piattaforma ti permette di
- lavora online e salva i tuoi progetti su un cloud senza dover dipendere dallo spazio di archiviazione del tuo computer;
- creare progetti su vari sistemi operativi;
- collaborare con il team in tempo reale, commentare, modificare e condividere i file;
- goditi funzionalità utili come la prototipazione, le reti vettoriali, la creazione di componenti e le loro istanze per modificare, testare, regolare il tuo progetto ed espandere le sue possibilità.
Speriamo che la nostra recensione di Figma abbia chiarito i trucchi interni della piattaforma e che tu sia stato abbastanza ispirato da provarlo. Crea i tuoi progetti con Figma e progetti di marketing con SendPulse. Ci vediamo!