Community forum for knowledge and support

Updated 6 months ago

Importing Sitemap and Designs from Relume to Figma

At a glance

The community member imported their Sitemap and Designs from Relume to Figma, but found that changes to certain components did not update the other designs on the wireframes. They asked if there is a design system that plugs into Relume's imported components, allowing them to change icons or buttons and have those changes reflected across all designs.

In the comments, other community members provided some suggestions. One mentioned using Figma's bulk edit features to update multiple screens at once. Another community member was confused about how to use the Relume Design System for Figma with the imported wireframes.

The answer seems to be that the community member needs to duplicate the Relume Figma Kit, which contains all the components connected to variables and styles. When importing the wireframes from Relume to Figma using the Relume plugin, the components are pulled from this kit, maintaining the connections to the variables and styles. Customizing the components outside of the Relume Figma Kit would not result in the same functionality.

Useful resources

Hi Relume Community,

I imported my Sitemap and Designs from Relume to Figma.

When I add or change certain components, this does not change the other designs on the wireframes.

Is there a design system that plugs into relume's imported components where I can change the icon or button and that changes everything?

Cheers

M
Y
6 comments

we're exploring variants within components in Figma but otherwise you would just need to Figma's bulk edit features in order to make those kinds of updates across different screens.

Find the section you want to use within the search or insert abilities (cmd + i) and copy it.

Then go to the section where you want to replace with the new component and select it then go to edit > select matching layers. This should select all of the sections that match this across all the screens. If not, make sure that you haven't detached one instance but not all of them - they have to match.

If it works you'll see them all highlighted, then right click "Paste to replace" and now you've just updated many screens with the same action.

There's a few more tricks like this within Figma as well.

I'm a bit confused.

I see that Relume has a Design system for Figma but trying to figure out how to use it with the wireframes imported.

Cheers.

Thanks, I'll have a look and revert back.

Re: my familiarity with Figma,
I'm a beginner. Making the transition from Sketch app.

I understand how to use Batch styler but does not solve my issue,

I understand Figma has a Design system kit but I'm not sure how to connect that kit to the imported relume components.

Changing icons, fonts etc to amend entire file or sections is what I'm struggling with atm.

I think the disconnect we are having is that you need to duplicate the Relume Figma Kit - this kit has all of the latest components that we have in the entire library inside of this file. This file has connected all of those components to variables and styles and you can customize those styles on the Style Guide page.

When you import your wireframes from Site Builder to Figma using the Relume Figma Plugin - we are grabbing the components within this Relume Figma Kit and placing them on the canvas, keeping the connections to the variables and styles intact.

Doing this outside of a Relume Figma Kit will not result in the same thing because that connection is not made.

Here are all of the tools that you will need to be successful using Relume:
https://www.relume.io/resources/docs/essential-tools-to-get-started#relume-figma-kit

Here is a doc on how to customize the Relume Figma Kit:
https://www.relume.io/resources/docs/customizing-the-figma-kit

Add a reply
Sign up and join the conversation on Slack