Principal Figma Cum să utilizați componentele în Figma

Cum să utilizați componentele în Figma



În ultimii câțiva ani, Figma a crescut rapid în popularitate și nu este de mirare. Software-ul gratuit, bazat pe cloud, este ușor accesibil pe toate dispozitivele și nu necesită rate sau descărcări. De la proiectarea interfețelor aplicațiilor mobile până la fabricarea de postări pe rețelele sociale, cu Figma, puteți experimenta tot felul de caracteristici de design grafic și vă puteți extinde abilitățile.

Cum să utilizați componentele în Figma

Pentru și mai multă consistență în design-ul dvs., vă recomandăm să luați în considerare utilizarea componentelor în munca dvs. Componentele sunt elemente ale interfeței cu utilizatorul (UI) care pot fi utilizate în mai multe fișiere de pe Figma. Acestea pot fi adesea un plus puternic pentru design-urile dvs. și pot îmbunătăți calitatea lor generală.

Indiferent dacă sunteți nou la Figma sau îl utilizați de ceva vreme și nu sunteți sigur cum să utilizați componentele cu succes, suntem aici pentru a vă ajuta.

În acest articol, vom explora cum să utilizați componentele Figma și cum vă poate ajuta acest lucru să vă îmbunătățiți munca.

Dacă ești interesat să afli mai multe, continuă să citești.

Cum să utilizați componentele în Figma

Stăpânirea utilizării componentelor vă poate ajuta cu organizare și consecvență atunci când utilizați Figma. Aceste elemente de UI pot fi folosite din nou și din nou în cadrul diferitelor proiecte de design la care ați putea lucra. O componentă poate fi realizată într-o pictogramă, buton și multe altele, în funcție de proiectul dvs.

Lucrul minunat despre introducerea componentelor în experiența dumneavoastră Figma este că vă economisește mult timp. Orice modificări pe care le puteți face unei componente sunt actualizate automat pentru celelalte. Acest lucru poate fi deosebit de util dacă aveți un interval de timp scurt sau colaborați cu alți designeri și doriți să vă accelerați fluxul de lucru.

La început, veți observa că există două bare laterale pe fiecare parte a pânzei principale pe care o utilizați. Puteți utiliza instrumente din oricare dintre aceste bare laterale pentru a face modificări proiectului dvs.

Bara laterală din partea dreaptă vă oferă acces la orice setări de prototip și vă permite să ajustați sau să editați orice proprietăți ale componentelor dvs. Cu toate acestea, bara laterală din stânga vă prezintă straturile, elementele și paginile utilizate în proiectul dvs. Acesta este denumit Panoul Straturi.

Componentele ar trebui să fie introduse în munca dvs. destul de devreme. Ele vă ajută să mențineți coerența în design-ul dvs. și vă permit să accelerați ritmul cu care faceți modificări în proiectele dvs. Există două elemente cheie ale unei componente:

  • Componenta principală (sau principală) (pictogramă cu patru diamante)
  • O componentă de instanță (pictogramă cu un singur diamant)

Componente principale

Înainte de orice altceva, trebuie mai întâi să creați Componenta Master. Pentru a face acest lucru, urmați pașii de mai jos:

  1. Faceți clic dreapta pe stratul, grupul sau cadru.
  2. Selectați Creare componentă.
  3. În partea stângă a ecranului, veți vedea un meniu drop-down care spune Componentă. Faceți clic pe aceasta.
  4. De aici, veți observa un meniu în care puteți modifica componentele și stilurile de reproiectare în cadrul proiectelor.

O altă modalitate de a crea o componentă principală este utilizarea comenzilor rapide:

  • Opțiuni + Comandă + K pentru Mac
  • Ctrl + Alt + K pentru Windows

Desigur, această metodă funcționează numai dacă utilizați Figma pe un computer.

Componente instant

O componentă instantanee este o copie a componentei dumneavoastră master. Când Componenta principală este editată în orice fel, Instanța este actualizată automat pentru a se potrivi cu orice modificări efectuate. Dacă construiți un site web, acest instrument poate fi deosebit de util și vă poate economisi mult timp. De exemplu, s-ar fi dus zilele de a intra manual în toate componentele dvs. pentru a repeta aceleași editări. În schimb, Figma le schimbă pe toate pentru tine.

Poate veni un punct în care ați creat mai multe instanțe și ați dori să vă întoarceți la Componenta principală, astfel încât să puteți face o schimbare rapidă a tuturor componentelor. Pentru a accesa Componenta principală, procedați în felul următor:

  1. Faceți clic dreapta pe orice instanță.
  2. Faceți clic pe Go to Master Component.
  3. Componenta principală va apărea în bara laterală din partea stângă.

În timp ce fabricarea componentelor pe rând este relativ simplă; puteți accelera lucrurile făcându-le în vrac. Pentru a face acest lucru, urmați acești pași:

cum se face un pdf cu mai multe imagini
  1. Din panoul Straturi, alegeți straturile în care doriți să creați componente.
  2. Faceți clic pe pictograma săgeată în jos situată lângă pictograma Componentă principală din panoul Straturi.
  3. Selectați Creare componente multiple din opțiunile disponibile.
  4. De acolo, Figma va realiza o componentă pentru fiecare strat de cadru.

Întrebări frecvente suplimentare

Cum anulez sau detașez o instanță?

Pot exista momente în care doriți să faceți modificări proprietăților unei anumite Instanțe fără a modifica toate celelalte. Puteți face variații ale diferitelor componente. În Figma, acest lucru este denumit suprascriere.

Odată ce suprascrieți o Instanță, orice modificare făcută în Componenta Master nu o va afecta. Pentru a face acest lucru, verificați pașii de mai jos:

1. Faceți clic pe Componenta Instanță.

2. Din panoul Proprietăți din partea dreaptă a ecranului, selectați Componentă.

3. Din meniul derulant care apare, alegeți Detașare instanță.

Dacă doriți să ștergeți o modificare, selectați componenta, apoi alegeți Resetare instanță din bara din mijloc de sus a ecranului.

Ce fac dacă îmi șterg accidental componenta principală?

Când petreci toată ziua editând conținut, uneori este posibil să scapi și să ștergi ceva important, cum ar fi Componenta principală. Nu vă temeți, pentru a-l restaura este la fel de ușor ca 1-2-3. Urmați acești pași de bază pentru a recupera acea componentă principală lipsă:

1. Accesați una dintre Instanțele componentei.

2. În panoul Proprietăți din partea dreaptă a ecranului, selectați Restaurare componentă principală.

3. Componenta principală va apărea imediat.

Cum adaug o descriere pentru componentele mele?

Când vă creați componentele, adăugarea unei descriere și a unui link de documentație la fiecare vă poate ajuta să vă navigați mai bine în proiect. De asemenea, este util pentru toți colaboratorii cu care ați putea lucra să aibă acces la note suplimentare. Pentru a adăuga o descriere, accesați panoul Proprietăți din partea dreaptă a paginii și selectați Adăugați o descriere.

Odată ce ați făcut acest lucru, orice spectator extern poate accesa aceste informații accesând panoul de inspectare din bara laterală din dreapta.

Cum import componente în Figma?

Puteți importa tot felul de fișiere într-o componentă Figma. Cel mai simplu mod de a face acest lucru este de pe desktop. Pur și simplu urmați acești pași:

1. În Figma, deschideți pagina în care doriți să importați un fișier.

2. Din fișierele dvs., selectați fișierul specific pe care doriți să îl utilizați.

3. Trageți și plasați fișierul selectat în pagina dvs. Figma.

4. Când ați terminat, faceți clic pe Terminat.

Drumul spre Succes

Figma este un instrument grozav de folosit, indiferent dacă sunteți nou în design sau dacă sunteți în joc de ani de zile. Software-ul oferă un sistem de editare prietenos pentru începători, unde designerii pot crea conținut de la zero sau pot folosi ajutorul unui șablon dacă este necesar.

Înțelegerea modului de utilizare cu succes a componentelor pe Figma vă poate economisi mult timp atunci când desfășurați un proiect de design. Învățând cum să creați un sistem de componente de înaltă calitate, veți putea crește ca designer. Nu numai asta, dar vă poate ajuta și să mențineți un flux de lucru consecvent pe parcursul călătoriei dvs. creative și să permită oricăror viitori colaboratori să vă găsească cu ușurință munca.

Ai încercat să folosești Figma pentru proiectele tale creative? Cum ați găsit utilizarea componentelor? Spune-ne mai multe despre experiența ta în secțiunea de comentarii de mai jos.

Articole Interesante

Alegerea Editorului

Scrieți-vă propriul joc Raspberry Pi
Scrieți-vă propriul joc Raspberry Pi
Raspberry Pi este o senzație de calcul, dar a fost inițial conceput cu o intenție cheie: să inspire o nouă generație să privească dincolo de console de jocuri, smartphone-uri și tablete și să adopte calea codului. Dacă sunteți în căutarea
Cum să utilizați Bing AI pe Mac
Cum să utilizați Bing AI pe Mac
Pentru a utiliza Bing Chat pe un Mac, deschideți un browser web și vizitați site-ul web Bing. Conectați-vă la contul Microsoft și apoi selectați pictograma Bing Chat. De acolo, urmați instrucțiunile și sfaturile de pe această pagină pentru utilizarea asistentului Microsoft Bing AI pe Mac.
Cum să obțineți componente în Rimworld
Cum să obțineți componente în Rimworld
Componentele sunt elementele de bază ale practic orice folosiți în Rimworld. Dacă joci un joc fără Componente, nu vei ajunge prea departe. Aveți nevoie de aceste articole pentru a construi nave, arme de foc, dispozitive electrice și altele. Dar cum anume
Cum să adăugați un ton de apel pe iPhone 6S
Cum să adăugați un ton de apel pe iPhone 6S
Când vine vorba de personalizarea iPhone-ului, unul dintre cele mai bune lucruri pe care le puteți face este să personalizați tonul de apel. În timp ce personalizarea pe iPhone lipsește în multe domenii diferite, cel puțin suntem capabili să ne schimbăm
Activați Citirea cu voce tare pentru fișiere PDF în Microsoft Edge Chromium
Activați Citirea cu voce tare pentru fișiere PDF în Microsoft Edge Chromium
Cum se activează citirea cu voce tare pentru fișiere PDF în Microsoft Edge Chromium Microsoft Edge Chromium a primit o îmbunătățire a funcției de citire cu voce încorporată. Acum poate fi activat pentru fișierele PDF pe care le-ați citit în browser.Publicitate Această caracteristică nu este nouă pentru aplicația Edge. Omologul său EdgeHTML moștenit îl avea deja disponibil
Google Earth vs Google Earth Pro
Google Earth vs Google Earth Pro
Cel mai probabil ați auzit despre Google Earth. Dar ați auzit vreodată de fratele său mai mic, Google Earth Pro? Acest articol va analiza în profunzime ambele versiuni ale acestui software popular și va explica tot ce aveți nevoie
Ce este nou în Firefox 54
Ce este nou în Firefox 54
O nouă versiune a popularului browser Mozilla Firefox este disponibilă. Versiunea 54 are capturi de ecran, marcaje mobile, o interfață de utilizator rafinată pentru descărcări și procese de conținut multiproces. Reclamă Începând cu versiunea 54, funcția de conținut multiproces (e10s) este activată în mod implicit. Acest lucru îmbunătățește fiabilitatea Firefox, deoarece dacă o filă se blochează, cealaltă o va face