Desktop and Mobile Version

Visual Editor Help
1

I have a figma file and in that I have the design for the Desktop version as well as Mobile version, how and what is the recommended approach to generate react code using the Builder.io Figma plugin , as I have mobile design as well.

2

Hi qadir941​,

Builder.io can import both desktop and mobile versions of your Figma designs—but not automatically in the same file. Here’s how it works and how to approach your situation:

If you import the mobile frames separately from the desktop ones. Builder.io doesn’t automatically “link” or switch between multiple Figma frames like a responsive web design system might.

Instead, you’ll need to import:

  • Your desktop frame into one Builder page (or a section of a page).
  • Your mobile frame into a different page, or as a variation of the first one using targeting or responsive breakpoints.

To make Builder use your mobile design:

Use separate content per breakpoint. Import the mobile frame as a separate content entry (page or section).

Use Builder’s “targeting” feature to show that content only on mobile devices.

Example

// In your code use `userAttributes.device` or `urlPath` to load the right content
builder.get('page', {
  userAttributes: {
    device: 'mobile' // Or use screen width to dynamically switch
  }
})

Thank you,

3

But I am using react, how I can export the code and add the code snippet over there?

4

Hi qadir941​,

Check this blog here: Convert Figma to React code
This blog explains to you how to convert designs to clean React code.

Thanks,