Skitsevejledninger

Opsætning af et designsystem

Lær hvordan du tilpasser og bruger Sketch bedste praksis som et robust designsystem, der sparer dig hundreder af timer på det næste projekt.

Dette er en del af Frames for Sketch - tutorial-artikel, der hjælper dig med at komme i gang med Frames Design System og tilpasse det til at matche dine brand retningslinjer, såvel som hjælper dig med at lære noget nyt om skitsefunktioner og tricks, som du måske ikke kender.

Vejledningens indhold:

  1. Oversigt - Et hurtigt kig på hovedafsnittene.
  2. Farver - Lær hvordan du tilføjer og bruger farver.
  3. Typografi - Udskiftning af systemskrifter.
  4. Komponenter - Tilpasning af symboler.
  5. Plugins - Liste over nyttige plugins til kontrol af rammer.
  6. Resume - Brug sager og ofte stillede spørgsmål.

1. Oversigt - Opdateret

Frames er et produkt lavet af en designer med ideen om at implementere de nyeste Sketch-funktioner i et enkelt UI-bibliotek ved at kombinere bedste praksis og nyttige teknikker, der kan spare en masse tid i det lange løb for enhver, der er bekendt med skitse-app.

Systemet er designet til at være let og tilpasningsdygtigt til mærker, hvorfor mange hold synes det er et virkelig nyttigt værktøj til at bygge deres egne biblioteker baseret på det.

Frames Master-fil er opdelt i 5 hovedsider, der indeholder masser af foruddannet indhold: komponenter, stilarter og foruddesignede layouts, der kan tilpasses og bruges til at lave dit eget UI Kit eller et designsystem (efter dine ønsker).

Bemærk: Rammer bruger Roboto og Muli google-skrifttyper som standard, så sørg for at installere dem før første lancering.
  • Kom i gang - Dette er udgangspunktet for nykommere, her kan du justere dine farver, stilarter og skrifttyper hurtigt, så de passer til dit brand.
  • Style Guide - Farveskema, komponentark, ikoner, mockups og skrifttyper alt sammen tjener dig som den eneste sandhedskilde til dit projekt.
  • Web UI Kit - Samling af foruddesignede layouts bygget med systemkomponenter, der frit kan tilpasses og bruges til hurtig prototype og omdanne blå stil wireframes til pæn dribblingsbilleder.
  • Diagrammer og tabeller - Rammer indeholder et sæt af 32 diagrammer + tabelkomponenter, der let kan tilpasses, ændres størrelse og genbruges, så du kan fokusere på at arbejde med data i stedet for vektorpunkter.
  • Symboler - Alle er grupperet efter kategorier og sorteret efter symbolets type (farver, knapper, input osv., Vi vil dække alle grupper lidt videre).

Jepp, disse 5 sider skaber en perfekt legeplads til hurtigt at designe apps og websted, der sparer mange tonsvis af timer som designer. Men lad os nu gå til siden Kom i gang for at begynde at forberede vores system til at matche det grundlæggende i vores brand.

2. Farver

Rammer indeholder som standard ti farver, der kan ændres globalt på tværs af dokumentet, du behøver kun at vælge Udfyld lag og overskrive dem med nye egenskaber, derefter anvende ændringerne, og voila alt synkroniseres, og den nye farve er nu tilgængelig for alle komponenter der har en farveattribut i menuen for tilsidesættelse!

Bemærk: Du kan også bruge gradueringer globalt, bare konvertere deres lag til symboler og indstille nye symbolstørrelse til 100x100.

For at tilføje flere farver skal du gå til siden Symboler og kopiere et hvilket som helst farvebillede Kopier / indsæt det og tildele en ny farve til den.

Nyfødte systemelementer, selvom de bare er farver, skal følge en navnestruktur, så elementet passer til den rigtige gruppe, tænk på det som en sti til at beskrive din systemmappestruktur, så sørg for at foretage ændringerne. For eksempel gør farve / orange det muligt at finde det i tilsidesættelser af alle andre systemelementer, der har farveegenskaber.

BEMÆRK: Udfyldningsstilen bruges gennem hele systemet og anvendes til alle komponenter som en Color-attribut, dette inkluderer også Border-stilformer.
(F.eks. Knapper, alarmer, badges eller tags).

3. Typografi

Rammer bruger som standard en simpelt skrifttypekombination Roboto + Muli organiseret fra H1 til H5 overskrifter, og en enkel skrifttypekombination kan altid hjælpe dig med at opbygge iøjnefaldende typografi til dit projekt eller bare drible skud. Så du kan frit tilpasse begge skrifttyper eller fjerne en af ​​dem, hvis du har brug for det.

Typografisystem er indbygget i delte stilarter med en enkel struktur:
* H1 / Skriftnavn / Justering / Farve

For at ændre det aktuelle skriftsystem overskrives blot standardtekstlag med en ny indstilling og spreder ændringer over Frames. Gør det, glem ikke at overskrive gammelt fontnavn fra menuen med delte tekststilarter ved hjælp af super nyttigt plugin - Sketch Text Style Master, find bare det fontnavn, du vil udskifte. Og ved at gøre dette kan du nemt anvende nye tekstegenskaber til alle UI Kit-layout.

BEMÆRK: Komponenter såsom knapper indeholder tekstsymboler, som ikke vil blive overskrevet af ændringer her, vi vil dække hvordan man tilpasser dem i det næste afsnit.

Lad os nu tilføje nogle nye skrifttyper til systemet, så de følger vores struktur med disse enkle trin:

1. Vælg eller dupliker alle lag i enhver skrifttype - foretag de ændringer, du har brug for, og skriv ikke de delte stilarter i øjeblikket.

2. Ved hjælp af Rename, It plugin aktiveres “find and erstatte” kommandoen på de valgte lag og erstatter standard fontnavnet i navnestrukturen med det nye. (Eksempel: fra H1 / Roboto .. til H1 / Arial ..)

3. Og generer nye stilarter fra udvalgte tekstlag, for at gøre det skal du bruge Style Generator-pluginet og trykke på "generere delte stilarter", og det er gjort, den nye skrifttype er klar.

Omdøb det og stilgeneratoren er nyttige værktøjer til denne tilgang.

Når du er færdig med tilpasningen, kan du gemme aktuelle skrifttyper som en skabelon for hurtigt at importere dem til hvert nyt projekt ved hjælp af Shared Style Plugin, det sparer en enorm mængde tid, lær mere om, hvordan man mestrer tekst i denne artikel.

4. Komponenter

Systemets byggesten er lydhøre komponenter, der laves ved hjælp af symboler, der deler en enkelt systematisk tilgang, for at følge en sti-struktur og danne logiske grupper. Alle symboler er opdelt i kategorier efter design.

De fleste af symbolerne er bygget ved hjælp af andre symboler. Når symbolet er indlejret i et andet symbol, repræsenterer det attributten for den visuelle stil, der hurtigt kan justeres ved hjælp af menuen for tilsidesættelse. (Såsom farve, tilstand, form eller enhed.)

Lad os nu se nærmere på symbolgrupper for at lære, hvordan vi kan tilpasse dem til skala.

farver

Enkleste og et af de mest nyttige symboler - bare en blok, der gemmer en enkelt udfyldningsfarve. (bredde x højde = 100 px x 100 px)

Tip: Brug en hvid farve på 50% uigennemsigtighed for at gøre dine elementer som ikoner til at være gennemsigtige.

Tekst

Tekstsymboler bruges til knapper, indgange og tekstområder til at ændre dem til at overskrive standardværdierne for tekstlag, og ændringer synkroniseres med det overordnede element.

Tip: Brug Juster indhold på indstillingen til ændring af størrelse for at passe til symboler containerbredde, når man overskriver standardindstillinger.

Knapper

Knapper er sorteret efter størrelse og er tilgængelige i følgende variationer: Grundlæggende, Ikon til højre, Ikon til venstre, fane og tekstknap. Du kan også finde knappen Fleksibel knap med det ikon, der altid forbliver tæt fastgjort til en af ​​siderne af teksten; disse knapper er ret vanskelige og lavet ved hjælp af denne teknik.

For at ændre et knapudseende skal du ændre formattributten, der indeholder tilstand- og farveegenskaber, her et eksempel på, hvor mange variationer af en enkelt knap du muligvis kan tilsidesætte disse attributter ved hjælp af standardegenskaber.

Forms

Indtastningsfelterne kan enten være beskrivende (med en ekstra etiket / billedtekst) eller have et grundlæggende rektangel-lignende look. Hvis du vil tilpasse indgangsbilleder, skal du bruge statussymbol, overskrive enhver tilstandslagstil for at anvende dine ændringer.

Ved at ændre attributen Input-tilstand, kan du hurtigt skifte mellem grundlæggende og materiale-look.

Form

Formsymboler repræsenterer formen som et element, såsom knapper, badges, tags og meddelelser - hver form kan enten være udfyldt eller kantlinjetilpasset, udfyldningsfarveattributten anvendes til begge.

Bemærk: Formsymboler kan let tilpasses ved at ændre beholderlagets radiusegenskaber. Former i kantstil er lavet ved hjælp af konturer med trækkraftegenskaber, så sørg for at ændre begge sammensatte lagradius.

Stat

Tilstandssymboler bruges til at beskrive elementinteraktioner og transformationer, som f.eks. Hover, Active eller Disabled-tilstande til knapper eller input, ved hjælp af dem, du kan manipulere for at passe dine elementer til den aktuelle interface-situation.

For at opdatere knap- eller inputtilstande skal du opdatere lagstil. Du kan også tilføje yderligere effekter til symbolerne, for eksempel - du kan tilføje skyggesymbol til enhver svævetilstand for at få det til at se flydende ud.

Data

Data er et sted for UI-elementer med anden prioritet, der tjener til at give brugeren relevant information og beskrive den aktuelle interface-situation ved hjælp af positiv, negativ eller advarselsfeedback.

Ikoner

Alle ikoner er baseret på et 24px gitter, har meget materialelignende stil og bærer farveattribut, der altid matcher dit farveskema, så når du ser et ikonelement inde i en knap eller input - ved, at du nemt kan bytte det med ethvert andet ikon fra listen eller ændre dens farve.

De mest anvendte ikoner er lavet i to stilarter: Fyld og Streg.

mockups

Mockups bruges til at præsentere dit visuelle indhold som fotos, smuk baggrund og enhedsskærme. Du kan ændre udseendet på mockup ved at ændre enhedsattributten.

Ved hjælp af skærmindstillinger kan du tilføje overlays for at skjule dit billede med en sort / hvid gradient eller sætte FIll-attribut som en farvetone for at øge tekstlæsbarheden over fotos.

Rammer inkluderer modeller af iPhone 7, Macbook og iPad Air lavet ved hjælp af Facebook-designressourcer.

Du kan føje dine mockups som og PNG-lag til et symbol og indstille de rigtige proportioner for skærmsymbolet til at matche enhedsbillede, lære mere om, hvordan du bruger mockups her, og glem ikke at hente freebie-fil.

5. Plugins

Rammer kan styres og udvides ved hjælp af plugins. Dette betyder, at du kan foretage super-vilde bevægelser på tværs af dit dokument; for eksempel kan du nemt synkronisere Frames-skitsebibliotek og have en sikker versionskontrol med dit team ved hjælp af appen Abstract. Find ud af mere brugervenlige sager og udvidelser, som du kan bruge sammen med Frames.

6. Resume

Når du har konfigureret de grundlæggende stilarter og bragt komponenterne til den ønskede visning, kan du have et fuldt opladet designsystem til din tjeneste, der er klar til at tilsluttes ethvert projekt. Du kan desuden gemme filen som en skabelon for altid at have rammer ved hånden.

Psst. Du behøver ikke at tilpasse alt for at komme i gang. At indstille dine mærkefarver er ret nok til at begynde at designe flotte produkter.

Brug af rammer er givende og giver dig en mulighed for at ændre dit design undervejs ved at overskrive symboler, okay, ja - vi har det. Men hvad er reelle anvendelsessager dette system er godt til?

Brug sager

  • Prototype, selvom tidsfristen kommer inden for 10 minutter, kan du hurtigt oprette en webside eller en stilguide til din klient.
  • Byg et brand UI-sæt, brug en foruddannet stil til at overskrive dem med dit, og test dine visuelle ideer ved at bygge dit designsprog.
  • Wireframing, ved hjælp af forhåndsindhold, kan du hurtigt oprette wireframes og diskutere dine ideer, før du går over til den endelige aktivdesign.
  • Lær noget nyt, bliv mere ekspert med Sketch, og hold dig ajour med de nyeste funktioner og teknikker, der kan redde din dag.
  • Synkronisering, hvis du arbejder på et projekt med dine kolleger, skal du bruge Frames til at samarbejde og designe med de samme byggesten, der er synkroniseret.

Gør mere på kortere tid, bevæg dig hurtigt og bygg stærkere.

Hvis du stadig ikke har systemet, kan du besøge Frames for Sketch-webstedet for at få den fulde version af produktet, eller downloade demofilen og udforske nærmere.

Ofte stillede spørgsmål

Hvordan får jeg den nyeste version?
Vi sender e-mail-meddelelser via Gumroad og tweet, når den nye version er frigivet, så sørg for at følge os, og hvis du allerede har købt rammer, gå til produktsiden og download den nyeste version.

Vil du foreslå en funktion eller har du brug for mere hjælp?
Fedt nok! Du er velkommen til at nå os og diskutere det via hello@robowolf.net.

Planlægger du at fremstille Adobe- eller Figma-versioner?
Måske i fremtiden, indtil disse værktøjer giver den samme fleksibilitet, som Sketch gør.

Hvad adskiller dit produkt fra andre designsystemer?
Rammer er indbygget i et system gennem masser af ændringer på grund af konstante Sketch-opdateringer og en produktdesignoplevelse, nu vil enhver, der mestrer det, blive tildelt med en mulighed for at generere og skalere designsystemer til en mellemstor / stor kunde hurtigt.

Jeg har ikke prøvet noget andet system på markedet, men jeg mener, at verden er et stort sted, og der er temmelig mange designere ligesom mig.

Før du går

  • Find flere rammer relaterede ressourcer på Sketch App Kilder.
  • Hjælp os med at sprede ordet om rammer til skitse og få 25% rabat. Bare mail os / tweet os / DM os linket til dit indlæg, så vender vi tilbage til dig så hurtigt som muligt.
  • Følg Robowolf for flere designrelaterede ting.