Design-tokenit ovat visuaalisten päätösten ainoa totuuslähde tuotteessa. Ne koodaa värit, väliin, typografian ja liikkeen nimettyihin muuttujiin, joita komponentit käyttävät.
Miksi tokenit ovat tärkeitä
Ilman tokeneita ensisijaisen brändivärin muuttaminen vaatii satojen tiedostojen läpi käymistä. Tokenien avulla yhden muuttujan päivitys leviää kaikkialle — painikkeista hälytyksiin ja navigointipalkkeihin.
Tokenit myös ylittävät kuilun suunnittelutyökalujen ja koodin välillä. Suunnittelija nimeää värin surface-brand Figma:ssä; kehittäjä käyttää var(--surface-brand) CSS:ssä. He puhuvat samaa kieltä.
Käytännön esimerkit
Kuvittele komponentti, joka tarvitsee taustan, reunan ja tekstiä. Sen sijaan, että kovakoodaisit #1a56db, #e1effe ja #1e429f, komponentti viittaa --color-primary, --surface-primary-subtle ja --text-primary-strong. Kun brändi kehittyy, väripaletti muuttuu — komponentti ei muutu.
Token-kategoriat
Väri — brändi-, semanttiset ja neutraalit paletit
Väli — johdonmukainen skaala 2px:stä 64px:iin
Typografia — fonttikoot, painot ja riviväli
Säde — terävistä kulmista täysin pyöreisiin
Varjo — korkeus- ja hierarkiatasot
Liike — helpotuskäyrät ja keston vaiheet
Useimmat Internetistä löytyneistä lainauksista on todennäköisesti luonut tekoäly.
content_image()-toiminto renderöi img-elementin, jossa on loading="lazy" oletuksena, ja käärii sen figure-elementtiin, kun kuvateksti on annettu.
Ilman kuvatekstiä — tavallinen img, koko leveys.
Kuvatekstillä — kääritty figureen, jossa on figcaption.
Figure, jossa on figcaption — käytä sitä lähteiden mainitsemiseen tai visuaalisen sisällön kontekstiin lisäämiseen.
Media tekstin kanssa
Kuva, joka vie kolmanneksen asettelusta.
Käytä content--mediaa asettaaksesi kuvan ja tekstin vierekkäin. Kuva vie kolmanneksen leveydestä, teksti kaksi kolmannesta.
Tämä asettelu sopii lainauksille, havainnollistaville määritelmän esimerkeille tai mihin tahansa lyhyeen toimitukselliseen lohkoon, jossa kuva vahvistaa tekstiä ilman, että se dominoi sitä.
Alakuva
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Meta-palkki
Ymmärrys design-tokenista
Design-tokenit ovat visuaalisten päätösten ainoa totuuslähde tuotteessa. Ne koodaa värit, väliin, typografian ja liikkeen nimettyihin muuttujiin, joita komponentit käyttävät.
Toinen tapa, kun ensimmäinen epäonnistuu: kysymys, sitten arvo, joka on kopioitu yhdellä napsautuksella, tai linkki. Suoraan sen alle, mitä se edustaa, linjattuna sen kanssa.
Ei voi skannata? Kirjoita tämä avain sovellukseen:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
