Framer Figma Integration

Updated on:

May 13, 2026

By:

Use this interactive demo to learn how to connect Figma with your Framer project using FrameKit.

Quick summary

The Framer Figma Integration lets you import Figma designs directly into Framer using the FrameKit plugin, eliminating manual asset handoff. By authenticating via Google OAuth, you can sync your Figma project with Framer in just a few steps and start building immediately.

Steps

Open your Framer project from the dashboard.
Click on Plugins in the top menu bar.
Select Browse All to open the full plugin marketplace.
Click the search icon to activate the search field.
Type Figma in the search bar to filter relevant plugins.
Select FrameKit from the search results.
Click Open Plugin to launch FrameKit inside your project.
Select your Framer project to link it with the plugin.
Complete Google authentication and return to Framer to continue building your website.

📌 Why this matters

The Framer Figma Integration bridges the gap between design and development by letting teams bring Figma assets directly into Framer without manual re-creation. Using the FrameKit plugin, designers can authenticate once and instantly sync their Figma project to Framer, cutting handoff time and reducing errors. This workflow is essential for product teams and web designers who need to move from high-fidelity Figma mockups to live, interactive Framer sites as fast as possible. It makes Framer a more powerful no-code web builder by natively supporting the industry-standard design tool most teams already use.

Your product deserves an interactive demo

Start free

How to Add Adobe Fonts to Framer

Framer CRM Integration

How to Link to Section in Framer