Som Sketch 44 går ut av beta, tar vi en titt på en av Sketchs beste funksjoner: det store utvalg av open source plugins.

Sketch-fellesskapet er veldig støttende, og du kan finne mange fantastiske plugins som vil forbedre arbeidsflyten din radikalt. I dette innlegget vil jeg dekke de 12 beste Sketch-pluginene som hver designer burde ha.

1. Skissemåte

Skissemåte hjelper designere til å organisere og skissere sitt arbeid for utviklere, prosjektledere og andre lagmedlemmer.

Men dette er også utrolig nyttig for enslige ulver som designer og koder alle sine prosjekter. Med Mål-pluginet kan du skissere elementer som viser spesifikke bredde- / høyde dimensjoner for å få riktig måling på et øyeblikk.

Dette inkluderer alle sideelementer som knapper, tekst, ikoner og til og med store deler av tavlen.

Med Sketch Measure kan du til og med eksportere sider til HTML / CSS med sidestiler in-tact. Gitt det er Adobe-verktøy det kan også gjøre dette. Men å ha all denne funksjonaliteten rett i Sketch gjør jobben din så mye enklere.

01-skisse-mål-plugin

2. InVision Craft

En stund tilbake annonserte InVision-teamet et nytt plugin Craft . Men dette er mer som en pakke med plugins hvor du får mange ekstra funksjoner og snarveier.

Et eksempel er Data plugin som lar designere trekke tekst / data direkte fra offentlige APIer på nettet. På denne måten kan du automatisk fylle appen din med ekte innhold og bilder på fluen.

InVision-utviklere oppdaterer kontinuerlig Craft med nye plugin-funksjoner for å gjøre dette enda mer verdifullt for designere. Og nevnte jeg at dette er helt gratis?

Hittil har Craft 6 store plugin-funksjoner, som alle er verdt å legge til i design-arbeidsflyten din.

  • Ledig hånd - realtids samarbeid i skisse
  • prototype - Dynamisk high-fidelity prototyping
  • Sync - øyeblikkelig synkronisering mellom InVision-prototyper og skisser
  • Data - Trekk ekte data fra nettet til Sketch mockup
  • Bibliotek - Design eiendeler i skyen deles med hele teamet ditt
  • Duplisere - Lynrask UI-kloning

Ta en titt på Craft hjemmeside og se hva du synes. Når du har prøvd det, vil du aldri gå tilbake.

02-craft-plugin

3. Skisseverktøyskasse

Hver Sketch bruker burde vite om Sketch Toolbox . Det er en utsøkt plugin manager som bare gjør installering / tilpassing av plugins mye enklere.

Med denne verktøykassen kan du bla gjennom hundrevis av Sketch plugins og velge hvilke du vil installere. Du klikker bare på det du vil, og det blir automatisk lastet ned til datamaskinen, klar til bruk.

Og Sketch Toolbox auto oppdateringer plugins for å holde dem kjører jevnt.

Teknisk er dette fortsatt i beta, og det mottar alltid nye oppdateringer på GitHub . Men jeg tror det er solid nok til å bruke i en produksjons arbeidsflyt. Faktisk ville jeg argumentere for en god Sketch-arbeidsflyt ville ikke være komplett uten denne utrolige plugin manager.

03-skisse-verktøykasse

4. Eksporter eiendeler

En av de mest detaljerte oppgavene til en designer er å tildele ressurser og dele dem med utviklere. Alle de små ikonene, grafikk, bakgrunnsmønstre, alle må eksporteres (vanligvis for hånd).

De Eksporter Assets plugin gjør denne prosessen til en bris. Bare vær oppmerksom på at denne pluggen er laget spesielt for mobilapper der designere må eksportere Android / IOS-grensesnittet. Dette inkluderer retina eiendeler for @ 2x og @ 3x skjermstørrelser.

Jeg har ikke sett noen funksjoner relatert til netthinnen webdesign, men du kan sjekke ut Sketch Exporter plugin også. Det er for tiden i beta, og det er ment å være en forbedret versjon av originalen.

04-skisse-eksport

5. Content Generator

Craft plugin jeg nevnte tidligere tilbyr innholdsgenerering. Men du vil kanskje ha noe litt enklere som dette Innholdsgenerator av Timur Carpeev.

Med dette installerte kan du automatisk fylle flere Sketch-elementer samtidig med relaterte data, for eksempel:

  • Bruker avatars
  • Første og etternavn
  • Dummy avsnitt tekst
  • Tilpassede strenge (geos, priser, CC-kortnummer osv.)

Alt innhold blir trukket fra åpen kildekode databaser som Unsplash og Uinames slik at du kan bruke dette på flere prosjekter, kommersielt eller på annen måte.

6. Looper

Photoshop har sitt eget handlingspanel der du kan automatisere gjentatte handlinger. Sketch har ikke et panel som dette, men det har den Looper plugin som er helt gratis og super lett å lære.

Dette er mest nyttig for å lage gjentatte mønstre som tar over hele siden. Grafiske designere kan finne mer bruk for denne plugin enn webdesignere, men det kan spare mye tid på å løpe gjennom repetitive skalerings- / dupliseringsoppgaver.

Ta en titt på Looper hjemmeside for å se hva det kan gjøre. Det kan ikke være nyttig for alle, men for de som kan bruke det, vil du finne deg selv å spare mye tid.

05-looper-skisse-plugin

7. Skisse Iconfont

Webdesignere elsker ikon skrifter . Gode ​​ikoner gjør UI-design mye lettere, og skriftfiler er generelt mindre enn bilder.

De Sketch Iconfont plugin er en komplett management suite for lagring, sortering og trekking av ikonfonter rett inn i Sketch. Som standard kommer plugin-modulen tom, så du må laste ned ikonfonter lokalt for å kunne bruke dem.

Men dette gir deg full tilgang til arbeid med eventuelle ikonfonter du finner online. Det er faktisk en fontpakkepakke laget spesielt for dette pluginet hvis du ønsker å fylle opp din iconfont-mappe raskt. Og du kan alltid skure nettet for mer etter hvert som tiden går.

Jeg anbefaler absolutt å ta en kopi av dette pluginet. Ikonfonter er her for å bli og de er uvurderlige for moderne nettsteder.

06-icon-font-valg-plugin

8. Style Inventory

Når du starter en ny Sketch-fil, må du enten lage stiler fra begynnelsen, eller du må kopiere / lime inn stiler fra tidligere mockups.

Med Stille inventering plugin Du kan omgå alt dette ekstra arbeidet. Bare noen få klikk importerer alle dine tidligere stiler rett inn i det nye Sketch-dokumentet for enkel tilgang.

Disse stilene inkluderer farger, tekststiler og symboler, sammen med lagstiler for enkelte elementer.

Denne plugin er sjelden oppdatert, men jeg anbefaler det for å slå sammen lignende mockups. Du kan også prøve Sketch Palettes plugin for lagring og import av fargeskjemaer.

07-skisse-style-beholdning

9. Pixel Perfecter

Hver digital designer stoler seg på piksel-perfekte mockups. Denne oppgaven er ikke vanskelig, men det krever at hvert designelement skal være perfekt justert med rutenettet, og etterlater ingen overlapper eller mangler.

Hvis du vil sjekke arbeidet ditt før du eksporterer, kan du kjøre Pixel Perfecter . Denne svært små plugin sjekker alle filtillatelsene dine for å se om noen piksler overløper de tradisjonelle X / Y-koordinatposisjonene som skaper ufullstendig piksler.

Merk dette vil ikke automatisk fikse disse offset-pixelverdiene. Det vil bare finne lagene som forårsaker problemer og markere dem slik at du kan gå inn og fikse dem selv. Likevel sparer det mye tid på å kontrollere hvert lag manuelt.

10. Dynamisk knapp

Den opprinnelige dynamiske knappen plugin ble litt forlatt i 2015, men den nyere Dynamisk knapp Plugin er enda bedre og kompatibel med Sketch 3.5+.

Den legger automatisk til polstring og knappestiler på ethvert tekstlag du lager, og polstringen er dynamisk, slik at den oppdateres uansett tekststørrelse. Dette er veldig nyttig for UI-designere som stadig gjør endringer i deres mockups.

Dette kan også brukes til mobilapper der knappene generelt følger en fast størrelse / forhold. Det er ikke det mest glamorøse Sketch-pluginet, men det gjør det bra.

08-dynamisk-knapp-plugin

11. Kompo

Hvis du vil ha en knappgenerator sammen med noen ekstra funksjoner, så Compo plugin er verdt å teste.

Compos skaperen fikk ideen etter å ha brukt Dynamic Button-pluginet en stund, og ønsket seg noe litt raskere. Komponautomatisk genererer riktig knappestørrelse og tekststørrelse for å matche dine eksakte spesifikasjoner. Ett klikk og du har en fungerende Sketch-komponent som automatisk er dimensjonert og plassert riktig.

Normalt når du oppretter en knapp og endrer teksten, vil det bare påvirke tekstlaget. Så den underliggende knappen vil være for liten. Compo tilpasser automatisk knappen og teksten som om de er ett element.

Du finner tonnevis av demoer på GitHub repo sammen med noen brukerhåndbøker for å komme i gang.

09-compo-plugin-skisse

12. CSSketch

Sist men absolutt ikke minst er CSSketch plugg inn. Dette er mest nyttig for designer + utviklerkombinasjoner som ønsker direkte tilgang til CSS-koden for alle stilene de oppretter.

En hvilken som helst side du designer kan kjøres gjennom dette pluginet for å eksportere et fullstendig stilark med alle eiendelene tatt med. Men siden dette er automatisert, kan du ikke forvente A ++ kvalitetskode.

Jeg foretrekker fortsatt å kode min CSS for hånd, men dette plugin gir i det minste et utgangspunkt for ikke-tekniske designere eller utviklere som vil spare litt tid.

10-cssketch-plugin