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?
As always, we’re excited to hear your feedback!