Stăpânirea instrumentului de proiectare Figma: sfaturi utile și instrucțiuni

Toți cei care au lucrat cu Google Docs știu cât de convenabil este - ușor de editat, colaborat și salvat fișierele pe web. Ce se întâmplă dacă designerii web au același instrument pentru proiectele lor? Ei bine, au de fapt unul și este Figma. În această recenzie Figma, vă vom ghida prin cele mai strălucitoare caracteristici ale platformei care o fac instrumentul ales de designeri.

Ce este Figma

Figma este un instrument de proiectare bazat pe cloud care, spre deosebire de alte instrumente de proiectare populare care funcționează exclusiv pe Mac OS sau Windows, poate funcționa și pe Linux. Astfel, această platformă permite colaborarea proiectanților care utilizează diferite sisteme de operare și trebuie să genereze cod SVG, CSS și cod iOS sau Android pentru munca lor.

Platforma le permite utilizatorilor să creeze modele, să facă prototipuri și să adune feedback pe toată platforma.

De ce să folosiți Figma

Înainte de a pătrunde în frumusețile instrumentului de proiectare Figma, să aruncăm o privire la ceea ce face această platformă atât de atractivă pentru designeri.

1. Este bazat pe web. Figma rulează în browserul dvs. și puteți lucra la proiectele dvs. fără a fi nevoie să le salvați ca fișiere separate pe computer - toate modificările sunt salvate automat în cloud. Dar nu uitați, veți avea nevoie de o conexiune activă la internet pentru a salva toate modificările.
2. Permite munca în echipă . Cu Figma, puteți avea o echipă de doi până la un număr nelimitat de editori, totul în funcție de planul dvs. de prețuri. Veți putea vedea întotdeauna câți membri ai echipei lucrează la un singur proiect și ce modificări fac.
3. Este gratuit pentru designerii solo. Toate caracteristicile sunt absolut gratuite de utilizat fără perioade de încercare.

În general, Figma are trei planuri de stabilire a prețurilor. Să descoperim ce funcționalitate oferă platforma pentru fiecare dintre ele.

Planuri de prețuri Figma

Noțiuni introductive despre Figma

La înscriere, utilizatorul primește un e-mail de bun venit cu link-uri necesare pentru integrare: centru de ajutor, tutoriale video, forum și resurse utile.

În plus, atunci când utilizatorii încep să lucreze cu instrumentul, li se oferă o prezentare rapidă a platformei. Puteți lucra atât online, cât și descărca versiunea de desktop Figma pentru a vă seta fluxul de lucru offline. De fapt, interfața este destul de intuitivă, cu panoul Straturi, care include elementele proiectului dvs., o bară de instrumente cu instrumente și opțiuni disponibile și panoul Proprietăți, toate în partea dreaptă.

Acum să prezentăm cele mai remarcabile caracteristici și opțiuni ale Figma și să vedem cum le puteți aplica.

Caracteristici Figma și opțiuni utile

Prototipare

Figma vă permite să creați o versiune care poate fi făcută clic pe un site web sau o aplicație, creând câte ecrane aveți nevoie. În acest fel, veți putea testa, edita sau regla orice caracteristică - funcționalitatea butonului, trecerea elementelor, animația modală a ferestrei - fără a fi nevoie să comutați între file. Veți putea crea conexiuni și hotspoturi pentru designul dvs. pentru a simula cum va arăta într-un cadru real.

Pur și simplu treceți la Prototip în panoul Proprietăți și începeți să creați căi și interacțiuni.

Componente

Acestea sunt elemente de interfață care pot fi reutilizate în cadrul proiectelor dvs. Această caracteristică vă permite să creați componente simetrice prin răsturnarea lor sau să repetați modele prin placarea componentelor. Puteți crea componente din butoane, câmpuri sau meniuri. Pentru a crea o componentă Master, faceți clic pe butonul Create Component din meniul Options sau faceți clic dreapta pe strat și alegeți opțiunea Create Component.

Puteți reutiliza componentele principale prin crearea instanțelor. De asemenea, puteți face aceste componente din elemente de interfață, cum ar fi culorile, blocurile, butoanele, formele și paginile de destinație ca componente separate.

Pentru a crea componente de instanță, alegeți componenta principală, țineți apăsată tasta rapidă (Alt sau D pentru Windows și respectiv pentru Mac OS), trageți instanța din componentă și copiați-o în altă locație, dacă este necesar.

Amintiți-vă, Instanțele pe care le creați sunt legate de componentele Master, ceea ce înseamnă că toate modificările pe care le faceți celor din urmă se vor aplica tuturor celor anterioare. De exemplu, actualizând forma sau culoarea butonului din componenta principală, îi veți actualiza componentele secundare în proiectarea site-ului dvs. web.

Rețele vectoriale

Această caracteristică Figma vă permite să creați forme vectoriale complexe, deoarece nu mai sunteți limitat doar de două linii care vin din două puncte. Puteți utiliza instrumentul stilou pentru a desena linii suplimentare din orice punct al formei pe care ați creat-o.

În plus, Vector Networks vă poate ușura rutina HTML, deoarece puteți copia codul SVG dintr-o sursă externă și îl puteți lipi ca strat vector direct în Figma. De asemenea, puteți copia vectori Figma ca coduri SVG. Pentru a face acest lucru, faceți clic dreapta pe element, alegeți copiere ca SVG și lipiți codul în HTML sau în orice proiect web pe care îl creați.

Comentarii încorporate, editare și partajare

Cu Figma, puteți crea o echipă și puteți selecta ceea ce fiecare membru al echipei are permisiunea de a face cu proiectele dvs.: fie vizualizați, fie vizualizați și editați, de asemenea. De asemenea, puteți urmări modul în care membrii echipei actualizează sau modifică designul în timp real.

Echipa dvs. poate lăsa feedback sau discuta orice element al proiectului chiar în zona de lucru și îl poate fixa oriunde pe pânză, la fel ca în Documente Google. Pentru a vă lăsa comentariile, alegeți balonul din meniul superior, faceți clic pe elementul pe care doriți să-l comentați și scrieți feedbackul dvs.

Controlul versiunii

Cu Figma, puteți urmări istoricul fiecărui colaborator și chiar reveni la versiunea anterioară. Serviciul salvează automat versiunile atunci când utilizatorii închid fila cu proiectul sau dacă nu s-au făcut modificări în decurs de 30 de minute. Pentru a obține acces rapid la această opțiune, selectați pictograma derulantă din stânga numelui proiectului în bara de instrumente. Veți vedea istoricul versiunilor din dreapta dvs. cu o opțiune de a denumi, restaura sau duplica o anumită versiune.

Instrument de proiectare Figma în acțiune

După ce ne-am familiarizat cu platforma și funcționalitatea acesteia, am decis să încercăm opțiunile de proiectare Figma și să creăm o pagină simplă pentru o carte electronică. Mai întâi, am făcut clic pe semnul „+” din meniul superior. După aceea, am făcut clic pe pictograma „Cadru” din bara de instrumente pentru a crea un cadru și a ne organiza designul pe pânză. Apoi, ne-am umplut proiectul cu straturile necesare - blocuri de text, dreptunghiuri și imagini - și am configurat toate spațiile dintre elemente.

Iată ce am reușit să creăm:

Rețineți că nu veți putea face o imprimare de calitate, deoarece platformei îi lipsește paleta principală pentru vopsire - paleta CMYK - sau dimensiunea comută între milimetri și centimetri.

Preluarea finală

Figma se simte ca un instrument care a fost atent gândit de designeri pentru designeri. Platforma vă permite

• lucrați online și salvați-vă desenele pe un cloud fără a depinde de spațiul de stocare al computerului;
• să creeze modele pe diferite sisteme de operare;
• colaborează cu echipa în timp real, comentează, editează și partajează fișierele;
• bucurați-vă de funcționalități utile, cum ar fi prototiparea, rețelele vectoriale, crearea componentelor și instanțele acestora pentru a edita, testa, regla designul și extinde posibilitățile sale.

Sperăm că recenzia noastră Figma a clarificat trucurile interne ale platformei și v-ați inspirat suficient pentru a o încerca. Creați-vă desenele cu Figma și proiecte de marketing cu SendPulse. Te văd!