10 Prosti Skica Plugins za Web Developers

Skica je vse bolj privlačna med spletnimi oblikovalci in razvijalci. To je verjetno zato, ker je intuitivna, enostavna za učenje in prihaja z veliko funkcijami, zaradi katerih je veliko lažje ustvariti prototip spletne strani. Morda je tudi zato, ker je ta aplikacija razširljiva, torej lahko aplikacijo z uporabo vtičnikov enostavno dodajate.

Tukaj je 10 vtičnikov, ki vam lahko pomagajo povečati produktivnost pri delu s programom Sketch. Obstajajo različni, od ustvarjalcev vsebine, izbirnik barvne palete, in vam lahko pomagajo pri prikazovanju meritev plasti ali samodejnemu dodajanju oblazinjenja na plast.

1. CSS Buddy

CSS Buddy vam omogoča, da v sloj v delovnem prostoru Skica dodate CSS. V osnovi lahko s slojem CSS uporabite širino, višino, motnost, polje-senco, obrobo in ozadje.

Ko je ta vtičnik nameščen, izberite plast in izberite Uporabi za izbrano v meniju vtičnikov. Pogovorno okno vas bo pozvalo, da vnesete svoj slogovni slog. Dodajte vsebino CSS brez razreda CSS in si oglejte, kako se sloj oblikuje.

2. Materialna barvna paleta

Če sledite trendu materialnega dizajna, je pomembna stvar, ki jo boste opazili, uporaba posebnih barv. Material Design ima izjemno barvno paleto. Zdaj lahko to pripeljete do svojega delovnega prostora Material Design Barvna paleta Plugin.

Ta vtičnik bo v nekaj sekundah ustvaril barvne palete, ne da bi morali zapreti svoj delovni prostor. Izberite Hue, Value ali Swatch, da ustvarite barvno paleto, ki je primerna za vaš projekt.

3. Skica Notebook

Včasih moramo v komentarju ali dokumentaciji pokazati, kaj počnemo. Če delate na projektih z drugimi oblikovalci ali na sodelovanju stranke, je to potrebno tudi zato, da boste lahko zagotovili, da bo rezultat tega, kar so vsi želeli.

Beležka s skicami je vtičnik za preprosto dokumentiranje vašega oblikovanja v programu Sketch. V vaš delovni prostor bo dodana dodatna stranska vrstica, ki vsebuje komentarje, ki jih dodate kateremu koli elementu vašega modela. Vidljivost komentarjev lahko spremenite, preuredite, izbrišete in preklopite.

4. Dnevni igralec

Preden uporabimo realne slike v oblikovanju, pogosto uporabljamo slike o ogradah, da pospešimo proces oblikovanja. Za skico lahko uporabite Dnevni predvajalnik za dodajanje prilagojenih ograd za katerikoli sloj na delovnem prostoru Sketch iz 6 slikovnih storitev rezerviranih mest, vključno z Placehold.it, LoremPixel in Unsplash. Ko je aktivirana, lahko nastavite širino, višino in druge informacije.

5. Generator vsebine

Že imamo vtičnik za vstavljanje slik o rezervnih mestih, kaj pa za eno za splošno vsebino? Generator vsebine vam pomaga dodati lažne podatke, kot so avatarji, imena, podatki o geolokaciji in še več. Odlično deluje za modele modelov in za zmanjšanje glavobolov, ko poskušate ugotoviti, kako ustvariti podatke na kraju samem.

Če želite dodati navidezne podatke, izberite plast in izberite Plugin> Generator, in izberite Geo, Persona ali Fotografije.

6. Skica Ukrep

Skica Ukrep je merilno orodje za Sketch. Meri dolžino ali velikost plasti (ali plasti) v vašem načrtu. Dobite tudi oblazinjenje in rob sloja ter razdaljo med dvema slojema. Skica Skica lahko natisne tudi lastnosti plasti, kot so barva, obroba in motnost. Vse meritve lahko izvedete s pomočjo bližnjic na tipkovnici.

7. Dinamični gumb

Dinamični gumb vam pomaga pri ustvarjanju gumba s fiksnimi blazinicami. Samodejno prilagodi oblazinjenje glede na vrednost, ki jo podate, ne glede na dolžino vašega besedila. Ko je vtičnik nameščen, lahko besedilo pretvorimo v strukturo z bližnjico Command + J. Potrebno količino oblazinjenja lahko nato vstavite v plast besedila (0: 0: 0: 0) (pod skupino gumbov za prožno).

8. Tipografska lestvica

Tipografska lestvica je vtičnik, ki izbrano plast besedila spremeni v tipografsko lestvico. Če želite uporabiti ta vtičnik, izberite besedilno plast (eno ali več) ali mešano plast, ki vsebuje vsaj eno plast besedila, nato izberite Vtičnik> Tipografska velikost in nastavite vrednost v pogovornem oknu. Rezultat je skalirano besedilo, ki sledi pravilom tipografske lestvice.

9. Modulizer

S Modulizer z bliskavico na tipkovnici Shift + Command + M. lahko nadzirate padding gumba, modula ali področij vašega oblikovanja. Združite lahko vse sloje, združite jih in uporabite bližnjico, da samodejno prilagodi vašo oblazinjenje na podlagi potrebe po oblazinjenju, ki ga potrebujete . Oglejte si predstavitev videoposnetka, da boste to videli v akciji.

10. Blade

Ali ste kdaj pomislili na pretvorbo vaše zasnove iz skice v HTML? Če je tako, boste verjetno morali dobiti Blade, vtičnik Skica, ki samodejno ustvari datoteke HTML iz vašega modela. Skupina bo pretvorila v div, besedilo v str in tako naprej.

Ko uporabljate Blade, lahko pripovedujete, kateri element DOM ustvari z dodajanjem posebnega imena plasti, kot je [btn] ali input [text], tako da Blade ve, kaj naj stori. Oglejte si ta videoposnetek za notranji videz.

Sedaj preberite: 12 Koristni vtičniki za razvijalce WordPressa