Christmas Improvements

Figma Tokens support vol.2, synchronized documentation and many annoyances gone. What more to wish for?

This version was released on December 21, 2022

Continuing with our push to make platform as stable and polished as possible, we are releasing another batch of changes that are focused on priority issues reported by you. In addition, we doubled down on the CLI, so let's start with that!

CLI improvements

We have been gathering your feedback (thank you!) since the first version of CLI was released and today we are bringing a new version focused on supporting as many features of Figma Tokens (now Tokens Studio) and possible!

To get all the new features, make sure you have CLI version 0.9.7 and above. If you have installed CLI globally, follow our guide to get the latest version.

Here are the major ones, alongside many bugfixes:

Support for math operations

We have added support for math operations. You can now use your dynamic declarations of tokens, for example to compute tokens from reference and scale:


                                                        
                                                        
                                                            {
                                                            "red-10": {
                                                               "value": "{base} * 1.5",
                                                               "type": "color"
                                                            }
                                                        }
                                                        
                                                            

Supported math operations are +, -, /, *, %, brackets (, ) for prioritization and all basic math functions, such as round() or floor().

Combined token declarations

It is now possible to sync tokens with combined declaration, where part of the token is declaration while part of the token is reference, or math. This is very useful for color tokens, for example:


                                                        
                                                        
                                                            {
                                                            "red-10": {
                                                               "value": "rgba({colors.red}, 10%)",
                                                               "type": "color"
                                                            }
                                                        }
                                                        
                                                            

Multiple references

Is is now possible to sync tokens with multiple references in single declaration, for example:


                                                        
                                                        
                                                            {
                                                           "h2": {
                                                              "value": "{base.font} * {scales.heading} * 1.25",
                                                              "type": "color"
                                                           }
                                                        }
                                                        
                                                            

Nested files

The token loading was greatly improved and it is now possible to synchronize entire folders, including nested sub-folders. To include files from the nested subfolders, simply declare full path instead of just name of the file inside the mapping file you are providing to the CLI:


                                                        
                                                        
                                                            {
                                                            "mode": "multi-file",
                                                            "mapping": [{
                                                                "tokenSets": [
                                                                    "globals/core",
                                                                    "globals/semantic",
                                                                    "themes/light"
                                                                ],
                                                                "supernovaBrand": "Default",
                                                                "supernovaTheme": null
                                                            }],
                                                            "settings": {
                                                                "dryRun": false,
                                                                "verbose": true
                                                            }
                                                        }
                                                        
                                                            

Introducing: No more documentation edit collisions!

In order to prevent collisions when editing documentation, we are introducing system that will automatically synchronize the documentation if someone has already edited it before you - but you don't have the latest version.

If some other user from your workspace tries to edit the page which you are currently editing, the editor will automatically load them the latest version and inform them that this page is currently edited. This prevents many obscure scenarios, like someone overriding your work or worse yet, you yourself overriding your work if you have two editors opened (we use many tabs too, you are not alone!

Improvements

  • Resources tab is now fully available for all plans, not just the paid ones!
  • Holding Cmd or Ctrl and clicking on the different tab opens the page in the new browser tab now.
  • Improved the handling of .md links in Markdown blocks.
  • Documentation editor now supports .heic format of images.
  • We have added Learn more buttons with relevant help links into all empty states you can encounter in Supernova.
  • Default font for font and typography tokens was changed to Inter from Arial.
  • We updated the + New buttons in order to make them consistent all across Supernova.
  • You can now search tokens through their values.
  • We removed the drop indicators from disabled targets.
  • Frames and assets are scaled properly in the editor now.
  • We have raised the limit for the maximum page size five times!
  • Documentaiton page now autosaves only if it was modified.

Bugfixes

  • It is now possible to set Google fonts as fonts for typography tokens.
  • Imported typography tokens no longer display Google fonts as missing.
  • Installed and Builds pages no longer display Supernova was unable to load builds error message in specific cases.
  • We fixed the focus for specific blocks, which makes pasting into them work properly again.
  • Horizontal scroll with Shift + scroll now works properly on Windows as well!
  • Resolved the specific issue that caused exports to gets stuck in the infinite In progress state.
  • Query parameters in URL no longer cause the redirect loop.
  • Welcome email contains the proper image again.
  • Selecting blocks from bottom to top and pressing Tab indents highlighted blocks correctly.
  • Builds no longer fail when creating empty GitHub pull request.
  • Confirming the new color value in the edit dialog works properly now.
  • Fixed the rare issue resulting in the infinite login loop upon visiting private docs.

 

That's it for this release, but we'll be back with more soon. As always, if you'd like to see something new, fixed, or improved, join our Discord community — we're always there. You can also request a feature on our Feature Request Portal. Thank you for your support!