12 Essential Free Sketch Plugins
Som Sketch 44 udløber beta, kigger vi på en af Sketchs bedste funktioner: det store udvalg af open source plugins.
Sketch-fællesskabet er vildt støttende, og du kan finde masser af fantastiske plugins, der vil forbedre din arbejdsgang radikalt. I dette indlæg dækker jeg de 12 bedste Sketch-plugins, som hver designer skal have.
1. Skitseforanstaltning
Skitseforanstaltning hjælper designere med at organisere og skitsere deres arbejde for udviklere, projektledere og andre teammedlemmer.
Men det er også utroligt nyttigt for ensomme ulve, der designer og kode alle deres projekter. Med Measure plugin kan du skitsere elementer med specifikke bredde / højde dimensioner for at få de korrekte målinger med et overblik.
Dette omfatter alle sideelementer som knapper, tekst, ikoner og endda større dele af tavlen.
Med Sketch Measure kan du endda eksportere sider til HTML / CSS med sidestiler in-tact. Bevilget der er Adobe-værktøjer det kan også gøre dette. Men at have al denne funktionalitet lige i Sketch gør dit arbejde meget lettere.
2. InVision Craft
Et øjeblik tilbage meddelte InVision-teamet et nyt plugin craft . Men det er mere som en pakke af plugins, hvor du får mange ekstra funktioner og genveje.
Et eksempel er Data plugin som lader designere trække tekst / data direkte fra offentlige API'er på internettet. På denne måde kan du automatisk udfylde din app med ægte indhold og billeder i luften.
InVision-udviklere opdaterer løbende Craft med nye plugin-funktioner for at gøre dette endnu mere værdifuldt for designere. Og har jeg nævnt, at dette er helt gratis?
Hidtil har Craft 6 store plugin funktioner, som alle er værd at tilføje til dit design workflow.
- Freehand - realtids samarbejde i Sketch
- Prototype - Dynamisk high-fidelity prototyping
- Synkronisere - øjeblikkelig synkronisering mellem InVision prototyper & Sketch
- Data - Træk virkelige data fra internettet til din Sketch mockup
- Bibliotek - Designaktiver i skyen, der kan deles med hele dit hold
- Duplikere - lyn hurtig UI kloning
Tag et kig på Håndværk hjemmeside og se hvad du synes. Når du har prøvet det, vil du aldrig gå tilbage.
3. Skitse Toolbox
Hver Sketch-bruger skal vide om Skitse Toolbox . Det er en udsøgt plugin manager, der gør det meget lettere at installere / tilpasse dine plugins.
Med denne værktøjskasse kan du gennemse hundredvis af Sketch plugins og vælge hvilke som du vil installere. Du klikker bare på hvad du vil, og den downloades automatisk til din computer, klar til brug.
Og Sketch Toolbox auto opdateringer plugins for at holde dem kører problemfrit.
Teknisk set er dette stadig i beta, og det modtager altid nye opdateringer på GitHub . Men jeg tror, det er solidt nok til at bruge i en produktionsarbejdsproces. Faktisk vil jeg argumentere for en god Sketch-workflow ville ikke være komplet uden denne utrolige plugin manager.
4. Eksportaktiver
En af de mest detaljerede opgaver af en designer er at tildele ressourcer og dele dem med udviklere. Alle de små ikoner, grafik, baggrundsmønstre, alle skal eksporteres (normalt for hånd).
Det Eksportaktiver plugin gør denne proces til en leg. Bemærk blot, at denne stik er lavet specielt til mobile apps, hvor designere skal eksportere Android / IOS-interfaceaktiver. Dette omfatter retinaaktiver for @ 2x og @ 3x skærmstørrelser.
Jeg har ikke set nogen funktioner relateret til nethinden webdesign, men du kan tjekke ud Sketch Exporter plugin også. Det er i øjeblikket i beta, og det er meningen at være en forbedret version af originalen.
5. Content Generator
Den Craft-plugin, jeg nævnte tidligere, tilbyder indholdsgenerering. Men du vil måske have noget lidt enklere som dette Content Generator af Timur Carpeev.
Med dette installeret kan du automatisk befolke flere Sketch-elementer på én gang med relaterede data såsom:
- Bruger avatarer
- For- og efternavne
- Dummy afsnit tekst
- Tilpassede strings (geos, priser, CC-kortnumre osv.)
Alt indhold er trukket fra open source databaser som Unsplash og Uinames så du kan bruge dette på flere projekter, kommercielt eller på anden måde.
6. Looper
Photoshop har sit eget Actions panel, hvor du kan automatisere gentagne handlinger. Sketch har ikke et panel som dette, men det har den Looper plugin som er helt gratis og super let at lære.
Dette er mest nyttigt for at skabe gentagende mønstre, der overtager hele siden. Grafiske designere kan finde mere brug for dette plugin end webdesignere, men det kan spare en masse tidsløshed gennem gentagne skalerings- / duplikeringsopgaver.
Tag et kig på Looper hjemmeside at se, hvad det kan gøre. Det kan ikke være nyttigt for alle, men for dem der kan bruge det, vil du finde dig selv at spare meget tid.
7. Skitse Iconfont
Web designere elsker ikon skrifttyper . Store ikoner gør UI-design meget lettere, og skrifttypefiler er generelt mindre end billeder.
Det Sketch Iconfont plugin er en komplet management suite til opbevaring, sortering og trække ikon skrifttyper lige ind i Sketch. Som standard kommer plugin'en tom, så du skal downloade ikonfonter lokalt for at kunne bruge dem.
Men det giver dig fuld adgang til arbejde med alle ikonfonte, du finder online. Der er faktisk en font bundpakke lavet specielt til dette plugin, hvis du ønsker at udfylde din iconfont mappe hurtigt. Og du kan altid skure nettet for mere som tiden går videre.
Jeg anbefaler absolut at tage en kopi af dette plugin. Ikon skrifttyper er her for at blive og de er uvurderlige for moderne hjemmesider.
8. Style Inventory
Når du starter en ny Sketch-fil, skal du enten genstille stilarter fra bunden, eller du skal kopiere / indsætte stilarter fra tidligere mockups.
Med Style Inventory plugin du kan omgå alt dette ekstra arbejde. Få få klik importerer alle dine tidligere stilarter lige ind i dit nye Sketch-dokument for nem adgang.
Disse stilarter omfatter farver, tekststile og symboler, sammen med lagstile for bestemte elementer.
Dette plugin opdateres sjældent, men jeg anbefaler det til sammenlægning af lignende mockups. Du kan også prøve Sketch Palettes plugin for at gemme og importere farveskemaer.
9. Pixel Perfecter
Hver digital designer pryder sig på pixel-perfekte mockups. Denne opgave er ikke svært, men det kræver, at hvert designelement skal være perfekt tilpasset nettet, der efterlader ingen overlapninger eller ufuldkommenheder.
Hvis du nogensinde vil tjekke dit arbejde, før du eksporterer, kan du køre Pixel Perfecter . Denne meget lille plugin kontrollerer alle dine filaktiver for at se, om nogle pixels overlader de traditionelle X / Y-koordinatpositioner, der skaber ufuldkomne pixels.
Bemærk dette vil ikke automatisk rette disse forskydede pixelværdier. Det vil bare finde lag (erne), der forårsager problemer og fremhæve dem, så du kan gå ind og rette dem selv. Det sparer dog meget tid på at kontrollere hvert lag manuelt.
10. Dynamisk knap
Den oprindelige dynamiske knap-plugin blev lidt forladt i 2015, men den nyere Dynamisk knap plugin er endnu bedre og kompatibel med Sketch 3.5+.
Den tilføjer automatisk polstring og knappestil på ethvert tekstlag, du opretter, og polstring er dynamisk, så det opdateres uanset tekststørrelse. Dette er vildt nyttigt for UI-designere, der konstant foretager ændringer i deres mockups.
Dette kan også bruges til mobile apps, hvor knapper generelt følger en fast størrelse / forhold. Det er ikke den mest glamourøse Sketch plugin, men det gør sin opgave godt.
11. Compo
Hvis du vil have en knapgenerator sammen med nogle ekstra funktioner, så Compo plugin er værd at teste.
Compos skaber fik ideen efter at have brugt Dynamic Button plugin i et stykke tid, og i sidste instans ønskede noget lidt hurtigere. Compo automatisk genererer den korrekte knapstørrelse og tekststørrelse, så de passer til dine nøjagtige specifikationer. Et klik og du har en fungerende Sketch-komponent, der automatisk er dimensioneret og placeret korrekt.
Normalt når du opretter en knap og ændrer teksten, påvirker det kun tekstlaget. Så den underliggende knap ville være for lille. Compo ændrer automatisk knappen og teksten som om de er et element.
Du kan finde tonsvis af demoer på GitHub repo sammen med nogle brugervejledninger for at komme i gang.
12. CSSketch
Sidst men bestemt ikke mindst er CSSketch plugin. Dette er mest nyttigt for designer + udviklerkombinationer, der ønsker direkte adgang til CSS-kode for alle de stilarter, de opretter.
Enhver side, du designer, kan køres gennem dette plugin for at eksportere et komplet stilark, hvor alle aktiver står for. Men da dette er automatiseret, kan du ikke forvente A ++ kvalitetskode.
Jeg foretrækker stadig at kode min CSS for hånd, men dette plugin indeholder i det mindste et udgangspunkt for ikke-tekniske designere eller udviklere, der ønsker at spare lidt tid.
