Situatie
Atunci cand construiesti un sistem de componente in Figma si vrei ca toate butoanele sa aiba colturile rotunjite in mod consistent, este important sa respecti niste principii clare in design-ul tau. De exemplu, ai mai multe variante de butoane (primar, secundar, mic, mare) si trebuie sa te asiguri ca radius-ul fiecaruia se potriveste vizual cu inaltimea lui si cu spatiul dintre butoane pentru coerenta si profesionalism.
Solutie
Pasul 1: Creeaza frame-ul dorit
- Creeaza 2 butoane. In cazul meu, voi creea o bara pentru introducere a unui mesaj, deci voi avea nevoie de un frame dreptunghiular si de un patrat, cu sageata in interior
- Alege culorile in functie de restul design-ului.
Pasul 2: Aliniaza corect shape-urile
- Observati cum patratul este prea departe de marginea din dreapta (prima imagine). Pozitionam butonul la distanta egala de marginea din dreapta, respectiv marginea de deasupra si de dedesubt
- Aliniem si textul corect, fara a uita de regula de 4 (multipli de 4px)
Pasul 3: Calculam Radius-ul potrivit
- In majoritatea cazurilor, formula potrivita pentru radius este (radius figura exterioara – padding intre butoane). In cazul meu, 24px – 12px = 12px. (imaginea 2)
- In acest fel, pastram o consistenta pe tot parcursul design-ului.
Tip solutie
PermanentImpact colateral
Atentie. Formula functioneaza cel mai bine pentru butoane mici si medii, unde proportiile sunt compacte. In cazul butoanelor de dimensiuni foarte mari, radius-ul butoanelor este mai bine calculat vizual, decat matematic.Pentru a avea o idee clara despre ce dimensiune folosim la radius, putem avea in vedere urmatoarele proportii:
- Buton mic (32-48 px) -> radius de 8-12 px
- Buton mediu (56 - 80 px) -> radius de 12-16 px
- Buton mare (100 - 140 px) -> radius de 20-24px
Leave A Comment?