How to convert Figma to styled-components - Anima Blog

How to convert Figma to styled-components1 min read

Reading Time: 2 minutes Anima now supports React most popular framework for using CSS-in-JS

How to convert Figma to styled-components

How to convert Figma to styled-components1 min read

Reading Time: 2 minutes

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

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: Anima

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 BrowserSync

Learn more about how to sync your design here.

Sync your design to Anima

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

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: Anima

Get React & styled-components

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

Ready to get started?

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

Join the discussion or show off your designs on FacebookTwitterSlackInstagram. Or, vote for new features at UserVoice.

Stay creative!
❤️ Anima team


Co-founder & CTO

A software engineer who believes that whatever can be automated should be automated. Loves sharing facts, ideas, and opinions about code. Lives in Tel Aviv with his wife and two children—one human and one canine.

Leave a comment

Your email address will not be published. Required fields are marked *