React Application Without Front-End Devs

“I am really a backend engineer but I do know javaScript and I have little experience fixing bugs in Vue.js, so React shouldn’t be that complicated for this time-critical project” were my literal thoughts going through my head while my team was deciding if MERN should be our tech stack for the project. We finalized MERN to be our tech stack as the project itself was time-sensitive and we needed something that was cost-effective which could also build aesthetically pleasing MVPs in a matter of days.

There were only two developers assigned to this Fintech project, myself and my colleague who also happened to be a backend engineer. Luckily, she took the task of building the schema while I volunteered myself in building the landing page. While going through the wireframe created by our UX/UI Designer using Figma (Interface design tool). I thought it would be as simple as developing using plain HTML, CSS and javaScript pages (LOL to that thought). I was one of those backend developers who usually said “I don’t like javaScript” and ignored all the modern front-end technologies which caught up to me because here I was struggling even to get started and it was due in a day. I started looking for alternatives as there was no way I was going to finish the landing page in a day while learning React at the same time.

Luckily after a bit of research I found out, the tool that our designers were using to create wireframes also had a special plugin that could take that wireframe and turn it into an actual HTML page or React Component. The Figma plugin I used was called Anima App. Here I will show you steps on how you can convert your figma wireframe into React code using Anima Plugin:

1- While on wireframe in figma. Click the 3 horizontal lines button on the left side of the page. Here you will scroll to plugin, search for Anima and add the Anima plugin to figma.

2- Secondly you will need to signup for Anima. Follow this link.

https://projects.animaapp.com/login

3- Back to Figma >>> Plugins>>>’Choose Anima Plugin’>>>’Sign-in If First time’

4- Once Anima Plugin’s ready Click the Preview in Browser.

5- Once it finishes processing it will open the wireframe in animaapp. Select <> code and select React from dropdown select. This should give you all of your react code along with css for the Wireframe.

6- Use your programming skills to precisely copy and paste code that doesn’t cause error. WALLAH You are done now you can start actual programming of logic. Happy Coding!!!