Cum să faci un activ care poate fi derulat în Figma

A face derularea conținutului dvs. în Figma implică navigarea în fila laterală. Din păcate, nu apare automat pe interfața principală cu utilizatorul. Conținutul care poate fi derulat este util atunci când doriți să prezentați o mulțime de informații într-un cadru al designului dvs. Unele exemple includ pagini de destinație, interfețe ale aplicațiilor sau ferestre pop-up.

Acest articol vă va explica cum să vă faceți modelele Figma defilabile.

Încadrarea unui text care poate fi derulat într-o formă

Să începem prin a crea un text care poate fi derulat într-o formă simplă. Acesta este cel mai comun exemplu de text care poate fi derulat și apoi puteți adăuga alte proprietăți, cum ar fi culoarea, fonturile și contururile.

Iată cum se face:

1. Creați o formă de bază. Pentru acest exemplu, vă recomandăm să faceți un dreptunghi vertical. Puteți face acest lucru selectând instrumentul dreptunghi din bara laterală din stânga sau folosind comanda „R”. Țineți apăsat stânga, faceți clic pe un punct de pânză și desenați forma.
   
2. În bara laterală din dreapta, sub fila design, bifați lângă opțiunea „conținut clip”.
   
3. Selectați instrumentul de text pentru a crea o casetă de text și plasați-o în cadrul derulabil. Tastați sau copiați și inserați orice conținut pe care îl utilizați.
   
4. Selectați cadrul și accesați fila prototip din partea dreaptă a interfeței. Apoi, selectați opțiunea „defilare depășită” și stilul pe care îl preferați. Aici vom alege „defilare verticală”.
   

Odată ce faceți clic pe opțiunea de defilare la depășire din fila prototip, există mai multe stiluri. O alegem pe cea verticală, deoarece folosim drept exemplu un dreptunghi vertical. Acest lucru vă permite să citiți textul de sus în jos. Unele dintre celelalte stiluri includ:

• Defilare orizontală – Utilizatorii își pot derula textul de la stânga la dreapta în unele exemple. Această opțiune este de preferat dacă creați modele într-un format de amenajare a teritoriului.
• Fără defilare – Dacă doriți să vă blocați conținutul, alegeți opțiunea fără defilare.
• Ambele direcții – Creați un design cu mult conținut și derulați atât pe verticală, cât și pe orizontală.

Ar trebui să utilizați funcții care pot fi derulate în designul dvs. pentru a minimiza efortul (clicurile) pe care cititorul dvs. îl folosește în timp ce interacționează cu conținutul. Aceștia pot glisa sau pot folosi rotița mouse-ului în loc să facă clic sau să atingă tone de text.

Cum să vă proiectați componentele care pot fi derulate

În funcție de produsul dvs., va trebui să vă proiectați cadrul de conținut și conținutul în sine. Procesul implică adăugarea de culori, fonturi și, eventual, alte componente la designul general. Schimbarea acestor elemente este ușoară, dar selectarea esteticii potrivite necesită o atenție atentă.

Cum să schimbați fontul designului dvs. derulabil

Primul lucru pe care va trebui să-l faceți este să schimbați fontul pe designul dvs. derulabil. Figma vă oferă o gamă largă de stiluri din care puteți alege. Iată cea mai simplă metodă:

1. Selectați conținutul din cadrul derulabil pe care doriți să îl modificați.
   
2. Navigați la meniul drop-down situat în stânga sus și selectați-l.
   
3. Derulați prin fonturi până îl găsiți pe cel pe care doriți să îl utilizați.
   

Dacă marca pentru care proiectați are o anumită tipografie, probabil o veți alege pe aceeași, astfel încât să fie în concordanță cu imaginea mărcii. Dacă aveți mai mult spațiu de mișcare, ar trebui să experimentați cu diferite exemple înainte de a-l alege pe cel potrivit.

Unele considerații includ:

• Intenția designului - Alegerea unei tipografii ar trebui să se potrivească cu intenția designului dvs. Dacă doriți să transmiteți o mulțime de informații în mod clar, urmăriți fonturi mai puțin decorative, dar elegante.
• Alte componente - Fontul dvs. este un element vizual ca oricare altul din designul dvs. Ar trebui să se potrivească cu cadrul și cu celelalte componente pe care le includeți.
• Estetică generală și branding – Aspectul general al mărcii ar trebui să influențeze și fontul ales. De exemplu, un serviciu de livrare de flori nu va prezenta același font ca o pagină de destinație SAAS.

În timp ce alegerea fontului corect ar putea necesita unele experimente, unele exemple concrete de fonturi sunt cele mai de încredere opțiuni:

cum să descărcați jocuri mai rapid pe Steam

• Roboto – Dacă vrei să joci în siguranță, atunci folosește Roboto. Este considerat un font versatil și neutru, cu multe aplicații. Deoarece este atât de ușor de înțeles, mulți aleg Roboto pentru instrucțiuni și pagini de destinație.
• Poppins – Pentru un aspect prietenos, dar modern și curat, alegeți Poppins. Acest font este mai rotunjit și face textul atractiv și ușor de citit.
• Raleway – Când proiectați pentru un brand de lux sofisticat, s-ar putea să doriți să luați în considerare Raleway. Este în general subțire, dar are diferite variații de greutate și un aspect general elegant.
• Lato – prietenos, de încredere și serios sunt cuvintele potrivite pentru a descrie acest font. Designerii pot folosi Lato pentru titluri și texte de paragrafe în care lizibilitatea și claritatea sunt principalele preocupări.

De asemenea, veți dori să luați în considerare dimensiunea fontului și stilul de text alese. În general, caracterele aldine sunt folosite pentru titluri sau segmentele de subliniere, în timp ce cursivele sunt folosite pentru citate.

Schimbarea culorii formei cadrului

Pe lângă schimbarea fontului, veți dori să schimbați și culoarea formei cadrului. Încă o dată, nuanța exactă va depinde de marca pentru care proiectați sau de estetica dvs. Din fericire, interfața Figma facilitează selectarea unei culori.

Iată cum vă puteți schimba culorile cadrului:

1. Selectați cadrul pe care doriți să îl editați.
   
2. Stratul va apărea în bara laterală din dreapta. Navigați la secțiunea „Umplere”.
   
3. Selectați „+” pentru a adăuga o umplere.
   
4. Se va deschide o fereastră de selectare a culorilor. Selectați culoarea de umplere și gradientul. De asemenea, puteți introduce un cod hexadecimal dacă cunoașteți nuanța exactă.
   

Ca și în cazul altor elemente de design, poate fi necesar să experimentați cu diferite culori și cum arată acestea cu fontul ales.

Întrebări frecvente

Există o comandă text care poate fi derulată în Figma?

Din păcate, nu există nicio comandă pentru a face derularea unui text în Figma. Cu toate acestea, puteți finaliza procesul în doar câteva clicuri folosind metoda menționată mai sus.

Cum decid ce opțiune de overflow vreau?

Aceasta depinde de tipul de text pe care îl utilizați, de designul general și de funcția acestuia. Stilul vertical este de obicei bun pentru a trece prin texte mari.

Ce interfață a dispozitivului va avea nevoie de obicei de un design text care poate fi derulat?

Un bun exemplu ar fi modelele de design pentru o aplicație. Utilizatorii pot crea un telefon ca cadru general, în timp ce textul derulabil poate fi interfața aplicației.

la & t reținerea clienților fără fir

Este Figma cea mai bună alegere pentru realizarea de modele derulabile?

Figma este unul dintre cele mai bune instrumente pentru realizarea unei game largi de forme, inclusiv modele care pot fi derulate. Mai bine, Figma este gratuită. Cu toate acestea, este posibil să aveți anumite preferințe personale. Încercați să experimentați cu câteva platforme, cum ar fi Adobe Illustrator, până când găsiți instrumentul care vi se potrivește cel mai bine.

Faceți modelele dvs. derulabile și ușor de utilizat

Crearea oricărui text într-un cadru în Figma este ușor. Pur și simplu selectați cadrul și apoi treceți la opțiunea conținutului clipului. Odată finalizat, puteți alege opțiunile de defilare de depășire. De asemenea, nu trebuie să neglijați alte elemente cruciale de design, cum ar fi culoarea și forma cadrului și fontul textului. Derularea designului dvs. este o alegere excelentă pentru paginile de destinație, interfețele aplicațiilor și ferestrele pop-up. Face textele mai ușor de parcurs în loc de clic, sporind în cele din urmă experiența utilizatorului.

Ți s-a părut ușor să faci derularea conținutului tău în Figma? Ce zici de selectarea fontului potrivit? Anunțați-ne în secțiunea de comentarii de mai jos.