Sketch: Jak přepsat barvu symbolu
Používání symbolů je ve Sketchi standardem. Je to jeden ze způsobů jak si ušetřit práci a jak docílit konzistentního designu. Díky symbolům a jejich vnořování lze komplexní UI pojmout atomicky a generovat tak snadno použitelné systémy/UI kity.
Pokud symbol nabývá několika stavů a jeho vzhled se tak na různých místech liší, lze to vyřešit pomocí vnořování. Pokud se má ale měnit pouze jeho barva, bývá to problém. Nejednou jsem viděl to, že symbol byl vytvořen pro každou barevnou variantu zvlášť.

Cílem tedy je, mít symbol jen jeden a u něj měnit jeho barvu (tint) případně i jeho akcent (accent). A to všechno pomocí přepisování (Overrides).

Jak na to?
Klíčem k řešení je použití masky. Grafika/tvar symbolu se tak jen stává maskou pro barvu. Díky tomu lze symbolu dát nejen barvu, ale i gradient a obecně jakoukoli výplň (fill).
Postup lze obecně uplatnit pro barvu, barvu s akcentem, ale i pro mnohem složitější struktury. V testovacím sketch souboru jsou varianty s barvou i s akcentem.
- K symbolu, který má být přebarvován se vytvoří stejně velké symboly, které symbolizují barvy (tinty). Jsou to tedy jen artboardy s pozadím. Stejná velikost je nezbytná, aby Sketch rozeznal, že jde o symbol, který může být zanořen.
- V symbolu změníme aktuální grafiku na masku.
- Nad vrstvu grafiky v symbolu vložíme symbol s barvou (tint).
- Díky tomu dojde k obarvení symbolu a tint se stává vnořeným symbolem, který lze přepisovat v kontextové nabídce symbolu.

Výsledek
Symboly jsou nyní definovány pouze jednou a jejich barvy (obecně výplně) jsou definovány samostatně. Díky tomu lze barvu a akcent jednoduše měnit jak u jednotlivých symbolů, tak hromadně.

Sketch soubor
Pohrajte si a prozkoumejte výše popsanou techniku přímo ve Sketchi. Stáhnout.

