Framer Figma Integration
Framer Figma Integration: step-by-step guide
Open your Framer project.
Click on the 'Plugins'.
Select 'Browse All...'
Click on the search icon.
In the search bar, type 'Figma'.
Select 'FrameKit'.
Click 'Open Plugin'.
Select the Framer project.
Authentication complete! Return to Framer to continue building your stunning website.
Quick answer: To integrate Figma in Framer, open your project, go to Plugins, and select Browse All. Search for Figma, choose FrameKit, and click Open Plugin. Select your Framer project to complete authentication and return to building your website.
About this Framer tutorial
Connect Figma to your Framer project using the FrameKit plugin for a seamless website building workflow. This guide covers framer Figma Integration in 9 steps, starting with "Open your Framer project" and finishing with "Authentication complete! Return to Framer to continue building your stunning website". The interactive demo above is a click-through copy of the real Framer interface, so you can rehearse each step before doing it in your own account.
Frequently asked questions
How many steps does framer Figma Integration take?
9 steps. Each one is listed in order above, and the demo highlights exactly where to click.
Can I try it without changing my own account?
Yes. Clicking through the demo doesn't touch your Framer data or settings. Once you know the flow, repeat it in your own workspace.
This tutorial is filed under Framer and Figma. Related guides: Framer Google Sheets Integration, How to Connect HubSpot to Framer and Framer Mailchimp Integration. Last reviewed 05 Oct 2026.
Create your first interactive demo in minutes
No credit card required • Start building today
