As a developer, I have mainly focused on getting making sure forms work, setting up a proper database and overall function of an application. However, a large portion of a web app is design; for a user to really use an application, there needs to be a proper aesthetic and presentation of data. Most of my aesthetics and front end are done in React and styled with CSS. This styling was never my primary focus and so, I turned to things like material UI and bootstrap. These are amazing tools, but somewhat lack ease of customization. Thus, I have landed upon Figma.
Figma is amazing; at first, I thought it was simply a mock up app. However, with the plugin, Anima can take that mock up and turn it into React code. It is not perfect just yet, but it almost handles all styling. Here are the steps to use Figma and Anima to create React code.
- Head to the Figma website, start up a free account and download the desktop app
- Install the Anima plugin
- Create your mock up on Figma
- Right click your project and select plugins –> Anima
- Hold control and select the frames you would like to upload to Anima and hit export on the bottom left
- Head over to the Anima website and login
- Find your project and click the code mode button -In order to get React code, you will need to pay for the third tier plan
- From here, you can select elements and copy and paste into your preffered software.
- That’s it!
Now you have neat React components and corresponding CSS.