Innehåll
- 01. Kopiera och klistra in guider
- 02. Skissrengöring
- 03. Anima
- 04. React Sketch.app
- 05. Git Sketch Plugin
- 06. ImageOptim
- 07. Magisk spegel
- 08. Exportera mer
- 11. Marketch
- 12. Segmenterade cirklar
- 13. Sketch Runner
- 14. Ikon typsnitt
- 15. Hitta och ersätt
Sketch plugins gör Sketch ännu bättre. Skiss är det användbara UI-webbdesignverktyget som valts för många, och en del av det som gör är så bra är samhället av människor som arbetar för att utöka dess funktionalitet och funktioner genom att bygga anpassade plugins.
Hanteringen av dina Sketch-plugins är nu enklare än någonsin. Plugins uppdateras automatiskt och föråldrade inaktiveras. Att göra plugin-ekosystemet ännu mer användbart är Sketch Cloud, en fildelningstjänst som alla kan registrera sig för, där du kan visa, ladda ner och kommentera Sketch-dokument som har delats offentligt eller privat direkt från Sketch.
Så låt oss titta på de bästa Sketch-pluginsna - de som drastiskt kan förändra hur du utformar användargränssnitt. När du har upptäckt en du vill läsa om hur du installerar Sketch-plugins. Om du älskar dina webbverktyg, missa inte våra favoritverktyg för webbdesign, webbplatsbyggare och molnlagringsrundor. Och kom ihåg att ditt val av webbhotell är avgörande för din webbplats framgång (vår guide hjälper).
01. Kopiera och klistra in guider
- Ladda ner här
- Pris: Fri
- Sammanfattning: Kopiera, klistra in eller ta bort guider från dina tavlor
Varje designer har ett kärleks- / hatförhållande med guider. Ibland är de absolut nödvändiga, och resten av tiden kommer de bara i vägen. Om du använder guider istället för Sketch's layoutalternativ kan det vara en mardröm att ändra dem för flera ritytor, men med detta plugin är det enkelt att kopiera, klistra in och ta bort guider från alla dina ritytor.
02. Skissrengöring
- Ladda ner här
- Pris: $2
- Sammanfattning: Få dina designfiler så rena som en visselpipa
Varje skissdesign som har genomgått några iterationer kommer säkert att hämta lite skräp längs vägen, till exempel dolda lager, inkonsekventa gränspositioner och oanvända lagerstilar.
Det är inte slutet på världen att ha en rörig Sketch-fil, men det kan påverka hand-off, och det kommer att göra livet enklare för alla som måste förstå det på linjen. Istället för att gå igenom allt för hand, använd Sketch Cleaner för att hantera alla vanliga problem automatiskt.
03. Anima
- Ladda ner här
- Pris: Gratis uppåt
- Sammanfattning: Skapa lyhörda, high-fidelity-prototyper
Tidigare tillgängligt som separata gratis plugins - Auto Layout och Launchpad - Anima är nu ett allt-i-ett-plugin som är utformat för att hjälpa dig skapa responsiva layouter med stift, staplar och vaddering och high-fidelity-prototyper som passar alla skärmar. Det finns fortfarande en gratis version som stöder ett projekt; för obegränsade projekt börjar prissättningen på $ 25 per månad.
04. React Sketch.app
- Ladda ner här
- Pris: Fri
- Sammanfattning: Rendera React-komponenter till skiss
Det kan vara svårt att hantera designtillgångar i Sketch. Det här praktiska Sketch-plugin-programmet ger ett enklare och mer tillförlitligt sätt att hantera dina tillgångar. Implementera dina mönster i kod som React-komponenter och använd sedan detta plugin för att göra dem i skiss. Det gör det också lättare att hämta och implementera verklig data i dina Sketch-filer.
React Sketch.app utvecklades av Airbnb för användning med dess designsystem, i syfte att hjälpa till att överbrygga klyftan mellan designers och utvecklare.
05. Git Sketch Plugin
- Ladda ner här
- Pris: Fri
- Sammanfattning: En Git-klient inbyggd i Sketch
Detta plugin syftar till att ge versionskontroll till Sketch. Det fungerar genom att exportera en bild för varje del av designen och sedan skapa ganska olika skillnader så det är klart vilka förändringar som har gjorts. Genom att dokumentera varje steg i designprocessen kan alla i teamet se hur designen har utvecklats.
Git Sketch Plugin skapades av Mathieu Dutour, som sedan dess har gått vidare till att skapa ett mer omfattande, betalt versionskontrollsystem som heter Kactus.
06. ImageOptim
- Ladda ner här
- Pris: Fri
- Sammanfattning: Bildoptimering i Sketch
Sketch erbjuder en egen lösning för att optimera SVG-filer, men det finns inga alternativ för komprimering av JPG- och PNG-bilder. Eftersom ImageOptim har erbjudit en gedigen tjänst under ett antal år är det vettigt att det skulle ge denna funktionalitet till Sketch.
Alla designers som bryr sig om laddningstider och bildoptimering (som bör vara alla designers) bör lägga till ImageOptim i sin verktygslåda. Observera att förutom pluginprogrammet behöver du kärnan ImageOptim-appen (gratis) installerad på ditt macOS-system, och du måste fortfarande markera lager som exporterbara i Sketch (navigera till "Exportera och optimera alla tillgångar" för att börja).
07. Magisk spegel
- Ladda ner här
- Pris: Från $ 4 / mån
- Sammanfattning: Verktyg för bildperspektivtransformation
Om du försöker göra imponerande produktmodeller men måste fortsätta hoppa in i Photoshop för att hantera de knepiga sakerna, kan Magic Mirror vara en livräddare för dig. Det är ett transformationsverktyg för bildperspektiv som gör att du kan skapa perspektivmodeller och andra förvrängda effekter utan att någonsin lämna Sketch.
08. Exportera mer
- Ladda ner här
- Pris: Fri
- Sammanfattning: Genererar automatiskt platshållarbilder
Att lägga till platshållarbilder till en design är en nödvändig del av prototyper, men det kan vara ont att hitta de faktiska bilderna. Så istället för att slösa bort någon tid på det, lämna allt till Day Player. Detta gör att du kan lägga till anpassade platshållarbilder till vilket Sketch-dokument som helst, från ett antal olika platshållarbildtjänster, så det största beslutet du måste fatta är om du vill använda Bill Murray, Nicolas Cage eller kattungar.
11. Marketch
- Ladda ner här
- Pris: Fri
- Sammanfattning: Skapa html-sida som kan mäta och få CSS-stilar
Om du vill hämta CSS-stilar från dina skissdesigner är ett plugin som Marketch absolut nödvändigt. Det gör att du kan exportera dina Sketch-tavlor som en zip-fil full av HTML-dokument som du sedan kan extrahera för att få ut massor av söta CSS, redo att gå.
12. Segmenterade cirklar
- Ladda ner här
- Pris: Fri
- Sammanfattning: Skapa exakt cirkulär grafik
Här är ett snabbt sätt att skapa segmenterade cirklar för diagram och diagram. Detta plugin kan producera olika stilar av cirkeldiagram inklusive streckade och bockmarkeringar, och tjocklekarna styrs via en enkel lista med kommaseparerade värden.
13. Sketch Runner
- Ladda ner här
- Pris: Fri
- Sammanfattning: Spotlight för sökning
Sketch är mycket älskad för sitt minimalistiska tangentbordsflöde. Med detta sagt finns det alltid två eller tre kortkommandon som du alltid tycks glömma eller förvirra med en annan designapp som Photoshop - och låt oss inte glömma de mindre vanliga verktygen och funktionerna som inte har en kortkommando och är dolda djupt i Skissmeny.
Sketch Runner löser dessa problem och gör det på ett sätt som macOS-användare känner till - Sketch Runner är macOS Spotlight, men för Sketch.
14. Ikon typsnitt
- Ladda ner här
- Pris: Fri
- Sammanfattning: Hantera ikonsteckensnitt
Ikonfonter är ett mycket effektivt sätt att använda ikoner i dina webbdesigner utan att behöva exportera och optimera massor av bildtillgångar. Vanligtvis refererar vi till teckensnitt i ikonen huvud> avsnitt av HTML-webbsidor, som vi gör med CSS och JavaScript. Att använda dem i Sketch är dock lite mer komplicerat. Tack och lov gör Icon Font det enkelt.
Efter nedladdning och installation av Sketch IconFont, ladda ner SVG-teckensnittsfiler eller ladda ner det här teckensnittspaketet, som inkluderar teckensnittsfilerna för FontAwesome, Material Design Icons, Ion Icons och Simple Line Icons. När du är klar navigerar du till Plugins> Icon Font> Install a Font-Bundle, markerar de nedladdade teckensnitten från dialogrutan Open File och navigerar sedan till Plugins> Icon Font> Grid Insert> [ditt önskade ikonfont] för att infoga en ikon.
Även om du tänker designa en anpassad ikonuppsättning för din design, kan du med färdiga ikoner till ditt förfogande hjälpa dig med snabb prototypning i de tidiga stadierna av designen, vilket ger lite mer tydlighet / trohet till dina low-fidelity-modeller. .
15. Hitta och ersätt
- Ladda ner här
- Pris: Fri
- Sammanfattning: Hitta och ersätt text i valda lager
Textredigerare är inte det enda du behöver hitta och byta ut - det är också användbart i Sketch. Detta plugin har många avancerade alternativ, och det gör att du kan söka efter förekomster av specifika ord eller fraser i texten i valda lager (och allt som finns i) och sedan enkelt byta ut det.
Nästa sida: Fler tidsbesparande Sketch-plugins
