How I convert Figma designs to React Native with BuilderX
BuilderX is a browser-based no-code tool.
Like most no-code tools, BuilderX lets you design with clicks, and you don’t need to give much thought to the HTML and CSS it generates under the hood. You make dope designs, and it render them as websites. Simple. The way it should be.
Unlike Webflow, Bubble, or Wix, BuilderX doesn’t lock you up in its platform. It turns your designs into normal React components. You can use this code in any React or React Native project. It’s not the cleanest code, but it’s not awful either.
All that being said, I don’t design in BuilderX
As a design tool, BuilderX is slow, has too many buttons, and it tends to freeze if you ask it to do too much at once.
That’s why I found a workflow that lets me convert my Figma designs to React Components with very little effort.
It’s would also works with Adobe XD, Photoshop and even Canva if those are your tools of choice.
I’ll show you how I do it.
Here’s The Complete Four Tool Workflow
Figma —Magicul —Sketch — BuilderX —React
Explanation:
Magicul is a 3rd party tool that can convert .fig files to Sketch, and BuilderX can import Sketch files directly.
5-ish Steps to Converting Figma into React
1 — Design Something in Figma
I’m using a UI Kit freebie I got from here. All credit goes to the creator.
2 — Convert Design files from Figma to Sketch using Magicul
There are a few services out there that convert your Figma designs to Sketch. XD2Sketch has proven to produce the best results for me. It’s a paid service.
You can also export SVGs from Figma and copy them in Sketch. I’d do this for a small file, but for large design files the issues stack up.
With SVG exports you lose all images, type attributes, effects, transparencies, overlays, text and color styles, prototype links, component/symbols, and text won’t wrap nicely.
3 — Open the Sketch file in BuilderX
Click File -> Import Sketch File and wait for around 5–10 minutes for it to load.
4 — Try to Make Sense of the Messy Code
Let’s take this code and put it in a React Native CodeSandbox to see if it works.
Here’s some boilerplate that will let you use React Native in CodesSandbox and React Web — https://codesandbox.io/s/yvl8r2jl6z.
To follow along:
- Delete everything that’s currently rendered in the App.js of the sandbox
2. Create a new “components” folder in src and create a file for the BuilderX component.
3. Wrap everything in the BuilderX component in a view that’s 100% of the height and 100% of the width of the current window — see the example below.
App.js
BuilderX.js
Next, you can copy and paste the first artboard’s component from BuilderX into CodeSandbox, but It’s not going to work yet.
5 — Copy and Paste Assets / Images into the Projects
You need to export your assets and copy them into your src folder.
You can replace your entire src folder or drag and drop the assets folder into the src folder. It will work as long as the image source is prefixed with an /assets/ — Alternatively, you could all your assets in your public folder.
Now that our images are in the right place, let’s copy-paste our first component and the corresponding styles.
Let’s have a better look
There’s a long list of problems:
The layout is bigger than the screen on the y-axis and off-centre on the x. We can fix all this by grouping and setting up flex boxes in BuilderX
Now copy and paste the component into CodeSandbox again.
If you run into any issues, and you feel like you’ve done the right thing, refresh the browser.
I made a few changes to my code. Mainly removing the parent container div and getting rid of some fixed positions.
Here’s the CSS.
So this button is cooked.
To fix it we can head back over to BuilderX and do this
Or edit it directly in the code.
Here’s the first screen in React code. All in all, this took me about 5 minutes.
There is a lot of room for improvement. I should set minimum widths and heights for smaller phones because that Next button rests too close to the bottom on iPhone 5s and 4s.
And look here, I repeated this process with another screen. It took me about 2 minutes.
Yes, the text in the buttons isn’t right and there are some text wrap issues in the forms, but troubleshooting with BuilderX’s flexbox layout and putting our fires is faster than writing all this as code.
In conclusion
I spent about 20 minutes tinkering and head-scratching and managed to take a design from .fig and turn it into a React component. I think that this is very cool.
Who knows? This might be how all React websites are developed in a few years.
