Uppa ditt design workflow

Magnus Olsson
NetRelations
Published in
5 min readMar 6, 2018

Ni vet när man ser en kollega jobba på ett annat sätt än en själv. Ett sätt som hen känner sig bekväm i och allt egentligen funkar bra! Det är träffsäkert, kvalitativt och välgjort. Men jäklars vilken tid det tar!

Alla har naturligtvis rätt att jobba på det sätt man är mest bekväm i. Men efter mina studier över axlar på stackars ovetande kollegor tänkte jag att det är dags att vädra mina tips och tricks i Sketch. Mest för att jag bitit mig i tungan så ofta (för att inte störa och verka dryg) att jag knappt har någon tunga kvar.

Tid är som bekant pengar så det känns rimligt att lägga tid och energi på åtgärder som skapar värde. Men framförallt är det otroligt trist att t.ex. leta runt i menyer etc för att utföra ett kommando eller klicka omänskligt många gånger för att komma ner till önskat lager.

Så nedan listar jag mina mest använda plugins som bidrar till att Sketch är det främsta verktyget för design. En del är såklart öppna mål, men det kanske kan finnas ett eller annat som du missat? Det finns ju tusentals plugins och emellanåt kommer jag på mig själv med ett otal installerade som aldrig används. Så tips nummer ett kan väl vara att städa bland dina plugins mellan varven.

Craft by InVision

Första gången jag använde Craft höll jag på att trilla av stolen! Håll i hatten! Utan att ens hunnit bekanta mig med det kände jag att jag sparat in timmar i onödigt jobb i ett genomsnittligt projekt.

Craft erbjuder en mängd olika smarta features, men det som sticker ut för mig är möjligheten att fylla lager med verkligt innehåll. Markera ett lager och mer ett klick fyller du lagret med en bild hämtad från iSockphoto, Getty Images eller Unsplash. Du kan markera ett textlager och ersätta med en riktig paragraf eller t.ex. en rubrik från en annan webbplats. De har också förinställda texttyper i form av namn, datum, mailadresser, valuta/pris, länder, städer, dummyrubriker och dummyparagrafer. Bara markera ett eller flera textlager, klick på Craft-knappen och ersätt de lagren med ”riktigare” content. 🙌🏻

Anima Auto Layout

Ok, Anima har ett gäng smarta plugins. ”Launchpad som tillåter dig publicera din prototyp enkelt med animationer och mysiga hover-effekter t.ex. Inom kort släpper de ”Timeline” som möjliggör animeringar inuti Sketch (jag vet!!). Men tänkte främst lyfta deras ”Auto Layout” som framförallt riktar sig mot responsive design. I sin grund är det att du sätter olika objekts förhållanden i din artboard som sedan hålls om artbordens bredd ökas eller minskas. Detta kan man visserligen göra direkt i Sketch, men i Anima kan du sätta exakta pixlar som ett objekt ska förhålla sig till, låt säga, höger- och vänsterkanterna. Det finns en drös fler situationer där jag använder Auto Layout som sparar mig tid som nog går snabbast att lära tig på YouTube. Skaffa!

Runner

Runner hjälper dig att navigera runt Sketch snabbare genom att ge dig ett intuitivt gränssnitt för att effektivisera ditt workflow. I stället för att söka igenom din meny använder man kommandon.

Med Runner kan du snabbt söka igenom alla tillgängliga plugins och Sketch-menykommandon. Du kan hoppa till vilken sida, artboard, grupp eller ett lager i ditt dokument som helst. Börja bara skriva namnet på din symbol för att placera den. Lika snabbt är det att skapa en symbol eller stil. Bara börja skriva ”Create”…

Du kan också bläddra, installera, uppdatera och avinstallera plugins direkt inuti Runner. Sök bara efter ett plugin-namn eller GitHub användarnamn.

Awesome!

Symbol Manager

Ett snabbt och enkelt sätt att hantera alla dina symboler. Inget mer krångel med långa och komplexa symbolnamn, eller byta namn på symboler eftersom du felstavade ett mappnamn.

Du kan…
* Enkelt byta namn på symboler och symbolmappar
* Dra och släpp dina symboler från mapp till mapp
* Skapa nya mappar
* Hitta oanvända symboler
* Ta bort symboler superenkelt

Ordning och reda bland dina symboler helt enkelt.

Symbol Organizer

Jämfört med ovan nämnda plugin kan du med Symbol Organizer organisera själva symbolsidan alfabetiskt och i grupperingar som bestäms av dina symbolnamn så att överskådligheten blir trevligare.

Du kan…
* Välj att lista symboler horisontellt eller vertikalt.
* Sätt maximalt antal symboler per rad / kolumn,
* Vänd lagerlistans sorteringsriktning
* Sekvensiellt byta namn på dubbla symboler
* Samla symboler från andra sidor

Butter

Butter är ett litet trevligt plugin som med ett kortkommando sätter avstånd mellan markerade lager. Antingen horisontellt eller vertikalt. Markera ett gäng lager, ange önskat mellanrum och…Tadaaa!!!

Nudged

Oj vad kan kan spara in tid med Nudged! Med detta plugin kan du ”overrida” defaultinställningarna på antalet pixlar du ska hoppa med piltangenterna. Både med eller utan att hålla in shift. I mitt fall utgår jag ofta från en baselinegrid på 8 pixlar så i stället för att hoppa 10 pixlar med shifttangenten nertryckt ställer jag in att den bara ska hoppa 8 och mina lager hamnar på rätt plats

Preview in Browser

Efter senaste Sketchuppdateringen är detta plugin ännu mer aktuellt. Det öppnar kort och gott din artboard i din browser för att se hur det ser ut ”i verkligheten” med korrekt scroll etc.

Keys

Keys är en komplett genvägshanterare för Sketch. Integrerad direkt till Inställningar-fönstret hjälper det dig att enkelt anpassa dina kortkommandon.

Det finns timmar att tjäna genom att jobba med Sketch Libraries men det blir en egen artikel.

Vi hörs!

--

--