How to convert Figma to styled-components1 min read

These days, there are fewer React developers that write plain CSS. Instead, developers are using various frameworks such as styled-components or CSS Modules.

What is styled-components you say?

Styled-components, is a CSS-in-JS library, meaning the component’s styling code is included within the JSX section of the code rather than in the CSS section.

Example of styled-components

Developers can now choose to get React code where components are styled in the JSX code rather than plain CSS.

This means that Anima now welcomes all the developers out there that use styled-components in their code-base, or want to start a new code-base that uses the styled-components library.

Style-components monthly download stats: source

More than 11 million downloads per month make styled-components the most popular CSS-in-JS library for styling React components.

How to get React styled-components with Anima

1. Sync your design to Anima

Get started by syncing your design to Anima:

• Get the Anima plugin for your design tool
• Click Preview in Browser → Sync

Learn more about how to sync your design here.

Sync your design to Anima

2. Open Code mode

To get to code mode:

• Go to the Anima platform> projects
• Select code mode by clicking the ‘<>’ icon.

Open code mode in Anima

3. Select React and styled-components

To get React styled-components:

• Select the component you want to get React code for
• In the code panel, you can see the component-based and styleguide React code

Get React & styled-components

That’s it folks, it’s as easy as that!

Ready to get started?

• Download Anima plugin for Sketch, Adobe XD or Figma
• Visit our guides & tutorials page

As always, we’re excited to hear your feedback!

Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram. Or, vote for new features at UserVoice.

Stay creative!
 Anima team