Using Relume with Figma Sites

In this doc, you’ll learn about:

1. How to customize your Relume figma kit to use Figma Sites.
2. How to sync and update your figma designs to use with Figma Sites.

Step 1 – Duplicate the Relume Figma Kit

To get started, make sure you’ve duplicated the Relume Figma Kit. This kit contains all of the components you’ll need, organized by category (e.g. Hero, CTA, Pricing, etc.).

Once duplicated:

• Review the Components page to familiarize yourself with what’s available.
• Optionally, customize the components to match your brand styles before importing into a Figma Site project.

Step 2 – Open Figma Sites

Navigate to Figma Sites and create a new project or open an existing one.

In the left-hand panel:

• You’ll see the site structure laid out by pages and sections.
• Click into any section or placeholder to begin customizing.

Step 3 – Copy Components into Figma Sites

To use Relume components inside your Figma Site:

1. Open your duplicated Relume Figma Kit in a separate tab.
2. Select the frame or component you want to use (e.g. a Hero section).
3. Copy the component (Cmd/Ctrl + C).
4. Return to your Figma Site and paste it (Cmd/Ctrl + V) into the desired section.

Figma Sites supports direct pasting of frames, so your components will retain their structure and styles.

✅

Pro tip:

Step 4 – Adjust Layout and Content

Once the component is added:

• Double-click any text layers to edit content directly.
• Swap images or replace icons using Figma’s asset panel.
• Resize or adjust layout spacing as needed to fit your design.

Figma Sites treats these components just like native Figma layers, so you can continue to work with them exactly as you would in a traditional file.

Step 5 – Organize and Repeat

Continue copying and pasting components into the various sections of your Figma Site until your full page layout is complete.

To maintain consistency:

• Reuse components instead of recreating from scratch
• Leverage Variants and Auto Layout settings from the Figma Kit

Summary

By combining the flexibility of Relume’s component system with the structure of Figma Sites, you can streamline your design workflow and go from wireframe to high-fidelity layout faster than ever.

If you haven’t already, duplicate the Relume Figma Kit and start building your next project with Figma Sites today.