10 Plug-uri gratuite pentru schițe pentru dezvoltatorii web

Sketch-ul devine o mulțime de tracțiune între designerii web și dezvoltatori. Aceasta este probabil pentru că este intuitiv, ușor de învățat și vine cu multe caracteristici care fac mult mai ușor pentru a crea un prototip de site web. De asemenea, este posibil ca această aplicație să fie extensibilă, adică puteți adăuga facilități noi în aplicație cu ajutorul pluginurilor.

Iată 10 pluginuri care vă pot ajuta să vă măriți productivitatea atunci când lucrați cu Sketch. Sunt diverse, variind de la generatoare de conținut, selector de palete de culori și vă pot ajuta să afișați măsurătorile stratului sau să adăugați automat un strat de umplere într-un strat.

1. CSS Buddy

CSS Buddy vă permite să adăugați CSS la nivelul dvs. în spațiul de lucru Sketch. În principiu, puteți aplica la stratul cu ajutorul CSS lățimea, înălțimea, opacitatea, umbra cutiei, granița și fundalul.

Cu acest plugin instalat, trebuie doar să selectați un strat apoi să selectați Aplicați la Selecționat din meniul plugin-ului. O fereastră de dialog vă va solicita să introduceți foaia de stil. Adăugați conținutul CSS fără clasa CSS și urmăriți formarea stratului.

2. Paleta de culori pentru designul materialelor

Dacă urmați tendința Material Design, un lucru proeminent pe care îl veți observa este folosirea unor culori distincte. Material Design are o paletă minunată de culoare. Acum puteți aduce asta în spațiul dvs. de lucru cu Material Design Culoare Palette Plugin.

Acest plugin va genera palete de culori în câteva secunde fără a fi nevoie să închideți spațiul de lucru. Alegeți Hue, Value sau Swatch pentru a genera o paletă de culori potrivită pentru proiectul dvs..

3. Sketch Notebook

Uneori trebuie să arătăm ce facem într-un comentariu sau prin documentație. Dacă lucrați la proiecte cu alți designeri sau la implicarea unui client, acest lucru este necesar și pentru a vă asigura că rezultatul este ceea ce toată lumea urmărea.

Sketch Notebook este un plugin pentru documentarea design-ului dvs. în Sketch cu ușurință. Acesta va adăuga o bara laterală suplimentară în spațiul dvs. de lucru, care conține comentarii pe care le adăugați la orice element de design. Puteți reordona comentariile, reinițializa, șterge și comuta vizibilitatea comentariilor.

4. Jucătorul zilei

Înainte de a folosi imagini reale într-un design, adesea folosim imagini de tip placeholder pentru a accelera procesul de proiectare. Pentru Sketch, puteți utiliza Jucător de Zi pentru a adăuga substituenți personalizați pentru orice strat din spațiul de lucru Sketch de la 6 servicii de imagini cu destinație localizată, inclusiv Placehold.it, LoremPixel și Unsplash. Odată activată, puteți seta lățimea, înălțimea și alte informații ale imaginii.

5. Generatorul de conținut

Avem deja un plugin pentru inserarea imaginilor de tip placeholder, ce despre unul pentru conținutul general? Generator de conținut vă ajută să adăugați date fictive, cum ar fi avatare, nume, date despre geolocație și multe altele. Funcționează excelent pentru modelele de machete și pentru reducerea durerilor de cap din încercarea de a afla cum să genereze date la fața locului.

Pentru a adăuga datele fictive, selectați doar un strat, apoi selectați Plugin> Generator, și alegeți Geo, persona sau Fotografii.

6. Măsura schiței

Sketch Measure este un instrument de măsurare pentru Sketch. Măsoară lungimea sau dimensiunea unui strat (sau straturi) în design. De asemenea, obțineți umplutura și marginea unui strat, precum și distanța dintre două straturi. Măsura Sketch poate imprima și proprietățile stratului, cum ar fi culoarea, marginea și opacitatea. Toate măsurătorile pot fi accesate prin intermediul comenzilor rapide de la tastatură.

7. Buton dinamic

Buton dinamic vă ajută să creați cu ușurință butonul cu garnituri fixe. Se va ajusta automat umplutura pe baza valorii pe care o dai, indiferent de lungimea textului. Cu pluginul instalat, un text poate fi transformat într-o structură cu comanda rapidă Command + J. Cantitatea de umplutură necesară poate fi apoi introdusă în stratul de text (0: 0: 0: 0) (sub grupul de butoane flexibile).

8. Scala tipografică

Scala tipografică este un plugin pentru a transforma textul selectat în scală tipografică. Pentru a utiliza acest plugin, selectați doar un strat de text (unic sau mai multe) sau un strat mixt care conține cel puțin un strat de text, apoi selectați Plugin> Scala tipografică și ajustați valoarea din dialog. Rezultatul este un set de text scalat care respectă regulile scării tipografice.

9. Modulator

Cu Modulizer puteți controla butoanele, modulele sau zonele din design cu ajutorul comenzii rapide Shift + Command + M. Puteți combina toate straturile dvs., puteți grupa apoi să utilizați comanda rapidă pentru a regla automat umplutura pe baza valorii de umplutură de care aveți nevoie . Vizionați demo-ul video pentru a vedea acest lucru în acțiune.

10. Blade

Te-ai gândit vreodată să-ți transformi designul de la schiță la HTML? Dacă da, probabil că ar trebui să obțineți Lamă, un plugin Sketch care generează automat fișiere HTML din design. Se va transforma grupul în div, text în p si asa mai departe.

Când utilizați Blade, puteți spune pluginului ce element de DOM să genereze prin adăugarea unui nume special la strat, cum ar fi [btn] sau introducerea [textului] astfel încât Blade știe ce ar trebui să facă. Verificați această demonstrație video pentru un aspect interior.

Acum citiți: 12 Plugin-uri utile pentru dezvoltatorii WordPress