Skitsevejledninger

Sketch-opdateringen har vi alle ventet på plus et helt nyt UX-værktøj!

Da indlejrede symboler kom ud for første gang tilbage i Sketch-versionen - uanset hvad det var, var det en slags big deal. I det mindste troede jeg det:

På det tidspunkt var et par designere på udkig efter måder at virkelig strække Sketch til sine absolutte grænser. Vi ønskede, at det skulle fungere for os, ikke imod os.

Så med indlejrede symboler i vores værktøjskasser, begyndte vi at skabe hundreder af symboler ud af ting som farver, rammer og tekstformater og maskere næsten alt, så vi hurtigt kunne skifte mellem forskellige stilarter i ting som vores smarte nye knopsymboler.

Dygtig? Jo da.

Suuuuper hacky? Nå… jeg mener ja…

WOO-WEE, har jeg nogle store nyheder til dig!

Stil tilsidesætter

Sketch ændrer den måde, hvorpå man overskrider arbejde. Nå, ikke ændrer ... men tilføjer en ny måde at anvende tilsidesættelser på symboler.

I stedet for blot at tilsidesætte indlejrede symboler (som et ikon inde i en knap), kan du nu tilsidesætte TEKSTSTIL og FARVE. Der er en gud.

Mig.

Der er en fangst.

Du skal bruge tekstformater og lagformater, når du bygger dine symboler.

Lad mig sige det større.

Du SKAL bruge tekstformater og lagformater.

Det er den eneste måde, Sketch giver dig mulighed for at tilsidesætte tekst- og farveattributter i et symbol.

Dette kan stadig virke virkelig upraktisk:

”Flot, nu er jeg nødt til at lave en hel masse stilarter. Hvorfor kan jeg ikke bare opdatere skrifttypen / farveattributterne, mens jeg vil? "

Ret spørgsmål. Andre design-apps har denne form for fleksibilitet.

Helt ærligt kan jeg ikke lide denne frihed. Det gør det virkelig let at få uoverensstemmelser i din app, når du kan opdatere tekst / farver alt sammen uden at holde sig til nogle retningslinjer. Det er meget farligt.

Jeg har altid været lidt nysgerrig efter, hvorfor flere ikke bruger tekstformater og lagstilarter. Hvis du spørger mig, er det absolut bedste praksis, og du går glip af at være en meget mere effektiv og konsekvent designer.

Men du føler, at dette stadig er en dramatisk forbedring.

Hvorfor det er bedre

  • Det eliminerer behovet for at oprette farvesymboler og tekstsymboler helt
  • Det reducerer filstørrelsen dramatisk.
  • Det minimerer plads til fejl.

Jeg siger ikke ”Jeg kaldte det” men tjek en af ​​mine artikler fra sidste maj 2017.

Skærmbillede til dig dovne mennesker.

Hvordan det virker

Jeg har brugt den private beta i et stykke tid nu, og det er som at bruge et helt nyt produkt. Jeg elsker det.

Den bedste måde at vise stiloverskridelser på er ved at vise dig en før og efter af to almindelige elementer: ikoner og knapper.

Sådan bygges ikoner ved hjælp af den gamle farvemaskeringsteknik:

FØR: Dette ikonsymbol bruger en farvesymbolmaske til tilsidesættelse.

Sådan gør du dem i Sketch 52:

ETTER: Dette ikonssymbol har bare en lagstil anvendt på det.

Da jeg anvendte en lagstil på lydstyrkesymbolet, giver Sketch 52 mig mulighed for at tilsidesætte denne stil med enhver anden gemt lagstil, jeg har oprettet.

Se lige det her:

Lad mig minde dig om: Disse er IKKE farvesymboler. Disse er gemte lagformater. Jeg har et kæmpe stilark, som jeg bruger til at administrere lagformater og tekstformater i hele min fil, så der er bogstaveligt talt tusinder at vælge imellem:

Dette kan downloades i bunden af ​​denne artikel!

Hvis du har oprettet en gemt stil, kan du bruge den som en tilsidesættelse. Det er virkelig så let.

Lad os se på et gammelt knopsymbol, der bruger farvemaskningsteknikken og tekstsymboleteknikken:

Ser enkel ud, men begge disse lag er indlejrede symboler, og jeg var nødt til at oprette et tekstsymbol til hver forbandede farve, som jeg tænkte, at jeg måske vil bruge i en knap:

Dette er cool, men VIRKELIG SUPER ANYYYING.

Forkert mig ikke, alt dette arbejde gjorde stadig, at jeg arbejdede i Sketch hurtigere for mig end at lave nye knopsymboler til hver eneste variation jeg måske ønsker. Jeg var også en af ​​de tidligere pionerer inden for denne teknik, så jeg vil ikke tale for negativt om det

Uanset hvad, her ser min knap-symbol ud i Sketch 52:

Dette "Shape" -lag er også et indlejret symbol, men det er bare et rektangel med nogle afrundede hjørner. Ikke noget specielt:

Da mit knopsymbol har en tekstformat for knapteksten og en lagstil for beholderfarven, kan jeg udføre stiloverskridelser, ligesom jeg gjorde i mit ikonsymbol:

Hvor fantastisk er det ikke ?!

Jeg svarer det for dig. Det er MEGET forbløffende.

Sååååå hvornår kan jeg få det?

Den offentlige beta af Sketch 52 er NU tilgængelig for at begynde at spille med:

Jeg anbefaler stærkt, at du starter et projekt fra bunden i denne nye version. Det er helt nyt, og det er bedst, at du udforsker i en ren fil.

Vil du ikke oprette alle disse tekst- / lagformater selv?

Vi arbejder aktivt på en helt ny version af UX Power Tools, som vi har bygget fra bunden af, så den bruger alle de nye funktioner, der kommer i Sketch 52. Du kommer til at miste sindet.

Her er hvor vi er lige nu. Det er fantastisk:

Få øjeblikkelig adgang nu

Når du læser dette, designer vi aktivt de nye UX Power Tools, men vi ønskede, at du skulle have noget at lege med så hurtigt som muligt, så du får en fornemmelse af disse fantastiske nye Sketch 52-opdateringer.

Hvis du køber nu, får du adgang til:

  • Style Guide
  • Komponentark
  • Symboler

Opdateringer kommer snart (som du får gratis ved at abonnere):

  • Flere symboler
  • Flere komponenter
  • Prøvesider
  • Diagrammer og grafer
  • Kom godt i gang
  • Vejledninger!

Vi frigiver grundlæggende produktet nu, så du tidlige adoptører kan lege med det, teste det og hjælpe os med at beslutte, hvad vi ellers skal bygge ind i systemet. Vær ikke sky med feedback! Vi er ægte produktdesignere, der bruger dette til virkelige klientprojekter, så vi er helt købt ind for at gøre dette til den største Sketch-ressource som muligt.

Køb det nu for at abonnere på opdateringer:

Når jeg ikke bygger designsystemer, er jeg den førende designer hos Innovatemap.

Følg mig på Twitter
Hej på LinkedIn
Lær nogle ting fra mit agenturs blog