Importing Relume Projects into Figma
How to use the Relume Figma Plugin to import your projects into Figma for further styling and design.
Movemint is a cutting-edge training facility based in Sydney, Australia, designed for high-performance athletes and those aspiring to reach peak physical condition. Offering advanced sports science assessments, personalized training programs, and recovery services such as cryotherapy and sports massage, Movemint caters to the specific needs of competitive individuals.
Goals:
- Primary goal is to encourage new members to join
- Secondary goals include driving downloads of the app, providing the gym location and learning about the coaches.
Other relevant notes:
- Include a coaches page
- Include a blog- Include a page for each service offering (reference the company description)
- Keep the pages to 4-8 sections long
Purely Organic Markets is a chain of eco-friendly grocery stores based in Portland, Oregon, offering a wide range of organic foods, natural personal care products, and sustainable household goods. We are committed to promoting healthy living and environmental sustainability.
Goals:
- Primary goal is to increase foot traffic in our stores.
- Secondary goals include promoting our loyalty program and highlighting our community involvement initiatives.
Codex Learning Center is an educational institution based in Boston, Massachusetts, that provides advanced coding bootcamps, tech workshops, and career placement services for individuals looking to enter the tech industry.
Goals:
- Primary goal is to enroll new students in our coding bootcamps.
- Secondary goal is to promote free introductory workshops
Other Relevant Notes:
- Feature a section on instructor bios
Wanderlust Travel Co. is a boutique travel agency based in Austin, Texas, specializing in bespoke travel itineraries, luxury accommodations, and unique travel experiences around the globe for the discerning traveler.
Goals:
- Primary goal is to increase bookings for our custom travel packages.
- Secondary goal is to drive newsletter sign-ups
Goals:
- Primary goal is to attract investors and partners.
- Secondary goals include promoting our research and development progress and highlighting patent achievements.
Transcription
In this doc, you’ll learn how to:
- Duplicate the Relume Figma Kit
- Install and open the Relume Figma plugin
- Import your Relume sitemap and wireframes
- Import individual pages and sections
- Importing Style Guide Concepts
Duplicate the Relume Figma Kit
{{note-figma-kit="/resources/assets/rtc"}}
It is required to duplicate the latest Relume Figma Kit (v3.0 or later) in order to use the Relume Figma Plugin.
Once you open the Relume Figma Kit into your Figma account, be sure to duplicate it to make it easy to create a new project in the future.
Install and open the Relume Figma plugin
The Relume Figma Plugin helps streamline the process from Site Builder to Figma by syncing existing variables. It will also bring in AI generated copy from Site Builder into Figma.
There are a couple of different ways to install the Relume Figma Plugin.
Install directly
You’ll find the Relume Figma Plugin on the Figma Library page.
Install from Export menu in Site Builder
Within site builder, we have several export options at the top right. Clicking on Export to Figma will present the following modal. This modal is simply saying to install the plugin. If you already have it installed, navigate to Figma and open the plugin from the Plugins menu.
How to know if you have it installed already
If you already have the plugin installed, navigate to the plugin inside of Figma and the Plugins menu.
Opening the Relume Figma Plugin
Once you have it installed, you can find it in your Plugins menu in Figma.
Clicking on the plugin will open the plugin and initiate the login sequence. Once you are logged in, you should see a screen similar to the one below - with a list of your projects.
Import your sitemap and wireframes
Select the Relume project you wish to import. You can choose to import a Style Guide, Wireframes or Sitemap.
Importing Style Guide Concepts
If you choose Style Guide, you’ll have the option to import one of your concepts. After you’ve imported your style gudie, all components and UI elements will match your new color schemes. Additionally, any new wireframes that you import after a style guide import, will also match these new color schemes. After you have imported your first Style Guide concept, you can import as many concepts as you’d like.
Give feedback
Was this resource helpful?
For account-related issues, please contact [email protected].
