How to use
Sections
How to Use: Sections
Guide to using Sections in Framer: copy layouts, paste into projects, customize variants, and unlink for advanced editing with figma2framer.com.
Step 1. Copy the Section
On any Section Card or Preview Page, click the Copy button.
The full Section layout will be copied to your clipboard.
Step 2. Paste in Your Project
Open your Framer project.
Go to the page or canvas where you want the Section.
Select the Frame or Breakpoint and press ⌘ Cmd + V (Mac) or Ctrl + V (Windows).
The Section will be added directly to the page and automatically imported into your project.
Tip:
Before using it, check if there's an update available.
You'll find all copied Sections from figma2framer.com in Assets → Components → figma2framer.com.
From there, drag and drop them into any page.
Step 3. Customize
On the Primary (Desktop) Breakpoint, set the Section's width to Fill so the content adapts across all Breakpoints.
If Framer doesn't auto-apply the correct Variant, manually select:
- Desktop for large screens
- Tablet for medium screens
- Mobile for small screens
You can edit Variants, text, colors, and images using built-in Variables.
Supported Variables can also be connected to your CMS for dynamic content.
Step 4. Unlink and Unlock more customization
Figma2framer.com Sections follow best design practices, but sometimes certain projects need extra flexibility.
In that case, you can Unlink a Section to customize it freely.
This converts it into a regular group of layers that you can edit however you like.
Tip:
When you Unlink a Framer Component, a duplicate is created in your project. Assets → Components → Project.
Any changes to duplicated Component only apply to that copy.
Future updates from figma2framer.com will not sync with the unlinked version.
That's it!
You've copied, pasted, and customized your first Framer Section from figma2framer.com.
Happy Designing! 🎉
FAQs
Basics:
Usage:
Advanced:
