Community forum for knowledge and support

Updated 8 months ago

Viewing Figma Designs as Prototypes in Webflow

At a glance

The community member is a newbie trying to view their Figma designs as a prototype, but they are unable to add interactions to the buttons. The community members have tried ungrouping the frames, but the issue persists. Another community member suggests that the community member needs to detach the instances in Figma on every section, which is a necessary step regardless of adding interactions. The community member is also advised to use the Relume Figma Plugin to bring in multiple pages and map the site builder wireframes to Figma and from Figma to Webflow. The community member is provided with a resources website for additional getting started information.

Hi folks, major newbie here. I'm trying to view my figma designs (From the relume style guide) in figma as a prototype, but it won't let me add interactions to the buttons. Is this a no-no for the figma to webflow phase? Is that why it's disabled? Major newbie here.

You can see in these screenshots the interaction option in the first one and it missing in the second. When I go to play the protoype, nothing within the wireframe will show.

M
S
3 comments

you’ll want to first ungroup the two frames (desktop/mobile) and then you should be good to go!

Hm, I ungrouped them but it's still not working

right okay, you'll have to detach instance in Figma on every section as well. This is a step you'd want to do regardless of doing interactions any way.

We add the desktop and mobile frames to a group so its possible for us to bring in multiple pages using the Relume Figma Plugin and we have each component as a figma component with unique IDs so that its possible for us to map your site builder wireframes to figma and from site builder to webflow.

So, once your pages are on the canvas, simply select them, ungroup twice, then detach all of the components.

Because all of the text are using text styles and all of the buttons and logos are components, any changes you make to the style guide should still reflect across your pages.

Hope that is helpful!

For more additional getting started resources, we just launched our resources website here: http://relume.io/resources

Let me know if you have any questions!

Add a reply
Sign up and join the conversation on Slack