12 Essential Free Sketch Plugins
När Sketch 44 avslutar beta tittar vi på en av Sketchs bästa funktioner: det stora urvalet av open source plugins.
Sketch community är väldigt stödjande och du kan hitta massor av fantastiska plugins som radikalt förbättrar ditt arbetsflöde. I det här inlägget täcker jag de 12 bästa Sketch-pluggarna som alla designer ska ha.
1. Skissmått
Skissmått hjälper designers att organisera och skissera sitt arbete för utvecklare, projektledare och andra lagmedlemmar.
Men det här är också otroligt användbart för ensamvargar som designar och kodar alla sina projekt. Med åtgärdsprogrammet kan du beskriva element som visar specifika bredd / höjdmått för att få rätt mätningar vid en blick.
Detta inkluderar alla sidelement som knappar, text, ikoner och till och med större delar av tavlan.
Med Sketch Measure kan du till och med exportera sidor till HTML / CSS med sidstilar in-tact. Beviljas där finns Adobe-verktyg det kan också göra detta. Men med all denna funktion i Sketch gör ditt jobb det mycket enklare.
2. InVision Craft
Ett tag tillbaka meddelade InVision-teamet ett nytt plugin Hantverk . Men det här är mer som en serie plugins där du får massor av extrafunktioner och genvägar.
Ett exempel är Data plugin som låter konstruktörer dra text / data direkt från offentliga API på webben. På så sätt kan du automatiskt fylla din app med äkta innehåll och bilder i flygningen.
InVision-utvecklare uppdaterar ständigt Craft med nya plugin-funktioner för att göra detta ännu mer värdefullt för designers. Och nämnde jag att det här är helt gratis?
Hittills har Craft 6 stora plugin-funktioner, som alla är värda att lägga till i ditt design arbetsflöde.
- Freehand - realtids samarbete i Sketch
- Prototyp - Dynamisk prototyper med hög fidelitet
- Synkronisera - Omedelbar synkronisering mellan InVision-prototyper och skiss
- Data - Dra riktiga data från webben till din Sketch mockup
- Bibliotek - Designtillgångar i molnet som kan delas med hela ditt team
- Duplicera - blixtlös UI-kloning
Ta en titt på Craft hemsida och se vad du tycker. När du har provat det kommer du aldrig vilja gå tillbaka.
3. Sketch Toolbox
Varje Sketch-användare borde veta om Sketch Toolbox . Det är en utsökt plugin manager som bara gör installationen / anpassning av dina plugins mycket enklare.
Med den här Verktygslådan kan du bläddra igenom hundratals Sketch-plugins och välja vilka du vill installera. Du klickar bara på vad du vill och det laddas automatiskt ner till din dator, redo att användas.
Och Sketch Toolbox auto-uppdateringar plugins för att hålla dem springa smidigt.
Tekniskt sett är detta fortfarande i beta och det får alltid nya uppdateringar på GitHub . Men jag tycker att den är tillräckligt solid för att kunna användas i ett produktionsflöde. Faktum är att jag skulle argumentera för ett bra Sketch-arbetsflöde skulle inte vara komplett utan denna otroliga plugin manager.
4. Exporttillgångar
En av de mest detaljerade uppgifterna hos en designer är att allokera resurser och dela dem med utvecklare. Alla små ikoner, grafik, bakgrundsmönster, alla måste exporteras (vanligtvis för hand).
De Exportera tillgångar plugin gör denna process en vind. Observera att den här pluggen är gjord speciellt för mobilappar där designers behöver exportera Android / IOS-gränssnittstillgångar. Detta inkluderar retina tillgångar för @ 2x och @ 3x skärmstorlekar.
Jag har inte sett några funktioner relaterade till näthinnans webbdesign, men du kan kolla in Sketch Exporter plugin också. Det är för närvarande i beta och det är tänkt att vara en förbättrad version av originalet.
5. Innehåll Generator
Craft-plugin som jag nämnde tidigare erbjuder innehållsgenerering. Men du kanske vill ha något lite enklare så här Content Generator av Timur Carpeev.
Med det här installerade kan du automatiskt fylla i flera skisselement med en gång med relaterad data, till exempel:
- Användare avatars
- Första och efternamn
- Dummy stycke text
- Anpassade strängar (geos, priser, CC-kortnummer etc)
Allt innehåll dras från open source databaser som Unsplash och Uinames så du kan använda detta på flera projekt, kommersiellt eller på annat sätt.
6. Looper
Photoshop har en egen åtgärdspanel där du kan automatisera upprepade åtgärder. Sketch har inte en panel så här men den har den Looper plugin som är helt gratis och super lätt att lära sig.
Detta är mest användbart för att skapa repeterande mönster som tar över hela sidan. Grafiska designers kan hitta mer användning för detta plugin än webbdesigners, men det kan spara mycket tidsling genom repeterande skalning / dubbelarbete.
Ta en titt på Looper hemsida för att se vad det kan göra. Det kan inte vara användbart för alla, men för dem som kan använda det kommer du att spara dig mycket tid.
7. Skiss Iconfont
Webdesigners älskar ikon typsnitt . Stora ikoner gör UI-design mycket enklare och fontfiler är vanligtvis mindre än bilder.
De Sketch Iconfont plugin är en komplett hanteringspaket för att lagra, sortera och dra ikonfonter direkt in i Sketch. Som standard kommer pluginet tomt så du måste hämta ikonfonter lokalt för att kunna använda dem.
Men det här ger dig fullständig tillgång till jobbet med alla ikon typsnitt du hittar online. Det finns faktiskt en typsnitt paketpaket gjord speciellt för det här pluginet om du letar efter att fylla i din iconfont-mapp snabbt. Och du kan alltid skura på nätet för mer som tiden går vidare.
Jag rekommenderar absolut att du tar en kopia av det här pluginet. Ikon typsnitt är här för att stanna och de är ovärderliga för moderna webbplatser.
8. Style Inventory
När du startar en ny Sketch-fil måste du antingen göra stiler från början, eller du måste kopiera / klistra in stilar från tidigare mockups.
Med Style Inventory plugin du kan kringgå allt detta extra arbete. Bara några klick importerar alla dina tidigare stilar direkt in i ditt nya skissdokument för enkel åtkomst.
Dessa stilar inkluderar färger, textstilar och symboler, tillsammans med lagerformat för vissa element.
Denna plugin uppdateras sällan men jag rekommenderar det för att slå samman liknande mockups. Du kan också prova Sketch Palettes plugin för att spara och importera färgscheman.
9. Pixel Perfecter
Varje digital designer pryder sig på pixel-perfekt mockups. Denna uppgift är inte svår, men det kräver att varje designelement är perfekt anpassat till gallret och lämnar inga överlappningar eller ofullkomligheter.
Om du någonsin vill kontrollera ditt arbete innan du exporterar kan du springa Pixel Perfecter . Detta mycket lilla plugin kontrollerar alla dina filtillgångar för att se om några pixlar överflödar de traditionella X / Y-koordinatpositionerna som skapar ofullkomliga pixlar.
Observera att det inte automatiskt kommer att fixa dessa förskjutna pixelvärden. Det kommer bara att hitta lagret som orsakar problem och markera dem så att du kan gå in och fixa dem själv. Ändå sparar det mycket tid att kontrollera varje lager manuellt.
10. Dynamisk knapp
Den ursprungliga dynamiska knapp plugin var något övergiven 2015, men den nyare Dynamisk knapp plugin är ännu bättre och kompatibel med Sketch 3.5+.
Den lägger automatiskt till vadderings- och knappformat på vilket textlager du skapar, och vadderingen är dynamisk så att den uppdateras oavsett textstorlek. Detta är väldigt användbart för UI-designers som ständigt gör förändringar i deras mockups.
Detta kan också användas för mobila appar där knappar i allmänhet följer en fast storlek / förhållande. Det är inte det mest glamorösa Sketch-plugin, men det gör det bra.
11. Kompo
Om du vill ha en knappgenerator tillsammans med några extrafunktioner, då Kompo-plugin är värt att testa.
Compos skapare fick tanken efter att ha använt Dynamic Button-plugin ett tag, så småningom vill ha något lite snabbare. Kompo automatiskt genererar rätt knappstorlek och textstorlek för att matcha dina exakta specifikationer. Ett klick och du har en fungerande Sketch-komponent som automatiskt är dimensionerad och placerad korrekt.
Normalt när du skapar en knapp och ändrar texten påverkar det bara textlagret. Så den underliggande knappen skulle vara för liten. Compo ändrar automatiskt knappen och texten som om de är ett element.
Du kan hitta massor av demos på GitHub repo tillsammans med några användarhandböcker för att komma igång.
12. CSSketch
Sist men inte minst är det CSSketch plugin. Detta är mest användbart för designer + utvecklare combos som vill ha direkt tillgång till CSS-kod för alla stilar de skapar.
Alla sidor du designar kan köras genom det här pluginet för att exportera ett fullständigt formatblad med alla tillgångar redovisning. Men eftersom det här är automatiserat kan du inte förvänta dig A ++-kvalitetskod.
Jag föredrar fortfarande att koda min CSS för hand, men det här plugget innehåller åtminstone en utgångspunkt för icke-tekniska designers eller utvecklare som vill spara lite tid.
