Export variables z Figmy do design tokenů v JSONu

Potřeboval jsem vyexportovat variables z Figmy u našeho design systému.

K velkému překvapení jsem zjistil, že Figma k tomu nemá žádnou exportní funkci.

Překvapivé je to minimálně proto, že Figma figuruje mezi jmény zmíněnými na webu oficiální pracovní skupiny od W3C pro design tokeny. Když jsem je tam viděl předtím, než jsem se o to začal zajímat, tak jsem se automaticky domníval, že to znamená, že ten export podporují (ten JSON formát je hlavně o interoperabilitě).

Takže back to square one.

Po chvilce googlení jsem zjistil, že jestli to nechcete dělat manuálně po jednom jako otrok přes nativní panely nástrojů (nebo třeba dev mode), nejlepší bude využít některý z pluginů.

A pluginů existuje fakt hodně!

Potřeboval jsem jen JSON s design tokeny, nic víc. Proto mi pluginy jako Tokens Studio nebo Design Tokens přišly až moc robustní.

Nic jednoduchého jsem zkrátka nenašel. Buď ten plugin neexistuje, nebo jejich autoři to neumí marketovat, nebo jsem až moc netrpělivý v hledání.

Jelikož ke skillům dnešního moderního muže patří používání AI, nažhavil jsem Clauda a vystřelil prompt:

hey man! i need a dead simple export plugin for design tokens (variables) from Figma to JSON format as defined by W3C design tokens working group. develop it for me.

...a dřív než se mi uvařilo kafe, jsem měl v ruce plugin. A ten fungoval na první dobrou.

Mindblowing!

Nebyl bych to ale já, abych s tím nestrávil další čas a ladil detaily. Takové ty drobnosti, které nikdo neuvidí ale přece to tak nemůžete nechat.

Výsledkem bylo asi 20 dalších iterací, až to vypadalo tak, jak jsem chtěl.

Teď mám svůj plugin, kde si nastavíte výstup:

• podle paperu k design tokens podle W3C
• 1:1 podle vaší organizace ve Figmě

Pro každou možnost kromě JSONu nabízím i vizuální HTML, kde se dá rychle vše zkontrolovat. (Každej není takovej nerd, aby se mu líbil JSON, ne?)

Plugin si můžete zdarma stáhnout na Figma Community.

Edit: Zpětně jsem objevil ještě Figma Variables to JSON plugin, který je relativně jednoduchý a pokud někdo potřebuje mít možnost před exportem ovlivnit, co se mu objeví v datech, doporučuju. Ti, kdo chtějí one click solution, ať stáhnou to moje 😎