How to use multiple screen sizes in Figma to generate react solution

I’m new to builder.io but I use Figma.
The employer I work for and most do; require at least a mobile, tablet and desktop frames.
I generally use variants in these frame sizes and modes to make everything responsive.
I don’t understand how I can use Visual Copilot to create what Ive already created in Figma, I don’t want Visual Copilot to dictate how the responsive should work, I want to dictate that via my figma file. HOw do I do that or is this a limitation of the product?
@maddy got any idea? Can you straighten me out? help!

I’m not getting any help so let me try to make it more clear. When I design in Figma, I create mobile, tablet and desktop frames. I may use one component for say ‘pricing’ and it has 3 variants. I use modes and variables to make the right variant work for each frame size i.e. mobile, tablet, desktop. How do I use Visual Copilot to use my responsive work in Figma?

1 Like


what I wanted above


what I got above. It missed the mobile lay pretty bad…why can’t I specify what i want in my figma file?

The other things is; I’ve had this post up here for 3 days. No response at all.

Hello @webologist,

Welcome to the builder.io forum post.

Can you share a sample Figma file so that we can test this issue out on our end?

You may also find help at the following link

Hi @webologist - Did you get an answer for this? I’m new to builder.io and will be using a similar process to you for importing figma responsive designs

Thanks in advance
Jon

hi, @manish-sharma any updates on this? I have also same problem.

I wonder why this does not get more attention?
In every professional setup I’ve worked with, the designer creates at least a mobile and a desktop version in Figma. It never happens that the design only contains the desktop version and the developers have to figure out the rest.

If most builder.io customers seem to not need this, how do they deal with the sitation when the designer delivers a desktop and a mobile version?