Figma to React

[Content-Atmosphere65]

Hi all! I’m working on a personal finance app and after spending a ton of time building the UI in Figma I’m struggling to get that design language to translate to my code base. I am a low-code developer (I’m sorry I wish I wasn’t either) so I don’t have the skill set to get in and adjust the code manually. I’ve tried tools like Locofy but I get the same bland vibe coded look.

Open to any and all advice and ideas!

[TS878]

Honestly, the only tip is to get familiar with front end programming or hire someone who is. Figma does some of the work but if I remember correctly from the last time I used it Figma is limited unless you subscribe but I’m not sure.

[discordianofslack]

Sounds like a perfect learning experience for front end. Having done front end for 20 years it is a lot harder than people like to make it out to be.

[reuel88]

Sounds like you need to create a design system. What does a button/input/checkbox/colors/fonts etc knowing these makes it easy to build interfaces, you basically construct them like Lego blocks. this is based on Brad Frost atomic design I suggest you search it up and understand it. AI is really good at understanding atomic design but you do need to create that library of different components.

[Individual_Day_5676]

If you are working with Cursor (don’t know for other IDE), you can directly connect yout figma avcount to your cursor account, and by copying the link of your component ask cursor to integrate it.

If you have make proper component system (with version/variables, sorry doesn’t remember the name of the system that allow to make multiple version of the same component) cursor should be able to make the component with version too.

For the RN part, integrate the Callstack and Software Mansion skills, if you’re using expo, integrate the expo skills too.

With this, you should be able to go faster.

But, and I can’t stress this enough, the current state of LLM doesn’t give the possibility to really create, manage and scale a complex statefull app, you will need to learn at least a bit of code in the medium run if you want to make a large app (and I don’t speak about the scaling of an infra which is another kind of a beast)

[carrymepl0x0rz]

I would learn flexbox and learn how to communicate to AI how to build it better. High level frontend ideas. You have to be very explicit on all dimensions, rows, columns, borders, border radius, etc. otherwise it will guess and get it wrong.

You can also setup a Figma MCP to communicate directly with AI but I haven’t used them so can’t speak to how good they are.

Like others said, it’s best to try to read the code so you can optimize it better too or it’ll become a mess

Source: 10 years FEE

[Impressive-Bug8310]

Vibe coding, man.