I tried to pass the font object to it and it kicked back with some errors.
The official documentation lists the method createTextStyle(), but doesn't tell you what to do with it.
#Text styles in figma how to#
It took me a minute to figure out how to create Figma styles. You can see a breakdown of the recursive walkObject function down below. The theme structure has a colors property that is a hash map of each color token ( colors. Here's an example of the theme structure we'll be working with: I'm also using the variant API from Styled System to create grouped text styles. The theme specification is System UI, which is used by libraries such as Styled System or xStyled, and component libraries such as Chakra UI or Theme UI. I styled the app using figma-plugin-ds, a library by Thomas Lowry that replicates the look and feel of Figma UI (and provides some helpful utility classes). I used the UI starter project from Figma's plugin tutorial, generated from the "New Plugin" menu. The JSON should follow a certain theme specification (see below), making the import/parsing process easier. I generate or parse a JS object by stringifying or parsing an object to JSON. The API is provided to plugins by Figma through a figma variable, where you can run methods like getLocalTextStyles to get all the document's text styles. The plugin uses the Figma API to read, create, and edit styles. Much better than the manual way right? ?? How does it work? Then edit one of the colors, and convert the styles back to JSON. I'll go over the process and what I discovered creating this plugin.Ĭheck out the source code here, or keep reading to learn more! Using the pluginīefore we dive deep into the why or how behind the plugin, let's see how to use it.
#Text styles in figma generator#
I created a Figma plugin called Styled Theme Generator that converts Figma color and text styles into a CSS in JS theme, or vice versa, importing a theme and generating Figma styles. Since Figma opened up it's API to plugin developers, I thought this would be a good opportunity to learn the Figma API and create a tool to expedite the conversion of design tokens between Figma and CSS in JS libraries. Then if I update the design tokens in the theme code, I have to synchronize any changes with the Figma document - all manually. I'll put together an entire design system inside Figma, then have to spend hours copying the design tokens over into a structured theme object. As I've been creating new design systems with CSS in JS libraries like Styled Components or Emotion, I've found myself repeatedly having to translate design tokens from Figma into a JSON-based theme for code.