Sketch: En perfekt ikon-arbejdsgang

Virkelig hurtig, konsekvent måde at bruge ikonskrifter i Sketch.

Sketch tilbyder ikke en god løsning til styring af ikoner. Så jeg brugte nogen tid på at opbygge en ikon-arbejdsgang for at gøre det langt enklere at bruge et ikonbibliotek i alle mine projekter.

Min løsning bruger kun et symbol, et tegnebræt og en ikonfont. Med dette kan du:

  • Opret et bærbart bibliotek med ikoner til brug i alle projekter.
  • Gennemse ikoner uden for skitsen, og importer dem ved at opretholde links til de originale illustrationer.
  • Del og synkroniser ikonerne med teammedlemmer.

Og konsistens!

Ikonskrifter: Hurtigt resume

Først og fremmest er denne arbejdsgang afhængig af en robust og godt trukket ikonfont, såsom Googles skrifttype for materielle ikoner eller Font Awesome. Eller opret din egen skrifttype i Icomoon eller Fontello.

Ikonskrifttyper er gode, fordi de skaleres som vektorer, kan bruges på web- og mobilapps meget let, og styling kan anvendes ligesom tekst. Management er enkel for alle, designer eller udvikler; det kræver kun en fontfil, der skal installeres og opdateres.

Hvis du gemmer fontfilen et centralt sted som en Dropbox, kan du dele de nyeste ikoner meget med alt dit team.

Vi begynder at bruge denne arbejdsgang på Qumu og vi kan virkelig godt lide den. Det håber jeg også.

Arbejdsgangen

Et tegnebræt til at styre dem alle.

Konstruktion af basissymbolet

Hele ikonbiblioteket bruger et basesymbol.

  1. Installer en ikonskrifttype. Genstart skitse.
  2. Tegn et firkantet artboard i en anstændig størrelse.
  3. Anbring en tekstboks inde i den med kanterne i flugt til tegnebrættets grænser.
  4. Indstil skrifttypen til din ikonfont, og indsæt en hvilken som helst glyph.
  5. Gem dette tegnebræt som et symbol kaldet “glyphicon”.

Så basesymbolet har en tekstboks i sig. Dette indeholder standardglyf, som jeg har angivet som en stjerne. Bare for at gøre det klart, dette er ikke en SVG- eller PNG-grafik, dette er en tekstbaseret glyph fra en skrifttype.

Egenskaber for glyph og den korrekte tekstboks.

Mine tekstboksegenskaber:

Højde x Bredde: 17px *
Ændring af størrelse: Float på plads
Skriftstørrelse: 17px *
Liniehøjde: 17px *
Bredde: Auto og
Juster: Center
Tekstfarve: Sort
* Indstil til det samme baseret på den foretrukne størrelse

Når du indsætter dette basissymbol i dit arbejdsområde, kan du ændre din glyph ved hjælp af en tekstoverskridelse som vist nedenfor.

Ud af mørket kommer lys: Et enkelt symbol til ensartet ikonplacering.

Animationen ovenfor viser min nyligt placerede “Glyphicon” symbolforekomst. Jeg kopierer og indsætter en ny glyph i “overstyr” -feltet i højre rude. (Du finder ud af, hvordan jeg får glyfer om et øjeblik).

Sketch viser værdien for tilsidesættelse af felt med et spørgsmålstegn (fordi GUI ikke fortolker ikonskrifttypen her), men når du rammer Retur, opdateres glyf straks i arbejdsområdet.

Vi bruger dette symbol som et "Base" -symbol til alle ikoner. Så der kræves et symbol for, at alle dine ikoner kan leve i, hvad dine ikoner gemmes eksternt til dit projekt, hvilket er bedre på så mange måder.

Dette er det grundlæggende princip for min metode. Fordelene ved dette er:

  • Håndtering af kun et basesymbol. Bogstaveligt talt en. Dette kan meget let kopieres mellem projekter.
  • Ikke at skulle importere SVG / PNG'er og placere dem manuelt. Det er perfekt placeret midt på tegnebrættet hver gang.
  • Fordi alle dine ikoner er gemt eksternt i fontfilen, forbliver dit projekt meget rent, og alle kan dele det samme aktiv.

Redigering: Tilsidesættelse gøres endnu lettere

Tip: Hvis du bruger Materiale Ikon-skrifttypen, kaldes hver glyph. Så du kan faktisk skrive dette som tilsidesættelse. Se nogle eksempler nedenfor.

Dette fungerer dog ikke for alle skrifttyper. Kun hvis ikonforfatteren venligt har navngivet dem.

’Slet’’Undo’'Del'
Hvis et materialeikon har flere ord i dets navn (f.eks. "Tilføj indkøbskurv"), skal du bruge understregninger ("tilføj_shopping_cart"). Så vises det fint.

Fontbog: Din praktiske glyph-browser

For at bruge arbejdsgangen skal du være i stand til at indsætte den rigtige Glyph i symbolets overstyringsfelt. Sketch har ikke en måde at gennemsøge glyfer på som andre apps. Men der er en praktisk Glyph-browser indbygget i hver Mac. Det kaldes Fontbook.

Fontbog er den ideelle browser til ikonstypeglyfer.

Start din praktiske glyph-browser

  1. Tryk på CMD + Mellemrum og skriv Fontbook i Spotlight.
  2. Find din ikonskrifttype i Fontbog.
  3. Gå til Vis> Repertoire fra værktøjslinjen for at se alle glyfer.
  4. Indstil størrelsen øverst til højre til en praktisk skala. Jeg bruger 18–24 px.
  5. Kopier og indsæt din Glyph fra skrifttypen i Sketchs symboloverskridelsesfelt.

Fontbook er en fantastisk glyph-browser. Fordi det er eksternt til Sketch-vinduet, kan du gennemse og sammenligne resultater uden at skifte kontekster. Jeg har endnu ikke fundet en enklere eller mere praktisk løsning.

Sketch og fontbog kan være venner.

Skalerer det op

Ovenstående metode er fantastisk til hurtigt at placere ikoner, men det er nødvendigt størrelse og farveindstillinger. Så her gør jeg det. Jeg duplikerer mine basesymboler, omdøber og ændrer størrelse på dem for at skabe nogle ekstra symboler med en række stylingkombinationer.

Selvom dette skaber flere muligheder at vælge imellem, begrænser jeg mig også til kun et par muligheder. Dette er faktisk en god ting, det resulterer i mere konsistens. Begrænsning er mor til alt design!

Dejlige og ensartede basestilarter.

Opbevaring

Jeg har oprettet en side med navnet "Symboler / ikoner". Det er her alle basesymbolerne bor (se menuen øverst til venstre ovenfor).

At gemme sæt med symboler på separate sider er noget, jeg gør som en del af min arbejdsgang. Dette gør tingene meget organiserede, hvad det gør ”importere” dine ikonsæt til nye projekter meget let - jeg kan trække hele denne side ind i et andet Sketch-dokument, og det vil importere dem. Det er superhurtigt at gøre.

Denne side bliver dybest set et meget let bibliotek, som jeg kan bruge i alle dokumenter. Stilarterne forbliver meget ensartede.

Rediger: Sketch understøtter nu biblioteker, så du kan gemme dine ikonforudindstillinger i en ekstern fil!

Navnekonvention

glyphicon / farve størrelse

Denne navnekonvention fungerer for mig, fordi symbolerne sorterer pænt i menuen.

Jeg bruger mappenavnet “Glyphicons” snarere end “Icons” for at holde disse adskilt fra andre ikonaktiver, der måtte krybe ind i mit projekt. “Ikon” er et meget almindeligt navn.

Størrelser: xs, sm, md, lg, xl, xxl osv
Farver: mørk, lys, midt, primær, succes, fare, advarsel.
Eksempel navn: glyphicon / light xl

Jeg finder disse klasser meget fleksible. De matcher også de klasser, der bruges af Bootstrap, som vores design- og udviklingshold bruger. De vil forstå dem.

Tip: Jeg indstiller baggrundsfarven på tegnebræt til den samme som ikonfarven. Dette er for at sikre, at farverne er synlige i menuen "Indsæt symbol". Hvis der ikke er indstillet nogen baggrund, er forhåndsvisningen tom. (Sørg for, at du også deaktiverer “Inkluder i eksport” her!).
Indstil baggrundsfarve til en hurtig visuel signal.Den resulterende menu. Farvekodet og organiseret.

Skifter glyfer, farver, størrelser

Du kan derefter ændre farve eller størrelse på dit basissymbol ved hjælp af rullemenuen "Erstat symbol" i sidebjælken. Selvom du ændrer basesymbolet, holdes glyfen i takt (tekstfelter skal være mærket identisk).

Basissymbolerne fungerer som forudindstillinger.

Demofil

Du kan prøve det. Men hvis du kan lide denne metode, opfordrer jeg dig til at oprette dine egne forudindstillinger for fuldt ud at forstå den. Du får også en større forståelse af, hvordan symboler fungerer.

Symboler gør Sketch fantastisk.

Download demofil på Git

Dette er min arbejdsgang til ikoner indtil videre. Det kan udvikle sig over tid og vil sætte pris på feedback om, hvordan det kunne forbedres.

Tak!

Yderligere læsning

  • En sag til ikonskrifter i Sketch
  • Bygning af ikonskrifter med Grunt
  • Skrifttypeikonarbejdsgang med Sketch + Grunt
  • Sådan bruges ikonskrifttyper i mobile apps