Design System

Et Design System i Definitions lagrer felles farger, avstander, skriftinnstillinger og temavalg. Lagre hver gjenbrukbare verdi som en token, og velg den deretter i en kompatibel Style-egenskap på en Page eller Component. Bruk det når flere deler av appen eller nettstedet skal følge de samme designvalgene.

Opprett et system og den første tokenen

Et nytt system starter som Draft med tolv tokenkategorier. Tokens er navngitte designverdier. Brand blue kan for eksempel inneholde en Color, og Card padding en Dimension.

Velg systemet, kategorien, gruppen eller tokenen i treet for å åpne editoren. Discard changes gjenoppretter lagret versjon. Cancel lukker en ny ulagret oppføring.

1. Hold pekeren over Definitions og åpne Definitions actions.
2. Velg New design system.
3. Fyll inn Design system name, for eksempel Guide design, og velg Create design system.
4. Åpne Colors under Tokens og velg Add token.
5. Fyll inn Token name, for eksempel Brand blue. Value type starter på kategoriens foreslåtte type, Color.
6. Sett fargen med Colour picker eller Derived Hex, for eksempel #2457A6.
7. Velg Create token. Bruk Save token til senere endringer.

Organiser tokens

Hver startkategori foreslår en type for nye tokens. Velg kategorien som gjør det enkelt for andre å finne verdien.

Velg Add category for et nytt område eller Add group for en underordnet samling. Grupper kan inneholde tokens og flere grupper. Under Settings starter Suggested type for new tokens med det lagrede forslaget eller No suggestion. Endring påvirker nye tokens og beholder eksisterende verdier.

• Colors - Starttype: Color. Eksempel: Brand blue eller brødtekst.
• Font Families - Starttype: Font family. Eksempel: førstevalgt skrift og reserveskrifter.
• Font Weights - Starttype: Font weight. Eksempel: normal eller fet tekst.
• Typography - Starttype: Typography. Eksempel: skriftfamilie, størrelse, vekt og linjeavstand samlet.
• Spacing - Starttype: Dimension. Eksempel: en innholdsavstand på 16px.
• Sizing - Starttype: Dimension. Eksempel: høyden på en kontroll.
• Border Radius - Starttype: Dimension. Eksempel: en hjørneradius på 4px.
• Borders - Starttype: Border. Eksempel: bredde, strek og farge samlet.
• Shadows - Starttype: Shadow. Eksempel: skyggen til et kort.
• Gradients - Starttype: Gradient. Eksempel: fargestopp i en overgang.
• Opacity - Starttype: Number. Eksempel: en verdi for hvor dekkende fargen er.
• Motion - Starttype: Duration. Eksempel: varigheten til en overgang.

Velg en verditype

Bruk Value type når du oppretter en token, eller tilsvarende innstilling under Settings senere. Typen bestemmer feltene du redigerer. Dimension har en enhet. Number har ingen.

For Fluid dimension bruker du samme enhet for de to størrelsene og samme enhet for de to visningsbreddene. Maximum size må være minst Minimum size, og Maximum viewport må være større enn Minimum viewport.

Navngitte skriftvekter samler kjente navn ved samme tallverdi: Thin/Hairline 100, Extra light/Ultra light 200, Light 300, Normal/Regular/Book 400, Medium 500, Semi bold/Demi bold 600, Bold 700, Extra bold/Ultra bold 800, Black/Heavy 900, Extra black/Ultra black 950.

• Color - Startverdi: svart i sRGB, Opacity 100 %. Sett en farge som #2457A6. Bruk fargekontrollene nedenfor til avanserte verdier.
• Dimension - Startverdi: 0px. Fyll inn Amount og Unit, px eller rem. Bruk 16px til en fast innvendig kortavstand eller 1rem for å følge sidens rotskriftstørrelse.
• Fluid dimension - Startverdi: 16px ved 320px visningsbredde, økende til 32px ved 1280px. Sett Minimum size, Minimum viewport, Maximum size og Maximum viewport med Amount og Unit for hver. Bruk 18px ved 390px og 24px ved 1440px til tekst som vokser med visningsbredden.
• Font family - Startverdi: sans-serif. Skriv førstevalget og deretter Add fallback family. Flytt oppføringer opp/ned for å endre rekkefølgen, eller bruk Remove på en ekstra oppføring. Bruk en levert skrift først og sans-serif som reserveskrift.
• Font weight - Startverdi: Numeric weight 400. Weight representation velger Numeric weight eller Named weight. Skriv 1–1000 som tall, for eksempel 700 for fet skrift, eller velg en navngitt vekt.
• Duration - Startverdi: 0ms. Sett Amount og Unit, ms eller s. Bruk 200ms til en kort overgang.
• Cubic Bézier - Startverdi: Start X 0.2, Start Y 0, End X 0.2, End Y 1. Rediger de fire kurvekoordinatene for å endre bevegelsesforløpet. Start X og End X bruker 0–1. 0, 0, 1, 1 gir en lineær kurve.
• Number - Startverdi: 0. Skriv et tall uten enhet, for eksempel 0.8 for Opacity.
• Typography - Startverdi: sans-serif, størrelse 16px, vekt 400, linjehøyde 1.5 og bokstavavstand 0px. Rediger Font family, Size, Weight, Line height og Letter spacing samlet. Advanced typography → Size representation bytter mellom Fixed dimension og Fluid dimension og erstatter størrelsen med typens startverdi.
• Shadow - Startverdi: ett svart lag med null forskyvning, uskarphet og spredning, og Inset av. Sett Colour, X offset, Y offset, Blur, Spread og Inset. Legg til, fjern eller endre lagrekkefølgen. En liten positiv Y offset og Blur gir for eksempel et løftet kort.
• Border - Startverdi: svart, Width 1px og Stroke Solid. Rediger Width, Stroke og Colour. Bruk en grå heltrukket 1px-kant til et kortomriss.
• Transition - Startverdi: Duration 200ms, Delay 0ms og bevegelseskurve 0.2, 0, 0.2, 1. Endre Duration, Delay og Easing. Bruk null forsinkelse for en umiddelbar Hover-overgang.
• Gradient - Startverdi: to svarte stopp ved Position 0 og 1. Sett Colour og Position for hvert stopp fra 0 til 1. Legg til, fjern eller endre rekkefølgen. Bruk to forskjellige farger ved 0 og 1 til en enkel gradient.
• Stroke style - Startverdi: Solid. Velg Solid, Dashed, Dotted, Double, Groove, Ridge, Outset, Inset eller Custom dash pattern. Custom starter med 4px og 2px streker og Butt-linjeende. Endre streklengder og rekkefølge, og velg Round, Butt eller Square som linjeende.

Fargekontroller

Bruk Colour picker eller Derived Hex til en vanlig RGB-farge. Opacity er prosent og starter på 100. For eksempel gjør 50 fargen halvt gjennomsiktig.

Åpne Advanced colour for å velge Colour space: sRGB, Linear sRGB, Display P3, Adobe RGB (1998), ProPhoto RGB, Rec. 2020, XYZ (D65), XYZ (D50), HSL, HWB, Lab, LCH, OKLab eller OKLCH. Behold sRGB til vanlige nettfarger. Velg et annet rom når du skal bruke en verdi oppgitt i dette rommet. Endring av Colour space beholder kanaltallene og tolker dem i det nye rommet. Den konverterer ikke gjeldende farge. Rediger de navngitte kanalfeltene med tall eller none for en uspesifisert kanal. Tillatte områder avhenger av fargerommet. Fallback hex (optional) starter tomt. Legg til en sekssifret RGB-reserveverdi ved behov, eller velg Remove fallback hex for å fjerne den.

Gjenbruk en annen tokens verdi

Velg Use reference, finn en kompatibel token eller verdiegenskap, og velg den. En referanse lar denne verdien følge en annen token. En Text primary-Color kan for eksempel følge en Ink-Color. Når Ink endres, oppdateres verdiene som følger den.

Når en referanse gir en verdi, beholder Use literal… → Use current resolved value en fast kopi av resultatet. Når den ikke gir en verdi, starter Use literal… → Enter a new literal en verdi som redigeres separat. Advanced value settings → Individual value property lar deg referere til én del av en større verdi, for eksempel fargen i en kant. Kontroller Result etter at du endrer en referanse.

Forhåndsvis verdier

Result viser verdien for de valgte temamodusene. Sample viewport width starter på 768 og Preview rem basis på 16px. Endre dem for å illustrere dimensjoner eller typografi ved en annen størrelse. Temporary sample family i skriftvektprøven starter på system-ui og tilbyr serif, sans-serif og monospace. Disse forhåndsvalgene beholder den lagrede tokenverdien.

Legg til lys og mørk modus

En temadimensjon samler valg, for eksempel Appearance med Light og Dark. Hver dimensjon har én lagret standard som brukes når en Page ikke har et uttrykkelig valg.

Value context viser Base value og lagrede overstyringer som egne redigeringsmål. Preview modes endrer bare den midlertidige forhåndsvisningen og beholder redigeringsmålet. Use system defaults fjerner uttrykkelige forhåndsvisningsvalg. Change conditions endrer modusene for en overstyring. Fjern en overstyring når denne sammenhengen skal arve grunnverdien igjen. Start from result instead under Other starting value kopierer gjeldende resultat som en fast verdi fremfor å fortsette å følge referansene.

Mer spesifikke overstyringer som treffer, vinner. En overstyring for Appearance og Brand vinner over en for bare Appearance. Settings → Resolution priority avgjør like spesifikke overlapp. Første dimensjon starter på 0. Hver ny dimensjon får neste høyere tall, og høyere tall vinner. Hold prioritetene ulike.

1. Åpne systemet og velg Add theme dimension.
2. Sett Theme dimension name til Appearance og velg Create theme dimension. Den starter med én modus kalt Default.
3. Åpne Default, endre Theme mode name til Light og velg Save theme mode.
4. Åpne Appearance, velg Add mode, kall modusen Dark og velg Create theme mode. Default mode forblir Light med mindre du endrer og lagrer dimensjonen.
5. Åpne en token og velg Value context → Another context. Sett Appearance til Dark og velg Use context.
6. For en arvet verdi velger du Add override for these conditions, redigerer verdien og velger Save token.

Navn, innstillinger og lagring

Lagre endringer på valgt objekt. Save design system, Save token, Save theme dimension og Save theme mode gjelder hver sin editor. En avvist lagring beholder utkastet og forklarer problemet. Reload saved definition laster inn en annen editors lagrede versjon ved konflikt.

Used by viser hvor en verdi brukes. Åpne objektets handlingsmeny for Duplicate eller Delete. Duplikatet er en egen kopi. Referanser inne i en kopiert samling følger de kopierte tokenene, mens referanser til andre samlinger beholder eksisterende kilder. Delete forhåndsviser berørte elementer. For å erstatte en utfaset token lagrer du først en erstatning av samme type og leser gjennom foreslåtte endringer før du bekrefter sletting.

• Name - Starttilstand: navnet du skrev. Gi systemet eller tokenen et lesbart navn. Navneendring på en token beholder eksisterende Style-koblinger.
• Key, under Settings - Starttilstand: generert fra navnet for en ny oppføring. En unik kort identifikator blant sidestilte elementer, for eksempel card-padding. Bruk bokstaver, tall, bindestreker eller understreker, og start med bokstav eller tall.
• Description - Starttilstand: tomt. Forklar designvalget, for eksempel en avstand mellom innhold i kort.
• System Status - Starttilstand: Draft. Behold uferdig arbeid i Draft. Ready to use kontrollerer tokenene på tvers av oppsatte temavalg. Deprecated markerer et system som fases ut.
• Token Value type - Starttilstand: forslaget fra kategorien eller gruppen. Velg verdiens faktiske type. Typebytte på en eksisterende token beholder den gamle verdien til du retter eventuelle avvik.
• Tier - Starttilstand: Not specified. Primitive for en grunnverdi, Semantic for betydning som Text primary, eller Component for en bestemt del som Button background.
• Use, Avoid - Starttilstand: tomt. Beskriv hvor en token bør og ikke bør brukes.
• Deprecated - Starttilstand: av. Marker en gammel token. Legg til Deprecation reason og en Replacement token av samme type når du faser den ut.
• Metadata - Starttilstand: tomt. Legg til eier, kilde eller merkelapper med New metadata key, Type og Add metadata. String starter tomt, Number på 0, Boolean på false, Object som {} og Array som []. Rediger Object- og Array-verdier som gyldig JSON. Remove sletter oppføringen.

Legg til skriftfiler

En font-family-token navngir skriften og reservene. Last opp og erklær skriftfilen når nettstedet skal levere denne skriften.

Format starter på WOFF2 og tilbyr også WOFF, TrueType og OpenType. Velg formatet til filen du lastet opp. Weight or range starter på 100 900. Bruk filens faktiske vekt eller støttede variable område, for eksempel 400 eller 100 900. Style starter på Normal, med Italic og Oblique tilgjengelig. Loading behavior starter på Swap, som viser en reserveskrift mens filen lastes og deretter bytter til den nedlastede skriften. Automatic lar nettleseren velge. Block skjuler teksten kort mens den venter og tillater deretter bytte. Fallback tillater bare bytte i et kort tidsrom etterpå. Optional beholder reserveskriften når teksten først er tegnet.

Bruk Edit declaration eller Remove declaration til å endre listen, og lagre deretter systemet. Cancel declaration forkaster utkastet. En allerede opplastet fil blir i arbeidsområdets opplastinger.

1. Åpne Font files i systemet og velg Add font file.
2. Velg Font family token, velg skriftfilen og deretter Upload workspace font.
3. Kontroller Format, Weight or range, Style og Loading behavior.
4. Velg Apply declaration og deretter Save design system.

Definer en gjenbrukbar Component

Velg Add Component under systemets Components for å beskrive formålet og designkravene til en gjenbrukbar grensesnittdel. Definisjonen hjelper deg å kontrollere en Organizer-Component mot kravene.

Purpose, Use og Avoid starter tomme. Requirements, Capabilities, Accessibility og Token roles starter også tomme. Beskriv forventet oppførsel i Requirements og forventninger for tastaturbrukere eller hjelpemidler i Accessibility. Capabilities lister Style-egenskapene komponenten skal støtte. Parts starter med Root, Variants med Default og States med Default. Legg til delene og valgene du trenger, for eksempel en etikettdel, en kompakt variant eller Hover. Tilstandsvalgene er Default, Hover, Focus visible, Active, Disabled, Invalid og Selected.

Velg Add token role og deretter Part og Role for å beskrive hvilken Style-verdi en del trenger, for eksempel Root background. I innstillingene til den gjenbrukbare Organizer-Component-en velger du dens eget Design System og bruker Implements til å velge denne definisjonen. Du kan også bruke Link implementation fra definisjonen, velge en Organizer Component og Link. Kontroller implementasjonssjekkene og Preview, inkludert Variant og State. Unlink fjerner koblingen. Kontroller faktisk oppførsel og tilgjengelighet separat fra disse struktursjekkene.

Bruk tokens på en Page eller Component

En Style-egenskap bruker tokenen du velger, for eksempel Card padding for Padding. Site velger systemet som brukes av sidene. En gjenbrukbar Component velger sitt eget system.

1. I en Site velger du General → Design System og systemet ditt.
2. For en gjenbrukbar Component velger du Design System i dens egne innstillinger.
3. Åpne relevant Style-egenskap, velg Choose token og en kompatibel token etter kategori og navn.
4. Velg elementet som skal bruke stilen. Velg pluss ved Properties, åpne palettkategorien og velg stilen etter navn. Se Styles for oppretting og tilknytning av stiler.
5. Bruk Theme context på en Page eller Component til å velge moduser. Use default modes fjerner uttrykkelige modusvalg.
6. Kontroller Preview. Publiser på nytt når publiserte Pages skal få de nye designverdiene.

Eksempler

Eksempelsystemet bruker Brand blue #2457A6, Card padding 16px og Light/Dark-moduser under Appearance. Behold samme tokenvalg i Styles mens du endrer de lagrede verdiene.

Gi et kort merkefargen

Bruk én lagret Color fremfor å skrive samme hexverdi på hver Style.

1. Opprett Colors → Brand blue med Derived Hex #2457A6 og lagre.
2. Velg Guide design i Component-innstillingene.
3. Velg Choose token → Colors / Brand blue i stilens Background Color.
4. Velg kortelementet i Components. Velg pluss ved Properties, åpne palettkategorien og velg stilen etter navn.
5. Hvis elementet allerede har sin egen Background Color, fjerner du egenskapen gjennom Background Color settings → Delete, slik at den delte stilen kan gi fargen.
6. Forhåndsvis Component i standardmodus. Gjenbruk tokenen i andre kompatible Style-egenskaper som skal følge samme merkefarge.

Del innvendig kortavstand

Behold en enhet med avstandsverdien, slik at den kan brukes av Padding.

1. Åpne Spacing, velg Add token og kall den Card padding.
2. Behold Value type Dimension, sett Amount 16 og Unit px, og opprett tokenen.
3. Velg Choose token → Spacing / Card padding i kortstilens Padding.
4. Knytt stilen til kortelementet som i forrige eksempel. Kontroller innvendig avstand og tekstbryting. Senere kan du lagre 24px på samme token for å endre den delte avstanden.

Bruk en lysere merkefarge i Dark-modus

Gi Brand blue én verdi for en bestemt sammenheng og behold eksisterende Style-koblinger.

1. Opprett Appearance med Light som lagret standard og legg til Dark.
2. På Brand blue velger du Value context → Another context, deretter Appearance Dark og Use context.
3. Velg Add override for these conditions, fyll inn Derived Hex #A8C7FA og velg Save token.
4. Kontroller at Editing og Preview begge viser Appearance Dark og at Result viser #A8C7FA.
5. Forhåndsvis Light for å kontrollere grunnresultatet #2457A6. Den lagrede Dark-overstyringen beholdes.

Begrensninger og vanlige feil

• Kontroller Editing og Preview før du endrer en verdi for et bestemt temavalg. De kan vise ulike moduser.
• Bruk Dimension til avstand og Number til verdier uten enhet. En Number med 16 kan ikke erstatte en avstandstoken på 16px.
• Rett ugyldige verdier eller referanser før du velger dem i en Style. Ready to use kontrollerer alle oppsatte sammenhenger.
• Endring av rekkefølgen i arrayer, som gradientstopp eller skyggelag, endrer de indekserte egenskapene. Kontroller referanser til enkeltoppføringer etter omorganisering.
• Et skriftfamilienavn trenger sin erklærte opplastede fil når besøkende skal bruke den skriften.
• Publiser på nytt for å oppdatere kompilerte designverdier på en publisert Page. Bruk Models når du kopierer de bygde elementene og nødvendige Definitions til et annet arbeidsområde.

Relaterte artikler

• Definitions - organiser felles betydning og designvalg.
• Styles - bruk tokens på elementer.
• Responsive - bruk visningsbredder og flytende verdier.
• Component - bygg en gjenbrukbar grensesnittdel.
• Models - kopier bygde elementer og nødvendige Definitions.

Design System

Et Design System i Definitions lagrer felles farger, avstander, skriftinnstillinger og temavalg. Lagre hver gjenbrukbare verdi som en token, og velg den deretter i en kompatibel Style-egenskap på en Page eller Component. Bruk det når flere deler av appen eller nettstedet skal følge de samme designvalgene.

Opprett et system og den første tokenen

Et nytt system starter som Draft med tolv tokenkategorier. Tokens er navngitte designverdier. Brand blue kan for eksempel inneholde en Color, og Card padding en Dimension.

Velg systemet, kategorien, gruppen eller tokenen i treet for å åpne editoren. Discard changes gjenoppretter lagret versjon. Cancel lukker en ny ulagret oppføring.

1. Hold pekeren over Definitions og åpne Definitions actions.
2. Velg New design system.
3. Fyll inn Design system name, for eksempel Guide design, og velg Create design system.
4. Åpne Colors under Tokens og velg Add token.
5. Fyll inn Token name, for eksempel Brand blue. Value type starter på kategoriens foreslåtte type, Color.
6. Sett fargen med Colour picker eller Derived Hex, for eksempel #2457A6.
7. Velg Create token. Bruk Save token til senere endringer.

Organiser tokens

Hver startkategori foreslår en type for nye tokens. Velg kategorien som gjør det enkelt for andre å finne verdien.

Velg Add category for et nytt område eller Add group for en underordnet samling. Grupper kan inneholde tokens og flere grupper. Under Settings starter Suggested type for new tokens med det lagrede forslaget eller No suggestion. Endring påvirker nye tokens og beholder eksisterende verdier.

• Colors - Starttype: Color. Eksempel: Brand blue eller brødtekst.
• Font Families - Starttype: Font family. Eksempel: førstevalgt skrift og reserveskrifter.
• Font Weights - Starttype: Font weight. Eksempel: normal eller fet tekst.
• Typography - Starttype: Typography. Eksempel: skriftfamilie, størrelse, vekt og linjeavstand samlet.
• Spacing - Starttype: Dimension. Eksempel: en innholdsavstand på 16px.
• Sizing - Starttype: Dimension. Eksempel: høyden på en kontroll.
• Border Radius - Starttype: Dimension. Eksempel: en hjørneradius på 4px.
• Borders - Starttype: Border. Eksempel: bredde, strek og farge samlet.
• Shadows - Starttype: Shadow. Eksempel: skyggen til et kort.
• Gradients - Starttype: Gradient. Eksempel: fargestopp i en overgang.
• Opacity - Starttype: Number. Eksempel: en verdi for hvor dekkende fargen er.
• Motion - Starttype: Duration. Eksempel: varigheten til en overgang.

Velg en verditype

Bruk Value type når du oppretter en token, eller tilsvarende innstilling under Settings senere. Typen bestemmer feltene du redigerer. Dimension har en enhet. Number har ingen.

For Fluid dimension bruker du samme enhet for de to størrelsene og samme enhet for de to visningsbreddene. Maximum size må være minst Minimum size, og Maximum viewport må være større enn Minimum viewport.

Navngitte skriftvekter samler kjente navn ved samme tallverdi: Thin/Hairline 100, Extra light/Ultra light 200, Light 300, Normal/Regular/Book 400, Medium 500, Semi bold/Demi bold 600, Bold 700, Extra bold/Ultra bold 800, Black/Heavy 900, Extra black/Ultra black 950.

• Color - Startverdi: svart i sRGB, Opacity 100 %. Sett en farge som #2457A6. Bruk fargekontrollene nedenfor til avanserte verdier.
• Dimension - Startverdi: 0px. Fyll inn Amount og Unit, px eller rem. Bruk 16px til en fast innvendig kortavstand eller 1rem for å følge sidens rotskriftstørrelse.
• Fluid dimension - Startverdi: 16px ved 320px visningsbredde, økende til 32px ved 1280px. Sett Minimum size, Minimum viewport, Maximum size og Maximum viewport med Amount og Unit for hver. Bruk 18px ved 390px og 24px ved 1440px til tekst som vokser med visningsbredden.
• Font family - Startverdi: sans-serif. Skriv førstevalget og deretter Add fallback family. Flytt oppføringer opp/ned for å endre rekkefølgen, eller bruk Remove på en ekstra oppføring. Bruk en levert skrift først og sans-serif som reserveskrift.
• Font weight - Startverdi: Numeric weight 400. Weight representation velger Numeric weight eller Named weight. Skriv 1–1000 som tall, for eksempel 700 for fet skrift, eller velg en navngitt vekt.
• Duration - Startverdi: 0ms. Sett Amount og Unit, ms eller s. Bruk 200ms til en kort overgang.
• Cubic Bézier - Startverdi: Start X 0.2, Start Y 0, End X 0.2, End Y 1. Rediger de fire kurvekoordinatene for å endre bevegelsesforløpet. Start X og End X bruker 0–1. 0, 0, 1, 1 gir en lineær kurve.
• Number - Startverdi: 0. Skriv et tall uten enhet, for eksempel 0.8 for Opacity.
• Typography - Startverdi: sans-serif, størrelse 16px, vekt 400, linjehøyde 1.5 og bokstavavstand 0px. Rediger Font family, Size, Weight, Line height og Letter spacing samlet. Advanced typography → Size representation bytter mellom Fixed dimension og Fluid dimension og erstatter størrelsen med typens startverdi.
• Shadow - Startverdi: ett svart lag med null forskyvning, uskarphet og spredning, og Inset av. Sett Colour, X offset, Y offset, Blur, Spread og Inset. Legg til, fjern eller endre lagrekkefølgen. En liten positiv Y offset og Blur gir for eksempel et løftet kort.
• Border - Startverdi: svart, Width 1px og Stroke Solid. Rediger Width, Stroke og Colour. Bruk en grå heltrukket 1px-kant til et kortomriss.
• Transition - Startverdi: Duration 200ms, Delay 0ms og bevegelseskurve 0.2, 0, 0.2, 1. Endre Duration, Delay og Easing. Bruk null forsinkelse for en umiddelbar Hover-overgang.
• Gradient - Startverdi: to svarte stopp ved Position 0 og 1. Sett Colour og Position for hvert stopp fra 0 til 1. Legg til, fjern eller endre rekkefølgen. Bruk to forskjellige farger ved 0 og 1 til en enkel gradient.
• Stroke style - Startverdi: Solid. Velg Solid, Dashed, Dotted, Double, Groove, Ridge, Outset, Inset eller Custom dash pattern. Custom starter med 4px og 2px streker og Butt-linjeende. Endre streklengder og rekkefølge, og velg Round, Butt eller Square som linjeende.

Fargekontroller

Bruk Colour picker eller Derived Hex til en vanlig RGB-farge. Opacity er prosent og starter på 100. For eksempel gjør 50 fargen halvt gjennomsiktig.

Åpne Advanced colour for å velge Colour space: sRGB, Linear sRGB, Display P3, Adobe RGB (1998), ProPhoto RGB, Rec. 2020, XYZ (D65), XYZ (D50), HSL, HWB, Lab, LCH, OKLab eller OKLCH. Behold sRGB til vanlige nettfarger. Velg et annet rom når du skal bruke en verdi oppgitt i dette rommet. Endring av Colour space beholder kanaltallene og tolker dem i det nye rommet. Den konverterer ikke gjeldende farge. Rediger de navngitte kanalfeltene med tall eller none for en uspesifisert kanal. Tillatte områder avhenger av fargerommet. Fallback hex (optional) starter tomt. Legg til en sekssifret RGB-reserveverdi ved behov, eller velg Remove fallback hex for å fjerne den.

Gjenbruk en annen tokens verdi

Velg Use reference, finn en kompatibel token eller verdiegenskap, og velg den. En referanse lar denne verdien følge en annen token. En Text primary-Color kan for eksempel følge en Ink-Color. Når Ink endres, oppdateres verdiene som følger den.

Når en referanse gir en verdi, beholder Use literal… → Use current resolved value en fast kopi av resultatet. Når den ikke gir en verdi, starter Use literal… → Enter a new literal en verdi som redigeres separat. Advanced value settings → Individual value property lar deg referere til én del av en større verdi, for eksempel fargen i en kant. Kontroller Result etter at du endrer en referanse.

Forhåndsvis verdier

Result viser verdien for de valgte temamodusene. Sample viewport width starter på 768 og Preview rem basis på 16px. Endre dem for å illustrere dimensjoner eller typografi ved en annen størrelse. Temporary sample family i skriftvektprøven starter på system-ui og tilbyr serif, sans-serif og monospace. Disse forhåndsvalgene beholder den lagrede tokenverdien.

Legg til lys og mørk modus

En temadimensjon samler valg, for eksempel Appearance med Light og Dark. Hver dimensjon har én lagret standard som brukes når en Page ikke har et uttrykkelig valg.

Value context viser Base value og lagrede overstyringer som egne redigeringsmål. Preview modes endrer bare den midlertidige forhåndsvisningen og beholder redigeringsmålet. Use system defaults fjerner uttrykkelige forhåndsvisningsvalg. Change conditions endrer modusene for en overstyring. Fjern en overstyring når denne sammenhengen skal arve grunnverdien igjen. Start from result instead under Other starting value kopierer gjeldende resultat som en fast verdi fremfor å fortsette å følge referansene.

Mer spesifikke overstyringer som treffer, vinner. En overstyring for Appearance og Brand vinner over en for bare Appearance. Settings → Resolution priority avgjør like spesifikke overlapp. Første dimensjon starter på 0. Hver ny dimensjon får neste høyere tall, og høyere tall vinner. Hold prioritetene ulike.

1. Åpne systemet og velg Add theme dimension.
2. Sett Theme dimension name til Appearance og velg Create theme dimension. Den starter med én modus kalt Default.
3. Åpne Default, endre Theme mode name til Light og velg Save theme mode.
4. Åpne Appearance, velg Add mode, kall modusen Dark og velg Create theme mode. Default mode forblir Light med mindre du endrer og lagrer dimensjonen.
5. Åpne en token og velg Value context → Another context. Sett Appearance til Dark og velg Use context.
6. For en arvet verdi velger du Add override for these conditions, redigerer verdien og velger Save token.

Navn, innstillinger og lagring

Lagre endringer på valgt objekt. Save design system, Save token, Save theme dimension og Save theme mode gjelder hver sin editor. En avvist lagring beholder utkastet og forklarer problemet. Reload saved definition laster inn en annen editors lagrede versjon ved konflikt.

Used by viser hvor en verdi brukes. Åpne objektets handlingsmeny for Duplicate eller Delete. Duplikatet er en egen kopi. Referanser inne i en kopiert samling følger de kopierte tokenene, mens referanser til andre samlinger beholder eksisterende kilder. Delete forhåndsviser berørte elementer. For å erstatte en utfaset token lagrer du først en erstatning av samme type og leser gjennom foreslåtte endringer før du bekrefter sletting.

• Name - Starttilstand: navnet du skrev. Gi systemet eller tokenen et lesbart navn. Navneendring på en token beholder eksisterende Style-koblinger.
• Key, under Settings - Starttilstand: generert fra navnet for en ny oppføring. En unik kort identifikator blant sidestilte elementer, for eksempel card-padding. Bruk bokstaver, tall, bindestreker eller understreker, og start med bokstav eller tall.
• Description - Starttilstand: tomt. Forklar designvalget, for eksempel en avstand mellom innhold i kort.
• System Status - Starttilstand: Draft. Behold uferdig arbeid i Draft. Ready to use kontrollerer tokenene på tvers av oppsatte temavalg. Deprecated markerer et system som fases ut.
• Token Value type - Starttilstand: forslaget fra kategorien eller gruppen. Velg verdiens faktiske type. Typebytte på en eksisterende token beholder den gamle verdien til du retter eventuelle avvik.
• Tier - Starttilstand: Not specified. Primitive for en grunnverdi, Semantic for betydning som Text primary, eller Component for en bestemt del som Button background.
• Use, Avoid - Starttilstand: tomt. Beskriv hvor en token bør og ikke bør brukes.
• Deprecated - Starttilstand: av. Marker en gammel token. Legg til Deprecation reason og en Replacement token av samme type når du faser den ut.
• Metadata - Starttilstand: tomt. Legg til eier, kilde eller merkelapper med New metadata key, Type og Add metadata. String starter tomt, Number på 0, Boolean på false, Object som {} og Array som []. Rediger Object- og Array-verdier som gyldig JSON. Remove sletter oppføringen.

Legg til skriftfiler

En font-family-token navngir skriften og reservene. Last opp og erklær skriftfilen når nettstedet skal levere denne skriften.

Format starter på WOFF2 og tilbyr også WOFF, TrueType og OpenType. Velg formatet til filen du lastet opp. Weight or range starter på 100 900. Bruk filens faktiske vekt eller støttede variable område, for eksempel 400 eller 100 900. Style starter på Normal, med Italic og Oblique tilgjengelig. Loading behavior starter på Swap, som viser en reserveskrift mens filen lastes og deretter bytter til den nedlastede skriften. Automatic lar nettleseren velge. Block skjuler teksten kort mens den venter og tillater deretter bytte. Fallback tillater bare bytte i et kort tidsrom etterpå. Optional beholder reserveskriften når teksten først er tegnet.

Bruk Edit declaration eller Remove declaration til å endre listen, og lagre deretter systemet. Cancel declaration forkaster utkastet. En allerede opplastet fil blir i arbeidsområdets opplastinger.

1. Åpne Font files i systemet og velg Add font file.
2. Velg Font family token, velg skriftfilen og deretter Upload workspace font.
3. Kontroller Format, Weight or range, Style og Loading behavior.
4. Velg Apply declaration og deretter Save design system.

Definer en gjenbrukbar Component

Velg Add Component under systemets Components for å beskrive formålet og designkravene til en gjenbrukbar grensesnittdel. Definisjonen hjelper deg å kontrollere en Organizer-Component mot kravene.

Purpose, Use og Avoid starter tomme. Requirements, Capabilities, Accessibility og Token roles starter også tomme. Beskriv forventet oppførsel i Requirements og forventninger for tastaturbrukere eller hjelpemidler i Accessibility. Capabilities lister Style-egenskapene komponenten skal støtte. Parts starter med Root, Variants med Default og States med Default. Legg til delene og valgene du trenger, for eksempel en etikettdel, en kompakt variant eller Hover. Tilstandsvalgene er Default, Hover, Focus visible, Active, Disabled, Invalid og Selected.

Velg Add token role og deretter Part og Role for å beskrive hvilken Style-verdi en del trenger, for eksempel Root background. I innstillingene til den gjenbrukbare Organizer-Component-en velger du dens eget Design System og bruker Implements til å velge denne definisjonen. Du kan også bruke Link implementation fra definisjonen, velge en Organizer Component og Link. Kontroller implementasjonssjekkene og Preview, inkludert Variant og State. Unlink fjerner koblingen. Kontroller faktisk oppførsel og tilgjengelighet separat fra disse struktursjekkene.

Bruk tokens på en Page eller Component

En Style-egenskap bruker tokenen du velger, for eksempel Card padding for Padding. Site velger systemet som brukes av sidene. En gjenbrukbar Component velger sitt eget system.

1. I en Site velger du General → Design System og systemet ditt.
2. For en gjenbrukbar Component velger du Design System i dens egne innstillinger.
3. Åpne relevant Style-egenskap, velg Choose token og en kompatibel token etter kategori og navn.
4. Velg elementet som skal bruke stilen. Velg pluss ved Properties, åpne palettkategorien og velg stilen etter navn. Se Styles for oppretting og tilknytning av stiler.
5. Bruk Theme context på en Page eller Component til å velge moduser. Use default modes fjerner uttrykkelige modusvalg.
6. Kontroller Preview. Publiser på nytt når publiserte Pages skal få de nye designverdiene.

Eksempler

Eksempelsystemet bruker Brand blue #2457A6, Card padding 16px og Light/Dark-moduser under Appearance. Behold samme tokenvalg i Styles mens du endrer de lagrede verdiene.

Gi et kort merkefargen

Bruk én lagret Color fremfor å skrive samme hexverdi på hver Style.

1. Opprett Colors → Brand blue med Derived Hex #2457A6 og lagre.
2. Velg Guide design i Component-innstillingene.
3. Velg Choose token → Colors / Brand blue i stilens Background Color.
4. Velg kortelementet i Components. Velg pluss ved Properties, åpne palettkategorien og velg stilen etter navn.
5. Hvis elementet allerede har sin egen Background Color, fjerner du egenskapen gjennom Background Color settings → Delete, slik at den delte stilen kan gi fargen.
6. Forhåndsvis Component i standardmodus. Gjenbruk tokenen i andre kompatible Style-egenskaper som skal følge samme merkefarge.

Del innvendig kortavstand

Behold en enhet med avstandsverdien, slik at den kan brukes av Padding.

1. Åpne Spacing, velg Add token og kall den Card padding.
2. Behold Value type Dimension, sett Amount 16 og Unit px, og opprett tokenen.
3. Velg Choose token → Spacing / Card padding i kortstilens Padding.
4. Knytt stilen til kortelementet som i forrige eksempel. Kontroller innvendig avstand og tekstbryting. Senere kan du lagre 24px på samme token for å endre den delte avstanden.

Bruk en lysere merkefarge i Dark-modus

Gi Brand blue én verdi for en bestemt sammenheng og behold eksisterende Style-koblinger.

1. Opprett Appearance med Light som lagret standard og legg til Dark.
2. På Brand blue velger du Value context → Another context, deretter Appearance Dark og Use context.
3. Velg Add override for these conditions, fyll inn Derived Hex #A8C7FA og velg Save token.
4. Kontroller at Editing og Preview begge viser Appearance Dark og at Result viser #A8C7FA.
5. Forhåndsvis Light for å kontrollere grunnresultatet #2457A6. Den lagrede Dark-overstyringen beholdes.

Begrensninger og vanlige feil

• Kontroller Editing og Preview før du endrer en verdi for et bestemt temavalg. De kan vise ulike moduser.
• Bruk Dimension til avstand og Number til verdier uten enhet. En Number med 16 kan ikke erstatte en avstandstoken på 16px.
• Rett ugyldige verdier eller referanser før du velger dem i en Style. Ready to use kontrollerer alle oppsatte sammenhenger.
• Endring av rekkefølgen i arrayer, som gradientstopp eller skyggelag, endrer de indekserte egenskapene. Kontroller referanser til enkeltoppføringer etter omorganisering.
• Et skriftfamilienavn trenger sin erklærte opplastede fil når besøkende skal bruke den skriften.
• Publiser på nytt for å oppdatere kompilerte designverdier på en publisert Page. Bruk Models når du kopierer de bygde elementene og nødvendige Definitions til et annet arbeidsområde.

Relaterte artikler

• Definitions - organiser felles betydning og designvalg.
• Styles - bruk tokens på elementer.
• Responsive - bruk visningsbredder og flytende verdier.
• Component - bygg en gjenbrukbar grensesnittdel.
• Models - kopier bygde elementer og nødvendige Definitions.

Design System

Et Design System i Definitions lagrer felles farger, avstander, skriftinnstillinger og temavalg. Lagre hver gjenbrukbare verdi som en token, og velg den deretter i en kompatibel Style-egenskap på en Page eller Component. Bruk det når flere deler av appen eller nettstedet skal følge de samme designvalgene.

Opprett et system og den første tokenen

Et nytt system starter som Draft med tolv tokenkategorier. Tokens er navngitte designverdier. Brand blue kan for eksempel inneholde en Color, og Card padding en Dimension.

Velg systemet, kategorien, gruppen eller tokenen i treet for å åpne editoren. Discard changes gjenoppretter lagret versjon. Cancel lukker en ny ulagret oppføring.

1. Hold pekeren over Definitions og åpne Definitions actions.
2. Velg New design system.
3. Fyll inn Design system name, for eksempel Guide design, og velg Create design system.
4. Åpne Colors under Tokens og velg Add token.
5. Fyll inn Token name, for eksempel Brand blue. Value type starter på kategoriens foreslåtte type, Color.
6. Sett fargen med Colour picker eller Derived Hex, for eksempel #2457A6.
7. Velg Create token. Bruk Save token til senere endringer.

Organiser tokens

Hver startkategori foreslår en type for nye tokens. Velg kategorien som gjør det enkelt for andre å finne verdien.

Velg Add category for et nytt område eller Add group for en underordnet samling. Grupper kan inneholde tokens og flere grupper. Under Settings starter Suggested type for new tokens med det lagrede forslaget eller No suggestion. Endring påvirker nye tokens og beholder eksisterende verdier.

• Colors - Starttype: Color. Eksempel: Brand blue eller brødtekst.
• Font Families - Starttype: Font family. Eksempel: førstevalgt skrift og reserveskrifter.
• Font Weights - Starttype: Font weight. Eksempel: normal eller fet tekst.
• Typography - Starttype: Typography. Eksempel: skriftfamilie, størrelse, vekt og linjeavstand samlet.
• Spacing - Starttype: Dimension. Eksempel: en innholdsavstand på 16px.
• Sizing - Starttype: Dimension. Eksempel: høyden på en kontroll.
• Border Radius - Starttype: Dimension. Eksempel: en hjørneradius på 4px.
• Borders - Starttype: Border. Eksempel: bredde, strek og farge samlet.
• Shadows - Starttype: Shadow. Eksempel: skyggen til et kort.
• Gradients - Starttype: Gradient. Eksempel: fargestopp i en overgang.
• Opacity - Starttype: Number. Eksempel: en verdi for hvor dekkende fargen er.
• Motion - Starttype: Duration. Eksempel: varigheten til en overgang.

Velg en verditype

Bruk Value type når du oppretter en token, eller tilsvarende innstilling under Settings senere. Typen bestemmer feltene du redigerer. Dimension har en enhet. Number har ingen.

For Fluid dimension bruker du samme enhet for de to størrelsene og samme enhet for de to visningsbreddene. Maximum size må være minst Minimum size, og Maximum viewport må være større enn Minimum viewport.

Navngitte skriftvekter samler kjente navn ved samme tallverdi: Thin/Hairline 100, Extra light/Ultra light 200, Light 300, Normal/Regular/Book 400, Medium 500, Semi bold/Demi bold 600, Bold 700, Extra bold/Ultra bold 800, Black/Heavy 900, Extra black/Ultra black 950.

• Color - Startverdi: svart i sRGB, Opacity 100 %. Sett en farge som #2457A6. Bruk fargekontrollene nedenfor til avanserte verdier.
• Dimension - Startverdi: 0px. Fyll inn Amount og Unit, px eller rem. Bruk 16px til en fast innvendig kortavstand eller 1rem for å følge sidens rotskriftstørrelse.
• Fluid dimension - Startverdi: 16px ved 320px visningsbredde, økende til 32px ved 1280px. Sett Minimum size, Minimum viewport, Maximum size og Maximum viewport med Amount og Unit for hver. Bruk 18px ved 390px og 24px ved 1440px til tekst som vokser med visningsbredden.
• Font family - Startverdi: sans-serif. Skriv førstevalget og deretter Add fallback family. Flytt oppføringer opp/ned for å endre rekkefølgen, eller bruk Remove på en ekstra oppføring. Bruk en levert skrift først og sans-serif som reserveskrift.
• Font weight - Startverdi: Numeric weight 400. Weight representation velger Numeric weight eller Named weight. Skriv 1–1000 som tall, for eksempel 700 for fet skrift, eller velg en navngitt vekt.
• Duration - Startverdi: 0ms. Sett Amount og Unit, ms eller s. Bruk 200ms til en kort overgang.
• Cubic Bézier - Startverdi: Start X 0.2, Start Y 0, End X 0.2, End Y 1. Rediger de fire kurvekoordinatene for å endre bevegelsesforløpet. Start X og End X bruker 0–1. 0, 0, 1, 1 gir en lineær kurve.
• Number - Startverdi: 0. Skriv et tall uten enhet, for eksempel 0.8 for Opacity.
• Typography - Startverdi: sans-serif, størrelse 16px, vekt 400, linjehøyde 1.5 og bokstavavstand 0px. Rediger Font family, Size, Weight, Line height og Letter spacing samlet. Advanced typography → Size representation bytter mellom Fixed dimension og Fluid dimension og erstatter størrelsen med typens startverdi.
• Shadow - Startverdi: ett svart lag med null forskyvning, uskarphet og spredning, og Inset av. Sett Colour, X offset, Y offset, Blur, Spread og Inset. Legg til, fjern eller endre lagrekkefølgen. En liten positiv Y offset og Blur gir for eksempel et løftet kort.
• Border - Startverdi: svart, Width 1px og Stroke Solid. Rediger Width, Stroke og Colour. Bruk en grå heltrukket 1px-kant til et kortomriss.
• Transition - Startverdi: Duration 200ms, Delay 0ms og bevegelseskurve 0.2, 0, 0.2, 1. Endre Duration, Delay og Easing. Bruk null forsinkelse for en umiddelbar Hover-overgang.
• Gradient - Startverdi: to svarte stopp ved Position 0 og 1. Sett Colour og Position for hvert stopp fra 0 til 1. Legg til, fjern eller endre rekkefølgen. Bruk to forskjellige farger ved 0 og 1 til en enkel gradient.
• Stroke style - Startverdi: Solid. Velg Solid, Dashed, Dotted, Double, Groove, Ridge, Outset, Inset eller Custom dash pattern. Custom starter med 4px og 2px streker og Butt-linjeende. Endre streklengder og rekkefølge, og velg Round, Butt eller Square som linjeende.

Fargekontroller

Bruk Colour picker eller Derived Hex til en vanlig RGB-farge. Opacity er prosent og starter på 100. For eksempel gjør 50 fargen halvt gjennomsiktig.

Åpne Advanced colour for å velge Colour space: sRGB, Linear sRGB, Display P3, Adobe RGB (1998), ProPhoto RGB, Rec. 2020, XYZ (D65), XYZ (D50), HSL, HWB, Lab, LCH, OKLab eller OKLCH. Behold sRGB til vanlige nettfarger. Velg et annet rom når du skal bruke en verdi oppgitt i dette rommet. Endring av Colour space beholder kanaltallene og tolker dem i det nye rommet. Den konverterer ikke gjeldende farge. Rediger de navngitte kanalfeltene med tall eller none for en uspesifisert kanal. Tillatte områder avhenger av fargerommet. Fallback hex (optional) starter tomt. Legg til en sekssifret RGB-reserveverdi ved behov, eller velg Remove fallback hex for å fjerne den.

Gjenbruk en annen tokens verdi

Velg Use reference, finn en kompatibel token eller verdiegenskap, og velg den. En referanse lar denne verdien følge en annen token. En Text primary-Color kan for eksempel følge en Ink-Color. Når Ink endres, oppdateres verdiene som følger den.

Når en referanse gir en verdi, beholder Use literal… → Use current resolved value en fast kopi av resultatet. Når den ikke gir en verdi, starter Use literal… → Enter a new literal en verdi som redigeres separat. Advanced value settings → Individual value property lar deg referere til én del av en større verdi, for eksempel fargen i en kant. Kontroller Result etter at du endrer en referanse.

Forhåndsvis verdier

Result viser verdien for de valgte temamodusene. Sample viewport width starter på 768 og Preview rem basis på 16px. Endre dem for å illustrere dimensjoner eller typografi ved en annen størrelse. Temporary sample family i skriftvektprøven starter på system-ui og tilbyr serif, sans-serif og monospace. Disse forhåndsvalgene beholder den lagrede tokenverdien.

Legg til lys og mørk modus

En temadimensjon samler valg, for eksempel Appearance med Light og Dark. Hver dimensjon har én lagret standard som brukes når en Page ikke har et uttrykkelig valg.

Value context viser Base value og lagrede overstyringer som egne redigeringsmål. Preview modes endrer bare den midlertidige forhåndsvisningen og beholder redigeringsmålet. Use system defaults fjerner uttrykkelige forhåndsvisningsvalg. Change conditions endrer modusene for en overstyring. Fjern en overstyring når denne sammenhengen skal arve grunnverdien igjen. Start from result instead under Other starting value kopierer gjeldende resultat som en fast verdi fremfor å fortsette å følge referansene.

Mer spesifikke overstyringer som treffer, vinner. En overstyring for Appearance og Brand vinner over en for bare Appearance. Settings → Resolution priority avgjør like spesifikke overlapp. Første dimensjon starter på 0. Hver ny dimensjon får neste høyere tall, og høyere tall vinner. Hold prioritetene ulike.

1. Åpne systemet og velg Add theme dimension.
2. Sett Theme dimension name til Appearance og velg Create theme dimension. Den starter med én modus kalt Default.
3. Åpne Default, endre Theme mode name til Light og velg Save theme mode.
4. Åpne Appearance, velg Add mode, kall modusen Dark og velg Create theme mode. Default mode forblir Light med mindre du endrer og lagrer dimensjonen.
5. Åpne en token og velg Value context → Another context. Sett Appearance til Dark og velg Use context.
6. For en arvet verdi velger du Add override for these conditions, redigerer verdien og velger Save token.

Navn, innstillinger og lagring

Lagre endringer på valgt objekt. Save design system, Save token, Save theme dimension og Save theme mode gjelder hver sin editor. En avvist lagring beholder utkastet og forklarer problemet. Reload saved definition laster inn en annen editors lagrede versjon ved konflikt.

Used by viser hvor en verdi brukes. Åpne objektets handlingsmeny for Duplicate eller Delete. Duplikatet er en egen kopi. Referanser inne i en kopiert samling følger de kopierte tokenene, mens referanser til andre samlinger beholder eksisterende kilder. Delete forhåndsviser berørte elementer. For å erstatte en utfaset token lagrer du først en erstatning av samme type og leser gjennom foreslåtte endringer før du bekrefter sletting.

• Name - Starttilstand: navnet du skrev. Gi systemet eller tokenen et lesbart navn. Navneendring på en token beholder eksisterende Style-koblinger.
• Key, under Settings - Starttilstand: generert fra navnet for en ny oppføring. En unik kort identifikator blant sidestilte elementer, for eksempel card-padding. Bruk bokstaver, tall, bindestreker eller understreker, og start med bokstav eller tall.
• Description - Starttilstand: tomt. Forklar designvalget, for eksempel en avstand mellom innhold i kort.
• System Status - Starttilstand: Draft. Behold uferdig arbeid i Draft. Ready to use kontrollerer tokenene på tvers av oppsatte temavalg. Deprecated markerer et system som fases ut.
• Token Value type - Starttilstand: forslaget fra kategorien eller gruppen. Velg verdiens faktiske type. Typebytte på en eksisterende token beholder den gamle verdien til du retter eventuelle avvik.
• Tier - Starttilstand: Not specified. Primitive for en grunnverdi, Semantic for betydning som Text primary, eller Component for en bestemt del som Button background.
• Use, Avoid - Starttilstand: tomt. Beskriv hvor en token bør og ikke bør brukes.
• Deprecated - Starttilstand: av. Marker en gammel token. Legg til Deprecation reason og en Replacement token av samme type når du faser den ut.
• Metadata - Starttilstand: tomt. Legg til eier, kilde eller merkelapper med New metadata key, Type og Add metadata. String starter tomt, Number på 0, Boolean på false, Object som {} og Array som []. Rediger Object- og Array-verdier som gyldig JSON. Remove sletter oppføringen.

Legg til skriftfiler

En font-family-token navngir skriften og reservene. Last opp og erklær skriftfilen når nettstedet skal levere denne skriften.

Format starter på WOFF2 og tilbyr også WOFF, TrueType og OpenType. Velg formatet til filen du lastet opp. Weight or range starter på 100 900. Bruk filens faktiske vekt eller støttede variable område, for eksempel 400 eller 100 900. Style starter på Normal, med Italic og Oblique tilgjengelig. Loading behavior starter på Swap, som viser en reserveskrift mens filen lastes og deretter bytter til den nedlastede skriften. Automatic lar nettleseren velge. Block skjuler teksten kort mens den venter og tillater deretter bytte. Fallback tillater bare bytte i et kort tidsrom etterpå. Optional beholder reserveskriften når teksten først er tegnet.

Bruk Edit declaration eller Remove declaration til å endre listen, og lagre deretter systemet. Cancel declaration forkaster utkastet. En allerede opplastet fil blir i arbeidsområdets opplastinger.

1. Åpne Font files i systemet og velg Add font file.
2. Velg Font family token, velg skriftfilen og deretter Upload workspace font.
3. Kontroller Format, Weight or range, Style og Loading behavior.
4. Velg Apply declaration og deretter Save design system.

Definer en gjenbrukbar Component

Velg Add Component under systemets Components for å beskrive formålet og designkravene til en gjenbrukbar grensesnittdel. Definisjonen hjelper deg å kontrollere en Organizer-Component mot kravene.

Purpose, Use og Avoid starter tomme. Requirements, Capabilities, Accessibility og Token roles starter også tomme. Beskriv forventet oppførsel i Requirements og forventninger for tastaturbrukere eller hjelpemidler i Accessibility. Capabilities lister Style-egenskapene komponenten skal støtte. Parts starter med Root, Variants med Default og States med Default. Legg til delene og valgene du trenger, for eksempel en etikettdel, en kompakt variant eller Hover. Tilstandsvalgene er Default, Hover, Focus visible, Active, Disabled, Invalid og Selected.

Velg Add token role og deretter Part og Role for å beskrive hvilken Style-verdi en del trenger, for eksempel Root background. I innstillingene til den gjenbrukbare Organizer-Component-en velger du dens eget Design System og bruker Implements til å velge denne definisjonen. Du kan også bruke Link implementation fra definisjonen, velge en Organizer Component og Link. Kontroller implementasjonssjekkene og Preview, inkludert Variant og State. Unlink fjerner koblingen. Kontroller faktisk oppførsel og tilgjengelighet separat fra disse struktursjekkene.

Bruk tokens på en Page eller Component

En Style-egenskap bruker tokenen du velger, for eksempel Card padding for Padding. Site velger systemet som brukes av sidene. En gjenbrukbar Component velger sitt eget system.

1. I en Site velger du General → Design System og systemet ditt.
2. For en gjenbrukbar Component velger du Design System i dens egne innstillinger.
3. Åpne relevant Style-egenskap, velg Choose token og en kompatibel token etter kategori og navn.
4. Velg elementet som skal bruke stilen. Velg pluss ved Properties, åpne palettkategorien og velg stilen etter navn. Se Styles for oppretting og tilknytning av stiler.
5. Bruk Theme context på en Page eller Component til å velge moduser. Use default modes fjerner uttrykkelige modusvalg.
6. Kontroller Preview. Publiser på nytt når publiserte Pages skal få de nye designverdiene.

Eksempler

Eksempelsystemet bruker Brand blue #2457A6, Card padding 16px og Light/Dark-moduser under Appearance. Behold samme tokenvalg i Styles mens du endrer de lagrede verdiene.

Gi et kort merkefargen

Bruk én lagret Color fremfor å skrive samme hexverdi på hver Style.

1. Opprett Colors → Brand blue med Derived Hex #2457A6 og lagre.
2. Velg Guide design i Component-innstillingene.
3. Velg Choose token → Colors / Brand blue i stilens Background Color.
4. Velg kortelementet i Components. Velg pluss ved Properties, åpne palettkategorien og velg stilen etter navn.
5. Hvis elementet allerede har sin egen Background Color, fjerner du egenskapen gjennom Background Color settings → Delete, slik at den delte stilen kan gi fargen.
6. Forhåndsvis Component i standardmodus. Gjenbruk tokenen i andre kompatible Style-egenskaper som skal følge samme merkefarge.

Del innvendig kortavstand

Behold en enhet med avstandsverdien, slik at den kan brukes av Padding.

1. Åpne Spacing, velg Add token og kall den Card padding.
2. Behold Value type Dimension, sett Amount 16 og Unit px, og opprett tokenen.
3. Velg Choose token → Spacing / Card padding i kortstilens Padding.
4. Knytt stilen til kortelementet som i forrige eksempel. Kontroller innvendig avstand og tekstbryting. Senere kan du lagre 24px på samme token for å endre den delte avstanden.

Bruk en lysere merkefarge i Dark-modus

Gi Brand blue én verdi for en bestemt sammenheng og behold eksisterende Style-koblinger.

1. Opprett Appearance med Light som lagret standard og legg til Dark.
2. På Brand blue velger du Value context → Another context, deretter Appearance Dark og Use context.
3. Velg Add override for these conditions, fyll inn Derived Hex #A8C7FA og velg Save token.
4. Kontroller at Editing og Preview begge viser Appearance Dark og at Result viser #A8C7FA.
5. Forhåndsvis Light for å kontrollere grunnresultatet #2457A6. Den lagrede Dark-overstyringen beholdes.

Begrensninger og vanlige feil

• Kontroller Editing og Preview før du endrer en verdi for et bestemt temavalg. De kan vise ulike moduser.
• Bruk Dimension til avstand og Number til verdier uten enhet. En Number med 16 kan ikke erstatte en avstandstoken på 16px.
• Rett ugyldige verdier eller referanser før du velger dem i en Style. Ready to use kontrollerer alle oppsatte sammenhenger.
• Endring av rekkefølgen i arrayer, som gradientstopp eller skyggelag, endrer de indekserte egenskapene. Kontroller referanser til enkeltoppføringer etter omorganisering.
• Et skriftfamilienavn trenger sin erklærte opplastede fil når besøkende skal bruke den skriften.
• Publiser på nytt for å oppdatere kompilerte designverdier på en publisert Page. Bruk Models når du kopierer de bygde elementene og nødvendige Definitions til et annet arbeidsområde.

Relaterte artikler

• Definitions - organiser felles betydning og designvalg.
• Styles - bruk tokens på elementer.
• Responsive - bruk visningsbredder og flytende verdier.
• Component - bygg en gjenbrukbar grensesnittdel.
• Models - kopier bygde elementer og nødvendige Definitions.

Design System

Et Design System i Definitions lagrer felles farger, avstander, skriftinnstillinger og temavalg. Lagre hver gjenbrukbare verdi som en token, og velg den deretter i en kompatibel Style-egenskap på en Page eller Component. Bruk det når flere deler av appen eller nettstedet skal følge de samme designvalgene.

Opprett et system og den første tokenen

Et nytt system starter som Draft med tolv tokenkategorier. Tokens er navngitte designverdier. Brand blue kan for eksempel inneholde en Color, og Card padding en Dimension.

Velg systemet, kategorien, gruppen eller tokenen i treet for å åpne editoren. Discard changes gjenoppretter lagret versjon. Cancel lukker en ny ulagret oppføring.

1. Hold pekeren over Definitions og åpne Definitions actions.
2. Velg New design system.
3. Fyll inn Design system name, for eksempel Guide design, og velg Create design system.
4. Åpne Colors under Tokens og velg Add token.
5. Fyll inn Token name, for eksempel Brand blue. Value type starter på kategoriens foreslåtte type, Color.
6. Sett fargen med Colour picker eller Derived Hex, for eksempel #2457A6.
7. Velg Create token. Bruk Save token til senere endringer.

Organiser tokens

Hver startkategori foreslår en type for nye tokens. Velg kategorien som gjør det enkelt for andre å finne verdien.

Velg Add category for et nytt område eller Add group for en underordnet samling. Grupper kan inneholde tokens og flere grupper. Under Settings starter Suggested type for new tokens med det lagrede forslaget eller No suggestion. Endring påvirker nye tokens og beholder eksisterende verdier.

• Colors - Starttype: Color. Eksempel: Brand blue eller brødtekst.
• Font Families - Starttype: Font family. Eksempel: førstevalgt skrift og reserveskrifter.
• Font Weights - Starttype: Font weight. Eksempel: normal eller fet tekst.
• Typography - Starttype: Typography. Eksempel: skriftfamilie, størrelse, vekt og linjeavstand samlet.
• Spacing - Starttype: Dimension. Eksempel: en innholdsavstand på 16px.
• Sizing - Starttype: Dimension. Eksempel: høyden på en kontroll.
• Border Radius - Starttype: Dimension. Eksempel: en hjørneradius på 4px.
• Borders - Starttype: Border. Eksempel: bredde, strek og farge samlet.
• Shadows - Starttype: Shadow. Eksempel: skyggen til et kort.
• Gradients - Starttype: Gradient. Eksempel: fargestopp i en overgang.
• Opacity - Starttype: Number. Eksempel: en verdi for hvor dekkende fargen er.
• Motion - Starttype: Duration. Eksempel: varigheten til en overgang.

Velg en verditype

Bruk Value type når du oppretter en token, eller tilsvarende innstilling under Settings senere. Typen bestemmer feltene du redigerer. Dimension har en enhet. Number har ingen.

For Fluid dimension bruker du samme enhet for de to størrelsene og samme enhet for de to visningsbreddene. Maximum size må være minst Minimum size, og Maximum viewport må være større enn Minimum viewport.

Navngitte skriftvekter samler kjente navn ved samme tallverdi: Thin/Hairline 100, Extra light/Ultra light 200, Light 300, Normal/Regular/Book 400, Medium 500, Semi bold/Demi bold 600, Bold 700, Extra bold/Ultra bold 800, Black/Heavy 900, Extra black/Ultra black 950.

• Color - Startverdi: svart i sRGB, Opacity 100 %. Sett en farge som #2457A6. Bruk fargekontrollene nedenfor til avanserte verdier.
• Dimension - Startverdi: 0px. Fyll inn Amount og Unit, px eller rem. Bruk 16px til en fast innvendig kortavstand eller 1rem for å følge sidens rotskriftstørrelse.
• Fluid dimension - Startverdi: 16px ved 320px visningsbredde, økende til 32px ved 1280px. Sett Minimum size, Minimum viewport, Maximum size og Maximum viewport med Amount og Unit for hver. Bruk 18px ved 390px og 24px ved 1440px til tekst som vokser med visningsbredden.
• Font family - Startverdi: sans-serif. Skriv førstevalget og deretter Add fallback family. Flytt oppføringer opp/ned for å endre rekkefølgen, eller bruk Remove på en ekstra oppføring. Bruk en levert skrift først og sans-serif som reserveskrift.
• Font weight - Startverdi: Numeric weight 400. Weight representation velger Numeric weight eller Named weight. Skriv 1–1000 som tall, for eksempel 700 for fet skrift, eller velg en navngitt vekt.
• Duration - Startverdi: 0ms. Sett Amount og Unit, ms eller s. Bruk 200ms til en kort overgang.
• Cubic Bézier - Startverdi: Start X 0.2, Start Y 0, End X 0.2, End Y 1. Rediger de fire kurvekoordinatene for å endre bevegelsesforløpet. Start X og End X bruker 0–1. 0, 0, 1, 1 gir en lineær kurve.
• Number - Startverdi: 0. Skriv et tall uten enhet, for eksempel 0.8 for Opacity.
• Typography - Startverdi: sans-serif, størrelse 16px, vekt 400, linjehøyde 1.5 og bokstavavstand 0px. Rediger Font family, Size, Weight, Line height og Letter spacing samlet. Advanced typography → Size representation bytter mellom Fixed dimension og Fluid dimension og erstatter størrelsen med typens startverdi.
• Shadow - Startverdi: ett svart lag med null forskyvning, uskarphet og spredning, og Inset av. Sett Colour, X offset, Y offset, Blur, Spread og Inset. Legg til, fjern eller endre lagrekkefølgen. En liten positiv Y offset og Blur gir for eksempel et løftet kort.
• Border - Startverdi: svart, Width 1px og Stroke Solid. Rediger Width, Stroke og Colour. Bruk en grå heltrukket 1px-kant til et kortomriss.
• Transition - Startverdi: Duration 200ms, Delay 0ms og bevegelseskurve 0.2, 0, 0.2, 1. Endre Duration, Delay og Easing. Bruk null forsinkelse for en umiddelbar Hover-overgang.
• Gradient - Startverdi: to svarte stopp ved Position 0 og 1. Sett Colour og Position for hvert stopp fra 0 til 1. Legg til, fjern eller endre rekkefølgen. Bruk to forskjellige farger ved 0 og 1 til en enkel gradient.
• Stroke style - Startverdi: Solid. Velg Solid, Dashed, Dotted, Double, Groove, Ridge, Outset, Inset eller Custom dash pattern. Custom starter med 4px og 2px streker og Butt-linjeende. Endre streklengder og rekkefølge, og velg Round, Butt eller Square som linjeende.

Fargekontroller

Bruk Colour picker eller Derived Hex til en vanlig RGB-farge. Opacity er prosent og starter på 100. For eksempel gjør 50 fargen halvt gjennomsiktig.

Åpne Advanced colour for å velge Colour space: sRGB, Linear sRGB, Display P3, Adobe RGB (1998), ProPhoto RGB, Rec. 2020, XYZ (D65), XYZ (D50), HSL, HWB, Lab, LCH, OKLab eller OKLCH. Behold sRGB til vanlige nettfarger. Velg et annet rom når du skal bruke en verdi oppgitt i dette rommet. Endring av Colour space beholder kanaltallene og tolker dem i det nye rommet. Den konverterer ikke gjeldende farge. Rediger de navngitte kanalfeltene med tall eller none for en uspesifisert kanal. Tillatte områder avhenger av fargerommet. Fallback hex (optional) starter tomt. Legg til en sekssifret RGB-reserveverdi ved behov, eller velg Remove fallback hex for å fjerne den.

Gjenbruk en annen tokens verdi

Velg Use reference, finn en kompatibel token eller verdiegenskap, og velg den. En referanse lar denne verdien følge en annen token. En Text primary-Color kan for eksempel følge en Ink-Color. Når Ink endres, oppdateres verdiene som følger den.

Når en referanse gir en verdi, beholder Use literal… → Use current resolved value en fast kopi av resultatet. Når den ikke gir en verdi, starter Use literal… → Enter a new literal en verdi som redigeres separat. Advanced value settings → Individual value property lar deg referere til én del av en større verdi, for eksempel fargen i en kant. Kontroller Result etter at du endrer en referanse.

Forhåndsvis verdier

Result viser verdien for de valgte temamodusene. Sample viewport width starter på 768 og Preview rem basis på 16px. Endre dem for å illustrere dimensjoner eller typografi ved en annen størrelse. Temporary sample family i skriftvektprøven starter på system-ui og tilbyr serif, sans-serif og monospace. Disse forhåndsvalgene beholder den lagrede tokenverdien.

Legg til lys og mørk modus

En temadimensjon samler valg, for eksempel Appearance med Light og Dark. Hver dimensjon har én lagret standard som brukes når en Page ikke har et uttrykkelig valg.

Value context viser Base value og lagrede overstyringer som egne redigeringsmål. Preview modes endrer bare den midlertidige forhåndsvisningen og beholder redigeringsmålet. Use system defaults fjerner uttrykkelige forhåndsvisningsvalg. Change conditions endrer modusene for en overstyring. Fjern en overstyring når denne sammenhengen skal arve grunnverdien igjen. Start from result instead under Other starting value kopierer gjeldende resultat som en fast verdi fremfor å fortsette å følge referansene.

Mer spesifikke overstyringer som treffer, vinner. En overstyring for Appearance og Brand vinner over en for bare Appearance. Settings → Resolution priority avgjør like spesifikke overlapp. Første dimensjon starter på 0. Hver ny dimensjon får neste høyere tall, og høyere tall vinner. Hold prioritetene ulike.

1. Åpne systemet og velg Add theme dimension.
2. Sett Theme dimension name til Appearance og velg Create theme dimension. Den starter med én modus kalt Default.
3. Åpne Default, endre Theme mode name til Light og velg Save theme mode.
4. Åpne Appearance, velg Add mode, kall modusen Dark og velg Create theme mode. Default mode forblir Light med mindre du endrer og lagrer dimensjonen.
5. Åpne en token og velg Value context → Another context. Sett Appearance til Dark og velg Use context.
6. For en arvet verdi velger du Add override for these conditions, redigerer verdien og velger Save token.

Navn, innstillinger og lagring

Lagre endringer på valgt objekt. Save design system, Save token, Save theme dimension og Save theme mode gjelder hver sin editor. En avvist lagring beholder utkastet og forklarer problemet. Reload saved definition laster inn en annen editors lagrede versjon ved konflikt.

Used by viser hvor en verdi brukes. Åpne objektets handlingsmeny for Duplicate eller Delete. Duplikatet er en egen kopi. Referanser inne i en kopiert samling følger de kopierte tokenene, mens referanser til andre samlinger beholder eksisterende kilder. Delete forhåndsviser berørte elementer. For å erstatte en utfaset token lagrer du først en erstatning av samme type og leser gjennom foreslåtte endringer før du bekrefter sletting.

• Name - Starttilstand: navnet du skrev. Gi systemet eller tokenen et lesbart navn. Navneendring på en token beholder eksisterende Style-koblinger.
• Key, under Settings - Starttilstand: generert fra navnet for en ny oppføring. En unik kort identifikator blant sidestilte elementer, for eksempel card-padding. Bruk bokstaver, tall, bindestreker eller understreker, og start med bokstav eller tall.
• Description - Starttilstand: tomt. Forklar designvalget, for eksempel en avstand mellom innhold i kort.
• System Status - Starttilstand: Draft. Behold uferdig arbeid i Draft. Ready to use kontrollerer tokenene på tvers av oppsatte temavalg. Deprecated markerer et system som fases ut.
• Token Value type - Starttilstand: forslaget fra kategorien eller gruppen. Velg verdiens faktiske type. Typebytte på en eksisterende token beholder den gamle verdien til du retter eventuelle avvik.
• Tier - Starttilstand: Not specified. Primitive for en grunnverdi, Semantic for betydning som Text primary, eller Component for en bestemt del som Button background.
• Use, Avoid - Starttilstand: tomt. Beskriv hvor en token bør og ikke bør brukes.
• Deprecated - Starttilstand: av. Marker en gammel token. Legg til Deprecation reason og en Replacement token av samme type når du faser den ut.
• Metadata - Starttilstand: tomt. Legg til eier, kilde eller merkelapper med New metadata key, Type og Add metadata. String starter tomt, Number på 0, Boolean på false, Object som {} og Array som []. Rediger Object- og Array-verdier som gyldig JSON. Remove sletter oppføringen.

Legg til skriftfiler

En font-family-token navngir skriften og reservene. Last opp og erklær skriftfilen når nettstedet skal levere denne skriften.

Format starter på WOFF2 og tilbyr også WOFF, TrueType og OpenType. Velg formatet til filen du lastet opp. Weight or range starter på 100 900. Bruk filens faktiske vekt eller støttede variable område, for eksempel 400 eller 100 900. Style starter på Normal, med Italic og Oblique tilgjengelig. Loading behavior starter på Swap, som viser en reserveskrift mens filen lastes og deretter bytter til den nedlastede skriften. Automatic lar nettleseren velge. Block skjuler teksten kort mens den venter og tillater deretter bytte. Fallback tillater bare bytte i et kort tidsrom etterpå. Optional beholder reserveskriften når teksten først er tegnet.

Bruk Edit declaration eller Remove declaration til å endre listen, og lagre deretter systemet. Cancel declaration forkaster utkastet. En allerede opplastet fil blir i arbeidsområdets opplastinger.

1. Åpne Font files i systemet og velg Add font file.
2. Velg Font family token, velg skriftfilen og deretter Upload workspace font.
3. Kontroller Format, Weight or range, Style og Loading behavior.
4. Velg Apply declaration og deretter Save design system.

Definer en gjenbrukbar Component

Velg Add Component under systemets Components for å beskrive formålet og designkravene til en gjenbrukbar grensesnittdel. Definisjonen hjelper deg å kontrollere en Organizer-Component mot kravene.

Purpose, Use og Avoid starter tomme. Requirements, Capabilities, Accessibility og Token roles starter også tomme. Beskriv forventet oppførsel i Requirements og forventninger for tastaturbrukere eller hjelpemidler i Accessibility. Capabilities lister Style-egenskapene komponenten skal støtte. Parts starter med Root, Variants med Default og States med Default. Legg til delene og valgene du trenger, for eksempel en etikettdel, en kompakt variant eller Hover. Tilstandsvalgene er Default, Hover, Focus visible, Active, Disabled, Invalid og Selected.

Velg Add token role og deretter Part og Role for å beskrive hvilken Style-verdi en del trenger, for eksempel Root background. I innstillingene til den gjenbrukbare Organizer-Component-en velger du dens eget Design System og bruker Implements til å velge denne definisjonen. Du kan også bruke Link implementation fra definisjonen, velge en Organizer Component og Link. Kontroller implementasjonssjekkene og Preview, inkludert Variant og State. Unlink fjerner koblingen. Kontroller faktisk oppførsel og tilgjengelighet separat fra disse struktursjekkene.

Bruk tokens på en Page eller Component

En Style-egenskap bruker tokenen du velger, for eksempel Card padding for Padding. Site velger systemet som brukes av sidene. En gjenbrukbar Component velger sitt eget system.

1. I en Site velger du General → Design System og systemet ditt.
2. For en gjenbrukbar Component velger du Design System i dens egne innstillinger.
3. Åpne relevant Style-egenskap, velg Choose token og en kompatibel token etter kategori og navn.
4. Velg elementet som skal bruke stilen. Velg pluss ved Properties, åpne palettkategorien og velg stilen etter navn. Se Styles for oppretting og tilknytning av stiler.
5. Bruk Theme context på en Page eller Component til å velge moduser. Use default modes fjerner uttrykkelige modusvalg.
6. Kontroller Preview. Publiser på nytt når publiserte Pages skal få de nye designverdiene.

Eksempler

Eksempelsystemet bruker Brand blue #2457A6, Card padding 16px og Light/Dark-moduser under Appearance. Behold samme tokenvalg i Styles mens du endrer de lagrede verdiene.

Gi et kort merkefargen

Bruk én lagret Color fremfor å skrive samme hexverdi på hver Style.

1. Opprett Colors → Brand blue med Derived Hex #2457A6 og lagre.
2. Velg Guide design i Component-innstillingene.
3. Velg Choose token → Colors / Brand blue i stilens Background Color.
4. Velg kortelementet i Components. Velg pluss ved Properties, åpne palettkategorien og velg stilen etter navn.
5. Hvis elementet allerede har sin egen Background Color, fjerner du egenskapen gjennom Background Color settings → Delete, slik at den delte stilen kan gi fargen.
6. Forhåndsvis Component i standardmodus. Gjenbruk tokenen i andre kompatible Style-egenskaper som skal følge samme merkefarge.

Del innvendig kortavstand

Behold en enhet med avstandsverdien, slik at den kan brukes av Padding.

1. Åpne Spacing, velg Add token og kall den Card padding.
2. Behold Value type Dimension, sett Amount 16 og Unit px, og opprett tokenen.
3. Velg Choose token → Spacing / Card padding i kortstilens Padding.
4. Knytt stilen til kortelementet som i forrige eksempel. Kontroller innvendig avstand og tekstbryting. Senere kan du lagre 24px på samme token for å endre den delte avstanden.

Bruk en lysere merkefarge i Dark-modus

Gi Brand blue én verdi for en bestemt sammenheng og behold eksisterende Style-koblinger.

1. Opprett Appearance med Light som lagret standard og legg til Dark.
2. På Brand blue velger du Value context → Another context, deretter Appearance Dark og Use context.
3. Velg Add override for these conditions, fyll inn Derived Hex #A8C7FA og velg Save token.
4. Kontroller at Editing og Preview begge viser Appearance Dark og at Result viser #A8C7FA.
5. Forhåndsvis Light for å kontrollere grunnresultatet #2457A6. Den lagrede Dark-overstyringen beholdes.

Begrensninger og vanlige feil

• Kontroller Editing og Preview før du endrer en verdi for et bestemt temavalg. De kan vise ulike moduser.
• Bruk Dimension til avstand og Number til verdier uten enhet. En Number med 16 kan ikke erstatte en avstandstoken på 16px.
• Rett ugyldige verdier eller referanser før du velger dem i en Style. Ready to use kontrollerer alle oppsatte sammenhenger.
• Endring av rekkefølgen i arrayer, som gradientstopp eller skyggelag, endrer de indekserte egenskapene. Kontroller referanser til enkeltoppføringer etter omorganisering.
• Et skriftfamilienavn trenger sin erklærte opplastede fil når besøkende skal bruke den skriften.
• Publiser på nytt for å oppdatere kompilerte designverdier på en publisert Page. Bruk Models når du kopierer de bygde elementene og nødvendige Definitions til et annet arbeidsområde.

Relaterte artikler

• Definitions - organiser felles betydning og designvalg.
• Styles - bruk tokens på elementer.
• Responsive - bruk visningsbredder og flytende verdier.
• Component - bygg en gjenbrukbar grensesnittdel.
• Models - kopier bygde elementer og nødvendige Definitions.