how to use
how to use
How to Use
Step-by-step guide to using Figma2Framer sections—learn how to copy, paste, edit, unlink, and adapt Designs in your Framer project.
How to Use
Step-by-step guide to using Figma2Framer sections—learn how to copy, paste, edit, unlink, and adapt Designs in your Framer project.
1. Click the Copy Button
On any Section Card or Preview Page, hit the Copy button.
On any Section Card or Preview Page, hit the Copy button.
On any Section Card or Preview Page, hit the Copy button.
It copies the whole section to your clipboard — like copying a Block of Text.
2. Paste in Your Project
Open your Framer project.
Choose a page, select the Breakpoint or Frame where you want the Section to appear, and press Cmd + V (on Mac) or Ctrl + V (on Windows).
Choose a page, select the Breakpoint or Frame where you want the Section to appear, and press Cmd + V (on Mac) or Ctrl + V (on Windows).
Choose a page, select the Breakpoint or Frame where you want the Section to appear, and press Cmd + V (on Mac) or Ctrl + V (on Windows).
The Section will be added to your page and automatically imported to your project.
📁 Note:
All components you copy from Figma2Framer.com will appear in your project folder under: Assets → Project → Figma2Framer.com.
All components you copy from Figma2Framer.com will appear in your project folder under: Assets → Project → Figma2Framer.com.
All components you copy from Figma2Framer.com will appear in your project folder under: Assets → Project → Figma2Framer.com.
3. Update the Content
Use built-in variables to edit Headings, Paragraphs, Buttons, or Images.
Use built-in variables to edit Headings, Paragraphs, Buttons, or Images.
Just type or upload your own content — it’s that simple.
4. Unlink the Component (Optional)
If you want to customize spacing, structure, or styles beyond Variables — right-click the section and select "Unlink Component."
If you want to customize spacing, structure, or styles beyond Variables — right-click the section and select "Unlink Component."
If you want to customize spacing, structure, or styles beyond Variables — right-click the section and select "Unlink Component."
This will convert it to a regular group of layers you can freely edit.
5. Adjust to Breakpoints
Check how the section looks on Desktop, Tablet, and Mobile Breakpoints.
Check how the section looks on Desktop, Tablet, and Mobile Breakpoints.
Check how the section looks on Desktop, Tablet, and Mobile Breakpoints.
Pick the right Variant for each Breakpoint. On the Primary (Desktop), set the Component’s width to "Fill" so the content adjusts properly across all Breakpoints.
Pick the right Variant for each Breakpoint. On the Primary (Desktop), set the Component’s width to "Fill" so the content adjusts properly across all Breakpoints.
Pick the right Variant for each Breakpoint. On the Primary (Desktop), set the Component’s width to "Fill" so the content adjusts properly across all Breakpoints.
6. Detach to Keep Your Project Clean (Optional)
Once you're happy with your design and layout, detach the Component to reduce clutter in your assets panel.
Once you're happy with your design and layout, detach the Component to reduce clutter in your assets panel.
Once you're happy with your design and layout, detach the Component to reduce clutter in your assets panel.
That’s it!
You’ve added, customized, and cleaned up your Section properly.
Need help beyond this guide?
If something isn’t working as expected or you’re unsure whether a Section is behaving correctly, feel free to email me at support@figma2framer.com.
For general how-to questions or tool-related help, you’ll often find quicker answers through Framer’s own learning platforms:
For general how-to questions or tool-related help, you’ll often find quicker answers through Framer’s own learning platforms:
Framer Academy – structured lessons and guides
Framer on YouTube – videos and walkthroughs
Framer Community – ask questions, find tips, and get help from other users
FAQs
Where can I find the component after copying?
All copied sections will appear in your project under Assets → Project → Figma2Framer.com.
Where can I find the component after copying?
All copied sections will appear in your project under Assets → Project → Figma2Framer.com.
Where can I find the component after copying?
All copied sections will appear in your project under Assets → Project → Figma2Framer.com.
Can I change fonts, colors, or layout?
Can I change fonts, colors, or layout?
Can I change fonts, colors, or layout?
Will the Section work on Mobile Breakpoint?
Will the Section work on Mobile Breakpoint?
Will the Section work on Mobile Breakpoint?
Can I reuse the same Section on multiple pages?
Can I reuse the same Section on multiple pages?
Can I reuse the same Section on multiple pages?
Can I turn this Section into a CMS-powered layout?
Can I turn this Section into a CMS-powered layout?
Can I turn this Section into a CMS-powered layout?
What if I want to keep the component linked for updates?
What if I want to keep the component linked for updates?
What if I want to keep the component linked for updates?
Will detaching the Component break any functionality?
Will detaching the Component break any functionality?
Will detaching the Component break any functionality?
Lean Designs. Built Right. Made for Framer.
Lean Designs. Built Right. Made for Framer.
Lean Designs. Built Right. Made for Framer.
Lean Designs. Built Right. Made for Framer.