Skitsevejledninger

Dette er uden tvivl den sejeste sketch-teknik, du vil se hele dagen.

Advarsel: Flere GIF'er end ganghøjen til jordnøddesmør.

Ja, jeg udtaler det “Jiff”. Gå væk.

Kæmpe råb til Lloyd Humphreys for at inspirere denne metode til dyb indlejring, især når det drejer sig om tekst.

Da Sketch lancerede størrelsesreglerne i Sketch 39, var det sådan en spiludveksler, at jeg ville bage en kage med Sketch-logoet på det, bare så jeg kunne præsentere den for mig selv.

Så det siger sig selv, at når symboloverskridelser kom rundt i Sketch 41, fik de mig til at springe ud af ren jubel og ekstase. Det var en ret stor aftale.

Efter meget prøve-og-fejl, har jeg oprettet nogle af de mest fleksible, tilpassbare og vedligeholdelige komponenter nogensinde ved hjælp af indlejrede symboler, tilsidesættelser og hvad jeg overlapper Cascading Symbol Styles… aka CSS.

Her er hvad vi kan gøre med cascaderende symbolstilarter i Sketch. Kan jeg få et amen?

For at være ærlig er denne teknik ikke særlig ny. Det er bare et sæt indlejrede symboler, omhyggeligt organiseret for at fremstå mere organiseret i Sketch's Inspector-panel. Men jeg troede, at I alligevel kunne synes det er interessant alligevel, så spænd op og tag lidt popcorn

Lad os dykke ind efter dette symbol:

Det er en liste, som jeg bruger i et chatpanel. Jeg vil gerne have deres foto og navn plus et badge til nye meddelelser og en indikator for, om de skriver eller ikke (disse er stablet, så jeg kan tænde / slukke dem, afhængigt af hvilken jeg har brug for).

Lagene:

Foto

Dette er en omdøbt henvisning til symbolet "Avatar Image". Hvorfor omdøbes det? Fordi det er dette, der dukker op i inspektionspanelet, når jeg bruger dette symbol andetsteds. Jeg ville meget hellere være, at navnet skulle være pænt og rent i stedet for noget i retning af “Avatar / Image”, som bare ender med at blive trunkeret alligevel. Ingen bueno.

For det andet, for at dække brugssagen, hvor en bruger ikke har angivet et profilfoto, oprettede jeg en standardavatar, som jeg vil vise i stedet.

Vær nu opmærksom, fordi dette næste punkt er vigtigt: Fordi størrelserne på symbolerne Avatar / billede og Avatar / Standard er nøjagtig de samme (se ovenfor), vil jeg være i stand til at vælge hvilket symbol jeg vil vise i rullemenuen Inspektør:

Bemærk, at jeg ikke er generet af hundreder af mine andre symboler. Det skyldes, at disse andre symboler ikke svarer til dimensionerne på basissymbolet, der er indlejret inde i symbolet på listen over elementer. Giver mening?

Navn

Navnelaget er noget counterintuitive, men utroligt kraftfuldt. Jeg oprettede symboler på alle mine tekstformater i Sketch, så jeg kunne bytte farver inde i symbolerne. Det tog et stykke tid:

Men nu hvor jeg har disse, gør det det let at ændre farven på teksten i mit symbol uden at skulle oprette en helt ny symbolinstans:

Da tekstsymbolet er… ja… tekst… det er derfor, det giver mig muligheden for at redigere indholdet. Jeg er lige blevet fancy og navngav det faktiske tekstlag i dette symbol til "↳🖊Indhold", så jeg ved, at det ændrer det indhold.

Igen er alt dette et enkelt symbol, så hvis jeg redigerer basissymbolet, vil alle disse tilfælde stadig opdateres:

Et symbol. Tre afledninger!

Simpelthen magisk.

Mærke

Emblemet er endnu et symbol, men denne har også nogle interessante egenskaber. Lad os kigge på det:

Inde i badgesymbolet har jeg mit tekstsymbol (så jeg kan udskifte det senere) og et “Container” -symbol. Sådan ser det ud:

"Container" -laget i badgesymbolet er bare en omdøbt henvisning til det afrundede containersymbol ovenfor. Hver af disse containere har et statussymbol (så jeg kan tilsidesætte emblemets tilstand)…

... et farvesymbol (så jeg kan tilsidesætte farven) ...

... og en maske, der bestemmer dens form.

Side note til skitse: Det ville være rad, hvis vi kunne bruge symboler som masker.

Bemærk, at mine tilstandsymboler og farvesymboler er forskellige bredder. Dette er for at "beskytte" deres dropdowns i Inspektorpanelet, når jeg senere tilpasser symbolet for min liste. Hvis jeg vælger en farve til baggrunden, vil jeg ikke se andre symboler på den liste. Jeg vil bare have farver.

Bare farver! Intet andet!Bare siger! Intet andet!

Hold alle symboler i en ensartet størrelse, som du vil have vist i en dropdown sammen, og sørg for, at alt andet er mindst 1xx større eller mindre. På den måde dukker de aldrig op sammen

Typing

Dette er bare et lille symbol, der viser, når nogen skriver.

ProTip ™: Indstil alle ikoner som masker og brug et farvesymbol ovenpå. På den måde kan du bare tilsidesætte farvesymbolet, hvis du vil ændre farven. Et ikonsymbol… hvilken farve du vil have

Denne teknik blev først introduceret af Free & Willing:

Beholder

Sidste lag! Denne er kun et omdøbt eksempel på et ”Mixin / Fill” farvesymbol. Jeg tilføjede dette, så jeg nemt kan slå en valgt tilstand til og fra:

Længst til højre ser du symbolet

Så det er det! Som du kan se, kan disse blive temmelig sofistikerede og kræve en vis tanke og organisation for at komme rigtigt, men det faktum, at vi nu bogstaveligt talt kan anvende tusindvis af forskellige behandlinger på et enkelt symbol, er ret innovativt. Det er enkeltvis den største tidsbesparende, jeg nogensinde har skabt.

Temmelig sej, ikke? Jeg har også gjort dette med snesevis af andre symboler:

Se på alle disse forbløffende symboler i inspektørpanelet!

Det er meget arbejde for kun et symbol, og appdesign har snesevis, hvis ikke hundreder af dem.

Jeg gik videre og gjorde alt det beskidte for dig og fik det til at se pænt ud:

Hvis du er interesseret, kan du få dem til dig selv på det splinternye UX Power Tools-site. Du kan også tjekke hele stilguiden på InVision eller Marvel.

Jeg tror, ​​du vil kunne lide dem

Når jeg ikke går i gang med Medium, arbejder jeg på Sketch-værktøjer hos UX Power Tools for at gøre dig til en bedre, hurtigere og stærkere designer. Følg os på Twitter @uxpowertools. Følg mig også, hvis du blev underholdt!