Community forum for knowledge and support

Updated last year

Exporting Wireframe from AI Site Builder to Figma

At a glance

The community member is using an AI site builder to create a sitemap and wireframe, and then wants to export the wireframe to Figma to make some minor edits before sending it to their client. The issue they are facing is that when they import the wireframe into Figma using the Relume Library plugin, the wireframe becomes unlinked from the Style Guide. Editing the components on the Style Guide page does not impact the wireframe, and the community member has followed tutorials but is still experiencing the same problem. The community members in the comments suggest checking the steps taken during the import process and whether the community member is inside a Figma Kit Pro or the free Figma Kit. A link to a walkthrough video is also provided as a potential resource.

Useful resources

Hi, hoping someone can help me.

I am using the AI site builder to create a sitemap and wireframe. I then want to export the wireframe to Figma to amend it slightly before sending it to my client.

The issue I am having is using the Figma Library and importing the wireframe using the Relume Library plugin. The wireframe imports as expected and is editable. However, editing the components on the Style Guide page has no impact on the wireframe. For example, if I make all the buttons on the Style Guide bright red the colour does not change on the wireframe.

If I right-click on one of the buttons on the wireframe it shows an option to 'Restore Main Component'. In essence, the wireframe has become unlinked from the Style Guide. I have followed tutorials on YouTube and followed the exact steps but keep getting this same issue.

Interestingly all of the components (Navbars, Footers etc) within the Relume Library show the amended button styling. It is just the imported wireframe that is unlinked from this all.

Thanks in advance for any assistance!

R
K
M
3 comments

Would be great to hear from anyone who has experienced anything similar!

Ah! This is a great question And thanks for your patience mate. I know just the person πŸ™‚

is our resident Figma wizard. How would you handle this one mate?

cc

Ah yeah, I wonder - can you link to the youtube video you are speaking about?

We have this full walk-through video that might also provide some insights. https://relume.notion.site/Using-the-Relume-Site-Builder-Full-Walk-Through-409e549d44594f0986c7b3453d93a5e4?pvs=4

One theory I have is just around what steps you are taking during the opening of the figma plugin and hitting the add wireframe - are you inside of a Figma Kit Pro or the free Figma Kit? Or are you outside of that file entirely?

Add a reply
Sign up and join the conversation on Slack