We highly recommend using our Spark CSS Generator, the plugin will translate the Figma styles into existing CSS variables in our package; to use it, follow these steps:
1.In your file, select the element you want to inspect
2.Enable Dev Mode
3.Go to the Inspect panel on the right, a look for the Code section
The code section of Dev mode
4.You’ll notice a dropdown on the top right on the section with CSS selected, let’s change that to Spark CSS Generator
Selecting Spark CSS Generator
If the CSS Generator is not displayed as an option, select Browser codegen plugins, this will open a search panel, below the search bar you’ll find a dropdown with Recents and Saved select, let’s change that to Genesys Cloud, this should show the plugin, click on it.
Searching for the plugin on Genesys Cloud
Selecting the plugin
5.After that you should be able to see CSS with our variables, you can just copy and paste them in your Editor and voila!
The plugin CSS output