Designsystemet - Code syntax & scoping

This is a plugin that can generate CSS syntax from the Designsystemet. It goes through all the variables available to designers in Figma and generates CSS syntax that matches the syntax produced by the design system.

The plugin also checks whether each variable has the expected Figma scope assigned and reports any deviations from the Designsystem specification.

In the long term, we want this functionality to be built into the official Designsystem plugin. Until then, we are offering this plugin as a workaround.

Note: This plugin only works with the Designsystem’s variable setup.

The plugin is based on the designsystemet syntax specification defined in GitHub issue #3544 og scope er definert #4473Github