Brug af skissesymboler som links til store projekter

Et simpelt hack til at navigere i enorme Sketch-projekter hurtigere

En af de ting, jeg elsker ved Sketch, er, hvor let projekter kan fortsætte med at vokse inden for den samme fil. Der er ingen grænser for, hvor mange tegnebræt eller sider du kan få plads i et dokument.

På et nyligt designprojekt voksede min Sketch-fil til 25 sider. (Jeg er sikker på for mange andre strømbrugere, dette nummer er ikke imponerende!). Jeg mistede dyrebar tid bare ved at skifte mellem Pages på trods af eksisterende tricks som tastaturgenvejen fn ⬆ / ⬇ eller Sketch Runner-plugin. Men en dag snuble jeg over et lille hack for at bruge symboler - både deres mestre Artboards og forekomster - for at hjælpe mig med at komme rundt på det enorme projekt.

I Sketch dobbeltklikker du på en symbol-forekomst teleporterer dig til symbolets hoved Artboard - uanset hvor det er i projektet. Så jeg prøvede at oprette et symbol, der netop indeholdt titlen på min side (eks: “ikoner”), hvorefter jeg inkluderede en forekomst af det symbol et andet sted i mit dokument, hvor jeg kunne drage fordel af et hurtigt link til den side (eks: “ Værktøjslinjer ”, der bruger disse ikoner).

At være i stand til at dobbeltklikke på symbolet "Ikoner" -forekomsten (hvor som helst i mit projekt) og straks springe tilbage til ikonsiden begyndte at spare mig 5-10 sekunder hver gang jeg skulle skifte til den side. Jeg var ikke længere nødt til at rulle gennem dusinvis af sider (og læse deres navne) for at komme til mine ikoner. Dette kan lyde som en ubetydelig mængde tid, men det kan være forstyrrende for ens fokus og flow, og når ganget med det antal gange, du skifter mellem områder i et stort Sketch-projekt hver dag, er virkningen betydelig.

Mange designere bruger allerede et stort tekstlag over deres Artboards som overskrift. Undertiden afspejler dette navnet på siden (eks: “Ikoner”), og andre gange betegner overskriften separate områder på den samme side. Eksempler på sidstnævnte scenarie inkluderer "Final Icons" og "Icon Workspace"; eller "Android" og "iOS" versioner af de samme mockups.

Det pæne ved dette Symbol Links-trick er, at det perfekt bygger på denne vane. Den eneste forskel er, at disse overskrifter nu har et Artboard omkring sig og er blevet omdannet til et symbol.

Du kan tænke på disse symboler som bogmærker til de vigtige steder omkring dit projekt og forekomsterne af disse symboler som hyperlinks.

Desuden fungerer dette Symbol Links-trick lige godt mellem sider eller inden for den samme side. Så du kan organisere dit Sketch-projekt, som du vil - distribuere tegnebræt på tværs af mange sider, eller samle tonsvis af tegnebræt inden for et lille antal sider. (Det er dog værd at bemærke, at færre tegnebræt pr. Side kan forbedre Sketches ydelse, når du navigerer rundt på lærredet.)

Jeg er overrasket over, hvor mange situationer dette enkle trick kan bruges i, og jeg tvivler på, at jeg har opdaget dets fulde potentiale.

Her er mine yndlings tip og brugssager:

Links kan være i alle størrelser

Sketch 48 introducerede muligheden for at skalere symbolforekomster proportionalt (hvilket ikke er det samme som at ændre størrelsen på deres bredde eller højde). Når du bruger symbollink-tricket, giver Scale dig mulighed for at gøre linkene (symbolforekomster) mindre end deres originale master Artboard. Så symbolhovedtavlen til dit områdes titel / bogmærke (eks: “Ikoner”) kan være enorm, men alle linkene til det (symbolforekomster) kan være mindre.

Tilføj ikoner for klarhed

Fordi vi fremstiller projektdækkende symboler ud af disse overskrifter for hvert område, er det vigtigt, at deres indhold er unikt. For at bruge et tidligere eksempel i stedet for at skrive "Android" og "iOS" over disse mockups på en side, giver det mening at også medtage en beskrivelse af disse mockups - som navnet på siden. Ellers har du flere symboler, der siger "Android" eller "iOS."

Selvom det generelt er en god ide at beskrive områdets emne med ord (fx: "Login-skærm"), kan nogle andre deskriptorer blot bruge ikoner.

Et andet eksempel ville være en responsiv webdesign. Du organiserer muligvis hver webside til at være sin egen side i Sketch og derefter oprette bogmærker til smartphone, tablet og desktop-moduler. Ikoner kunne angive skærmstørrelse.

Hvis vi bruger ikoner, hvorfor ikke gøre dem til symboler, så hvert link (forekomst) kan skifte mellem ikoner i symboloverskridelser. Det kan være nyttigt at gøre dem til en pil eller et linkikon, så du nemt kan identificere links omkring dit projekt. For en hurtig og beskidt løsning kan du bruge emojier i tekstoverskridelser i stedet for brugerdefinerede ikoner.

Brug symboloverskridelser til at ændre et links tekst eller skifte dets ikon. (Bemærk: ikonet skal være et indlejret symbol)

Du finder en demo af alle disse eksempler - sammen med kopier af ikoner - i Sketch-filen nedenfor.

Opret en indholdsfortegnelse

Du kan bruge Symbollinks i dine projekter så meget eller så lidt som du ønsker. Hvis du systematisk bruger det til at organisere dine Sketch-dokumenter, kan du endda oprette en indholdsfortegnelse til store projekter!

Når du arbejder på et team eller giver andre adgang til dine Sketch-filer, er en indholdsfortegnelse en venlig måde at vise folk rundt på. Du kan endda tilføje noter ved siden af ​​linkene, som "arbejde i gang" eller hele sætninger, der tjener som dokumentation.

“Indholdsfortegnelse” -side i en stor skitse-fil. Hvert emne er et link til et vigtigt område i projektet.

En indholdsfortegnelse er bestemt ikke nødvendig for alle projekter. Men hvis dit Sketch-dokument vokser til en stor størrelse, eller hvis andre mennesker åbner det, kan en indholdsfortegnelse være en fantastisk løsning.

Forbindelse mellem dine kladder og finaler

Jeg tror, ​​det er så vigtigt, at designere har et rodet eksperimenteringsområde i deres Sketch-dokumenter. Bare fordi vores endelige design kan se ud som et manicureret system - et perfekt gitter af færdige tegnebræt - betyder det ikke, at vores kreative proces skal være så stiv. Jeg opfordrer dig til at have områder på dit lærred (hvis ikke hele sider), hvor du kan lege. Og med symbollinks er det let at gå mellem eksperimentområdet og dine endelige aktiver.

“Men jeg bruger allerede symboler overalt”

Hvis alle dine ikoner og UI-komponenter allerede er symboler, tænker du måske, at dette trick ikke er nyttigt - du kan allerede dobbeltklikke på en forekomst for at komme tilbage til dens hoved Artboard. Men du kan drage fordel af at placere links i nærheden af ​​Symbol Master Artboards; links til forskellige designs, der bruger disse symboler. For eksempel kan du ved siden af ​​et sæt værktøjslinjeikoner have et link til "Værktøjslinjeforligninger", der bruger disse ikoner.

Desuden kan det at komme fra A til B være frustrerende, hvis dine symboler inkluderer andre (“indlejrede”) symboler. Forestil dig et ikon Symbol inde i et brugergrænsefladeelement Symbol inde i et "række" -layout Symbol i en sidste mockup - du finder dig selv dobbeltklikke mange gange for at komme fra din mockup til det ikon. Symbollinks kan gøre det meget lettere, hvis du opretter links til de steder i dit projekt, hvor du sandsynligvis vil gå næste gang.

Væsentlige tip og tricks

  • Når du dobbeltklikker på et symbol, opretholder Sketch den samme mængde zoom på lærredet. Det betyder, at hvis du arbejder med små ikon Artboards, skal du klikke på et link for at gå til fuldskærmsmodeller, skal du zoome ud. Derfor er kommando 1-tastaturgenvejen din bedste ven - den zoomes ud for at vise dig alt på siden. Jeg bruger konstant denne genvej, når jeg har klikket på et link.
  • Skitse-dokumenter kan hurtigt blive rodet med symboler, så jeg foreslår at gruppere alle disse symbollink så de tager minimal plads på din symbolliste. Begynd blot symbolnavne med Link / eller Andet /.
  • Selvom baggrundsfarven på et links Symbol master Artboard let kan ændres til lærredets lysegrå farve (# F2F2F2), hvis tegnebrættets skygger generer dig, kan de deaktiveres i menulinjen: Vis> Lærred> ✓ Vis tegnebræt skygge .
  • Jeg har fundet ud af, at den mest effektive måde at oprette et nyt overskriftslink (Symbolhoved Artboard med navnet på det område) er at kopiere og indsætte et tidligere, du lavede, og derefter omdøbe tegnebrættet og dets indhold. Du kan endda starte med dem i min Sketch-fil nedenfor.

Sketsdemo & skabelon:

Download min Sketch-fil, der demonstrerer alle eksemplerne fra denne artikel. Det er et nyttigt udgangspunkt for at integrere Symbol Links i dit eget projekt.

Ansvarsfraskrivelse!

Glem ikke, at dette teknisk set er et hack - det bruger en bestemt funktionalitet på en anden måde end oprindeligt tilsigtet. Sketch kunne ændre opførslen for, hvordan Symbol-instanser knytter sig tilbage til deres master Artboards, hvilket potentielt kan påvirke denne arbejdsgang. Det virker usandsynligt, men det er værd at bemærke.

Kunne et plugin gøre det bedre?

Absolut! Et plugin kunne forbedre dette trick på nogle få måder: tilføje en formel brugergrænseflade til hyperlinks, specificere hvilket område af målets lærred, der oprindeligt skal zoome ind, og fjerne den ekstra rod, der er tilføjet til din symbolliste. Hvis du er en udvikler, der er interesseret i at oprette dette plugin, hjælper jeg med glæde!

Men jeg ville ikke have skrevet denne artikel, hvis jeg troede, at et plugin var nødvendigt. Arbejdsgangen med brug af symboler har vist sig at være god nok.

Jeg håber, at Symbol Links vil hjælpe med at fremskynde din arbejdsgang, og jeg vil meget gerne høre, om du har nye anvendelser eller forslag til dette trick. Tak for at have læst!

Tilmeld mig mit nyhedsbrev for at få indsigt i min kreative proces og være den første til at vide, når jeg udgiver nye artikler.

Hvis du nød denne artikel, vil du elske Sketch Master - mine online træningskurser for fagfolk, der lærer Sketch. Du lærer masser af tricks og praktiske arbejdsgange ved at designe virkelige UI / UX og ikonprojekter.