10 gratis skissepropper for webutviklere

Skisse får mye traksjon blant webdesignere og utviklere. Dette er trolig fordi det er intuitiv, lett å lære og kommer med mange funksjoner som gjør det mye enklere å lage en nettsideprototype. Det kan også skyldes at denne applikasjonen er utvidbar, dvs. at du enkelt kan legge til nye funksjoner ved hjelp av plugins.

Her er 10 plugins som kan hjelpe deg å øke produktiviteten din når du arbeider med Sketch. Det er variert, alt fra innholdsgeneratorer, fargepalettvelger, og de kan hjelpe deg med å vise lagmålinger eller legge til utfylling til et lag.

1. CSS Buddy

CSS Buddy lar deg legge til CSS i laget ditt i Sketch-arbeidsområdet. I utgangspunktet kan du bruke bredde, høyde, opasitet, bokseskygge, kantlinje og bakgrunn til laget ved hjelp av CSS.

Med dette pluginet installert, velg bare et lag og velg deretter Søk på Utvalgt fra plugin-menyen. En dialogboks vil be deg om å skrive inn stilarket ditt. Legg til CSS-innholdet uten CSS-klassen og se laget ditt ta form.

2. Materiale Design Farge Palette

Hvis du følger trenden med Material Design, er en fremtredende ting du vil merke, bruken av særegne farger. Material Design har en fantastisk fargepalett. Nå kan du ta med det til arbeidsområdet med Material Design Color Palette Plugin.

Dette pluginet vil generere fargepaletter i sekunder uten at du må lukke arbeidsområdet. Velg Hue, Value eller Swatch for å generere en fargepalett som passer for prosjektet ditt.

3. Skisse Notatbok

Noen ganger må vi vise hva vi gjør i en kommentar eller via dokumentasjon. Hvis du jobber med prosjekter med andre designere eller en klients involvering, er dette også nødvendig, slik at du kan sikre at utfallet er det som alle sikte på.

Sketch Notebook er et plugin for å dokumentere designen din i Sketch med letthet. Det legger til et ekstra sidebjelke i arbeidsområdet ditt, som inneholder kommentarer du legger til i et element på designen din. Du kan endre rekkefølgen på kommentaren, tilpasse, slette og bytte kommentarsynlighet.

4. Day Player

Før du bruker ekte bilder i et design bruker vi ofte plassholderbilder for å øke hastigheten på designprosessen. For Sketch, kan du bruke Day Player å legge til tilpassede plassholdere til et hvilket som helst lag i Sketch-arbeidsområdet fra 6 placeholder image-tjenester, inkludert Placehold.it, LoremPixel og Unsplash. Når du er aktivert, kan du angi bildebredde, høyde og annen informasjon.

5. Innhold Generator

Vi har allerede et plugin for å sette inn plassholderbilder, hva med en for generelt innhold? Innholdsgenerator hjelper deg med å legge til dummy data som avatarer, navn, geolocation data og mer. Fungerer bra for mockup-design og for å redusere hodepine fra å prøve å finne ut hvordan du genererer data på stedet.

For å legge til dummy data, velg bare et lag, og velg deretter Plugin> Generator, og velg Geo, persona eller Bilder.

6. Skissemåte

Skissemåte er et måleverktøy for Sketch. Det måler lengden eller størrelsen på et lag (eller lag) i designet. Du får også polstring og margin på et lag, så vel som avstanden mellom to lag. Sketch Measure kan også skrive ut lagegenskapene, for eksempel farge, kantlinje og opasitet. Alle målinger kan hentes opp via tastatursnarveier.

7. Dynamisk knapp

Dynamisk knapp hjelper deg med å lage knapp med faste paddings enkelt. Den justerer automatisk utfyllingen basert på verdien du gir, uansett lengden på teksten. Med plugin installert, kan en tekst konverteres til en struktur med snarveien Command + J. Mengden polstring som kreves, kan deretter stanses inn i tekstlaget (0: 0: 0: 0).

8. Typografisk skala

Typografisk skala er et plugin for å slå valgt tekstlag til typografisk skala. For å bruke dette pluginet, velg bare tekstlag (enkelt eller flere) eller blandet lag som inneholder minst ett tekstlag, og velg deretter Plugin> Typografisk skala og juster verdien på dialogboksen. Resultatet er et sett med skalert tekst som følger reglene for typografisk skala.

9. Modulizer

Med Modulizer Du kan styre paddingene for knapp, modul eller områder på design med tastatursnarveien Shift + Command + M. Du kan kombinere alle lagene dine, gruppere det og bruk snarveien til å justere utfyllingen din automatisk basert på den polstrede verdien du trenger . Se videodemoen for å se dette i aksjon.

10. Blade

Har du noen gang tenkt på å konvertere design fra skisse til HTML? I så fall skal du sannsynligvis få Blad, et Sketch-plugin som automatisk genererer HTML-filer fra ditt design. Det vil konvertere gruppen inn i div, tekst inn i p og så videre.

Når du bruker Blade, kan du fortelle pluggen hva DOM-elementet skal genereres ved å legge til et spesielt navn på laget, for eksempel [btn] eller input [text] slik at Blade vet hva den skal gjøre. Sjekk ut denne videodemoen for et innvendig utseende.

Nå Les: 12 Nyttige Plugins for WordPress Utviklere