Paddy Adăugați automată pliere și spațiu în schiță

În acest sfat rapid vă voi arăta o modalitate foarte ușoară de a adăuga umplutură și distanțare la modelele dvs. în Sketch.

Urmăriți ecranul

 

O problemă de design comună a UI în schiță

Permiteți-mi să încep prin a vă arăta o problemă cu care ați putea fi confruntat de mai multe ori când lucrați în Sketch. Să presupunem că doriți să creați un buton simplu; ați începe cu o formă de dreptunghi pe tabloul de bord, dați-i o culoare adecvată, atunci ați adăuga un text pe alt strat. În cele din urmă, ați alinia obiectele, grupați-le împreună și ați fi terminat.

Să ne imaginăm acum că doriți să creați un alt buton; similar, dar cu text diferit. Probabil ați duplicat pe cel deja realizat, apoi schimbați textul.

Presupunând că doriți să păstrați aceeași umplutură laterală pe fiecare, atunci veți modifica lățimea dreptunghiurilor în funcție de modul în care doriți să apară. Un proces manual:

Acest lucru ar putea părea o sarcină simplă, dar dacă trebuie să faceți acest lucru de peste și peste ea poate fi de fapt într-adevăr consumatoare de timp. 

Soluția: Paddy

Așa că lasă-mă să-i prezint pe Paddy; un plugin pentru schiță care vă va salva saci de timp.

Setarea plăcuței

Începeți prin instalarea pluginului, apoi, cu un text selectat pe tabloul de bord Plugin-uri> Paddy> Introduceți padding pentru selecție. În dialogul care apare, puteți seta căptușeala exact așa cum ați proceda în CSS. De exemplu, introducerea unei valori 10 20 vă va oferi 10px de umplutură în partea de sus și în partea de jos, cu 20 de pixeli la dreapta și la stânga.

Paddy va crea automat un dreptunghi din spate, dimensionat exact așa cum doriți. Dar aici este partea răcoroasă: când schimbați textul, dreptunghiul de fundal va păstra măsurătorile de umplutură pe care le-ați setat anterior.

Editarea numelui de strat de la Context (10 20) a zice, Context (20 20) va schimba padding-ul pentru a reflecta noile valori.

Setarea distanței

Acest lucru funcționează și atunci când se adaugă spațierea între obiecte. Imaginați-vă că avem două butoane și dorim să adăugăm 50 de distanțe între ele. Selectăm ambele butoane, apoi du-te la Plugin-uri> Paddy> Spacing pentru selecție și apoi putem introduce valoarea pe care o dorim. Vom folosi v unități pentru a defini spațierea verticală sau h unități pentru orizontală.

În acest caz, am folosit 50V în scopul de a spațiului nostru două butoane exact 50px separat, vertical.

După cum puteți vedea, grupurile de butoane au fost înfășurate într-un alt grup, care deține valoarea de spațiere. Dacă am adăuga un alt buton în cadrul acestui grup, acesta ar moșteni același spațiu. Și dacă am fi modificat valorile de umplutură sau lungimea textului în unul dintre aceste butoane, totul ar fi recalculat și repoziționat pentru noi.

Concluzie

Paddy este un plugin extraordinar; Vă recomandăm să o descărcați și să aruncați o privire la unele dintre celelalte lucruri pe care le poate face. Cu siguranță vă va economisi timp!