I'm currently in the process of building a dedicated Documentation page. Visit it by going to http://docs.tokens.studio/ — it's still very early, but will hopefully provide some useful information.
When you first open the plugin we give you a set of pre-defined tokens that can be used as-is to show you what is possible. You can delete these tokens by going to the JSON tab and hitting the Clear button to remove all tokens.
Create new tokens by hitting the + button in the token group that you wish to add a token.
if you want to nest your tokens you can do that. Go to the Edit Tokens dialog o the property you want to create a group for and then hit the Add a new group button.
There are two ways how you can apply tokens to your selection:
When you left-click a token this token is being put on your selection (multiple layers selected are possible!). For certain tokens we assume defaults, such as for Colors we assume you want to apply Fill.
You can right-click tokens to specify what property should be set, such as in Spacing the Horizontal Spacing, Vertical Spacing or Gap properties individually
I will provide more information and some Getting Started videos on my personal website: jansix.at/resources/figma-tokens
- Run
yarnto install dependencies. - Run
yarn build:watchto start webpack in watch mode. - Open
Figma->Plugins->Development->New Plugin...and choosemanifest.jsonfile from this repo. - Create a Pull Request for your branch