Pro designéry

Co je zdroj pravdy, jak se co jmenuje na obou stranách, které soubory si vzít do návrhového nástroje a co odznak slibuje obrazovce.

Zdroj pravdy

Systém má tři zdroje pravdy a každý odpovídá na jinou otázku. Když si dva odporují, rozhoduje ten, jehož otázka se ptá.

Zdroje pravdy
Otázka	Rozhoduje	Proč
Jak to vypadá	Design handoff	Rozhoduje tvar, hustota a chování. Když se implementace a handoff rozejdou, vyhrává handoff — pokud u odchylky nestojí napsaný důvod.
Jakou má co hodnotu	Soubor tokenů	Barvy, mezery, rádiusy, stíny, pohyb i typografická škála. Ze stejného souboru se generuje stylopis i utility — jiná hodnota než ta odsud v produktu neexistuje.
Co komponenta umí	Stránka komponenty	Varianty, velikosti, stavy a to, co primitivum schválně neumí. Stránka renderuje skutečnou komponentu, takže nemůže slíbit něco, co kit nedělá.

Pojmenování

V návrhu prvek stojí pod selektorem, v kódu pod jménem exportu. Vlastnost je jméno vlastnosti komponenty, hodnota je jedna z jejího výčtu. Mezi návrhem a kódem se tak nic nepřekládá — a právě proto, že se nepřekládá, se to nemůže rozejít.

Token se v návrhu jmenuje jako ve stylopisu — surface-2, ne „Background / Secondary“. Sdílený slovník mezi designérem a vývojářem je celý smysl systému.
Akcent je jedna rodina čtyř tokenů, ne čtyři barvy. Rodiny je pět a každá má vlastní světlé i tmavé hodnoty — deset kombinací, mezi kterými se v návrhu přepíná stejně jako v aplikaci.
Ikona nese jméno z kitu — arrow-right, ne „šipka doprava“. Klíč operace se navíc nepřekládá vůbec: drží ho server.

Ke stažení

Čtyři soubory, všechny psané buildem ze stejných zdrojů, ze kterých se staví produkt. Žádný z nich se nepíše rukou, takže žádný z nich nemůže popisovat kit, který neexistuje.

Ke stažení
Soubor	Co je uvnitř
Tokeny	Celá paleta, škály, typografie i pohyb ve standardním formátu návrhových tokenů — tentýž soubor, ze kterého se generuje stylopis.
Ikony (92 SVG)	Obě sady jako soubory, vykreslené tou samou komponentou, kterou kreslí aplikace.
Komponenty	Seznam primitiv se selektorem, stavem, verzí, tokeny a výčty vlastností. Odpovídá na to, co primitivum umí, aniž by se otevřel kód.

Stav a verze

Odznak vedle názvu komponenty říká vývojáři, jestli se na API smí spolehnout. Pro návrh znamená něco trochu jiného — jestli se na tu komponentu smí spolehnout obrazovka.

Stabilní — tvar se nemění bez ohlášení. Z komponenty se smí stavět obrazovka.
Beta — tvar se ještě hledá. Kreslit se z ní smí, ale počítej s tím, že se změní; obrazovka, která na ní stojí, se bude překreslovat.
Zastaralé — má nástupce a v ohlášené verzi zmizí. Nové obrazovky ji už nesmí použít, staré se převedou dřív, než ta verze přijde.

Vedle odznaku stojí verze primitiva. Soubor s komponentami nese verzi celého kitu, takže jde poznat, proti které verzi byl návrh kreslený.

Když se to rozejde

Návrh chce hodnotu, kterou paleta nemá. To není chyba návrhu ani kódu — systému chybí rozhodnutí. Řeší se v systému: buď se najde token, který už existuje, nebo se pojmenuje nový.
Návrh chce prvek, který kit nemá. Nové primitivum vzniká, až si o něj řekne konkrétní obrazovka — a pak jako jedna změna: komponenta, její stránka a první obrazovka, která ji doopravdy použije.
Komponenta v produktu vypadá jinak než v handoffu. Vyhrává handoff, pokud u odchylky nestojí napsaný důvod. Když stojí, patří ten důvod probrat, ne obejít.
Vlastní barva, mezera nebo rádius napsané rovnou do obrazovky znamenají jedno ze dvou: buď existuje token, který se nenašel, nebo systému chybí rozhodnutí. Obojí se řeší v systému, ne v obrazovce.