Creating a Unified Design System for Relume and Figma Integrations | Relume Community

Creating a Unified Design System for Relume and Figma Integrations

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

6 comments

Matt J.
·
Yogi M. 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.
Yogi M.
·
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.
Matt J.
·
Yogi M. Here is a doc on that: https://www.relume.io/resources/docs/customizing-the-figma-kit How familiar with Figma are you?
Yogi M.
·
Thanks, I'll have a look and revert back. Re: my familiarity with Figma, I'm a beginner. Making the transition from Sketch app.
Yogi M.
·
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.
Matt J.
·
Yogi M. 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