Sistemul adaptiv al rețelei în schiță 3

Echipa Sketch a lucrat recent foarte bine pe un sistem de caractere. Și versiunea Sketch 3.9 (versiunea beta actuală) a primit funcționalitatea foarte necesară de redimensionare a grupului.

Acesta vă permite să setați dimensiunea dorită pentru un set de elemente dintr-un grup.

În plus față de utilizarea evidentă, cred că va fi interesant să vorbim despre întinderea rețelei (Fluid Grid).

Să începem cu desenarea unui dreptunghi cu o lățime de 120 de pixeli x 100% din înălțimea spațiului dvs. de lucru. 1440/12 = 120. De fapt, acest lucru nu este atât de important, deoarece grila va fi adaptivă și va fi mai ușor de redimensionat.

Sistemul adaptiv al rețelei în schiță 3

Acum creați coloanele (jgheabul). Adăug o coloană de 8 px x 100% pe fiecare parte, ceea ce îmi va da o distanță de 16 pixeli. între ele.

Sistemul adaptiv al rețelei în schiță 3

Acum grupează obiectele și pregătește-te pentru magia ✨.

Sistemul adaptiv al rețelei în schiță 3

Selectați ambele dreptunghiuri și selectați opțiunea "Pin to Corner" din funcția Redimensionare. Aceasta va atașa fiecare coloană în colțul cel mai apropiat. În consecință, coloana din stânga va fi pe marginea din stânga a zonei, iar cea dreaptă în dreapta. Lățimea coloanelor va rămâne neschimbată, deoarece modificați mărimea unui grup de obiecte.

Sistemul adaptiv al rețelei în schiță 3

De asemenea, puteți încerca să redimensionați un grup de coloane

Acum, selectați grupul și creați un simbol.

Sistemul adaptiv al rețelei în schiță 3

Apoi duplicați personajul de 11 ori pentru a obține 12 coloane.

Indicație: Trageți pentru a crea prima copie, apoi utilizați combinația ⌘ + D pentru a crea copii.

Acum puteți grupa toate simbolurile coloanelor și puteți crea o rețea de 12 simboluri pe coloană.

Sistemul adaptiv al rețelei în schiță 3

Și avem o grămadă de coloane pe care le puteți crea în Sketch!

Acum puteți crea mai multe grile (8/16/24) cu același simbol din coloană.

Motivul pentru crearea coloanelor cu înălțimea unei zone de lucru egale a fost că elementele atașate sunt comprimate împreună cu părintele, astfel încât acestea nu ar crește în înălțime.

Simbolurile noastre vor fi perfect pixeli. În momentul redimensionării la orice dimensiune, Sketch va plasa coloanele chiar și pe subpixeli.

Sistemul adaptiv al rețelei în schiță 3

Redimensionați grila în ordine ascendentă ca număr de coloane. Deci, pentru grilă de 12 coloane, putem face o redimensionare multiplu de 12 pixeli.

Câteva sfaturi pentru a face acest lucru mai ușor decât tragerea

Unele matematici

Sistemul adaptiv al rețelei în schiță 3

Un alt plugin.

Nudg.it este o aplicație mică pe care am creat-o pentru a configura mișcări mici în Sketch.

Sistemul adaptiv al rețelei în schiță 3

Puteți seta o schimbare mare (Big Nudge) utilizând tastele săgeți Shift + la 12 pixeli și deplasarea formei (Shift + CMD + săgeată) a grilei dvs. cu un câștig de 12 pixeli.

În timp ce această funcție este disponibilă numai în versiunea beta a schiței.

Articole similare