10 bezplatných náčrtov náčrtov pre vývojárov webu

Náčrt získava veľa trakcie medzi webovými návrhármi a vývojármi. Toto je pravdepodobne preto, že je intuitívne, ľahko sa učiť a prichádza s mnohými funkciami, ktoré zjednodušujú vytváranie prototypu webových stránok. Môže to byť tiež preto, že táto aplikácia je rozšíriteľná, t. J. Môžete do aplikácie pridávať nové funkcie jednoducho pomocou doplnkov.

Tu je 10 pluginov, ktoré vám môžu pomôcť zvýšiť vašu produktivitu pri práci s náčrtom. Existujú rozmanité možnosti od generátorov obsahu, výberu farebnej palety a môžu vám pomôcť zobraziť merania hladín alebo automaticky pridať polstrovanie na vrstvu.

1. CSS Buddy

CSS Buddy umožňuje pridať CSS do vašej vrstvy v pracovnom priestore Sketch. V podstate môžete na vrstvu použiť CSS pomocou šírky, výšky, nepriehľadnosti, stínu, okraja a pozadia.

Po nainštalovaní tohto doplnku stačí vybrať vrstvu a potom vybrať Použite na vybrané z ponuky pluginov. V dialógovom okne sa zobrazí výzva na zadanie šablóny so štýlmi. Pridajte obsah CSS bez triedy CSS a sledujte, ako sa vaša vrstva formuje.

2. Paleta farebného dizajnu materiálu

Ak sledujete trend materiálového dizajnu, dôležitá vec, ktorú si všimnete, je použitie výrazných farieb. Material Design má úžasnú farebnú paletu. Teraz to môžete priviesť do svojho pracovného priestoru Navrhovanie materiálov Paleta farieb.

Tento doplnok generuje farebné palety v priebehu niekoľkých sekúnd bez toho, aby ste museli zatvoriť pracovný priestor. Zvoľte Odtieň, Hodnota alebo Vzor pre vytvorenie farebnej palety, ktorá je vhodná pre váš projekt.

3. Sketch Notebook

Niekedy musíme ukázať, čo robíme v komentároch alebo dokumentácii. Ak pracujete na projektoch s inými dizajnérmi alebo na účasť klienta, je to tiež nevyhnutné, aby ste mohli zaistiť, že výsledkom je to, o čom každý smeroval.

Náčrt notebooku je plugin pre zdokumentovanie vášho dizajnu v skici ľahko. Do vášho pracovného priestoru sa pridá ďalší postranný panel, ktorý obsahuje komentáre, ktoré pridáte k ľubovoľnému prvku vášho dizajnu. Môžete zoradiť komentár, upraviť, odstrániť a prepínať viditeľnosť komentárov.

4. Denný prehrávač

Pred použitím reálnych obrázkov v dizajne často používame zástupné symboly na urýchlenie procesu návrhu. V prípade náčrtu môžete použiť Denný prehrávač pridať prispôsobené zástupné symboly do ľubovoľnej vrstvy na pracovnom priestore Skicu zo 6 služieb pre zástupné symboly, medzi ktoré patria aj Placehold.it, LoremPixel a Unsplash. Po aktivácii môžete nastaviť šírku, výšku a ďalšie informácie záberu.

5. Generátor obsahu

Máme plugin na vloženie zástupných symbolov, ako jeden pre všeobecný obsah? Generátor obsahu pomáha pridať fiktívne údaje, ako sú napríklad avatary, mená, geolokačné údaje a ďalšie. Funguje skvelo pre návrhy modelov a pre obmedzenie bolesti hlavy, aby sa snažili zistiť, ako generovať dáta na mieste.

Ak chcete pridať figuríny, stačí vybrať vrstvu a potom vybrať Plugin> Generátor, a vyberte Geo, Osoba alebo fotografie.

6. Opatrenie náčrtu

Náčrtná miera je nástroj na meranie nástroja Sketch. Meria dĺžku alebo veľkosť vrstvy (alebo vrstiev) vo vašom dizajne. Dostanete tiež výplň a okraj vrstvy, ako aj vzdialenosť medzi dvoma vrstvami. Funkcia Náčrt môže tiež tlačiť vlastnosti vrstvy, napríklad farbu, okraj a nepriehľadnosť. Všetky merania je možné vyvolať pomocou klávesových skratiek.

7. Dynamické tlačidlo

Dynamické tlačidlo vám pomôže ľahko vytvoriť tlačidlo s pevnými paddings. Automaticky upraví polstrovanie na základe hodnoty, ktorú dáte, bez ohľadu na dĺžku textu. S nainštalovaným doplnkom môže byť text premenený na štruktúru s odkazom Command + J. Množstvo potrebného polstrovania potom môže byť vtlačené do textovej vrstvy (0: 0: 0: 0) (pod skupinou tlačidiel flex).

8. Typografická mierka

Typografická mierka je plugin na premenu vybranej textovej vrstvy na typografickú mieru. Ak chcete použiť tento doplnok, stačí vybrať textovú vrstvu (jednu alebo viac) alebo zmiešanú vrstvu, ktorá obsahuje aspoň jednu textovú vrstvu, a potom vyberte Plugin> Typografická mierka a nastavte hodnotu v dialógovom okne. Výsledkom je súbor zväčšeného textu, ktorý nasleduje podľa pravidiel typografickej stupnice.

9. Modulizér

s Modulizer môžete ovládať výplne tlačidla, modulu alebo oblastí na vašom dizajne pomocou klávesovej skratky Shift + Command + M. Môžete kombinovať všetky svoje vrstvy, zoskupiť ich potom pomocou skratky automaticky upraviť polstrovanie na základe hodnoty výplne, ktorú potrebujete , Sledujte demo videa a ukážte to v akcii.

10. Čepeľ

Premýšľali ste niekedy o premene vášho návrhu z náčrtu na HTML? Ak áno, asi by ste sa mali dostať čepeľ, doplnok Sketch, ktorý automaticky generuje súbory HTML z vášho dizajnu. Bude konvertovať skupinu do div, text do p a tak ďalej.

Pri použití nástroja Blade môžete povedať doplnku, ktorý prvok DOM sa generuje pridaním špeciálneho názvu do vrstvy, ako je napríklad [btn] alebo zadanie [text], takže Blade vie, čo má robiť. Pozrite si toto video demo pre vnútorný vzhľad.

Prečítajte si: 12 Užitočné pluginy pre vývojárov WordPress