5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3fk0f7q4960ol.js","/creators-assets/_next/static/immutable/chunks/00fdmr6kfsdrw.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/1zwfgkv6hl7ih.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1xwqa9rrktdcw.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/11rwwufuwaox5.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/2riq6xk2ap_dl.js","/creators-assets/_next/static/immutable/chunks/1q3yt3z40r1ue.js","/creators-assets/_next/static/immutable/chunks/3_2gh-txmrtwa.js","/creators-assets/_next/static/immutable/chunks/3xhwx36tyhh8-.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2jy6qwxbn3dqw.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5f:T82e,

Bridging the gap between your Figma designs and Framer projects.

Stop wasting time manually copying hex codes, recreating text styles, and managing dark mode variants across platforms. Figma Sync is the ultimate bridge between your design tool and your Framer canvas.

With just a single Figma File URL, this plugin instantly scans your design and generates native, fully-linked Framer Color and Text styles in seconds.

✨ Key Features

Instant Style Import: Automatically pull in all your solid colors and typography settings directly from your Figma file.
Smart Dark Mode Mapping: Names your Figma colors with "Light" or "Dark" prefixes? Figma Sync intelligently pairs them together to automatically generate Framer styles with built-in Light and Dark themes.
Native Framer Styles: Creates true Framer Color Styles and Text Styles—meaning if you update the style later, it updates everywhere across your entire Framer site.
Secure OAuth: Uses Figma's official OAuth to securely connect to your account without ever storing your data.
Native UI: Built with a clean interface that seamlessly adapts to Framer’s own light and dark mode for a native feel.

🚀 How to use

Connect: Log in with your Figma account directly inside the plugin.
Activate: Enter your Polar.sh license key.
Paste: Grab your Figma File URL (Click Share -> Copy Link in Figma) and paste it into the plugin.
Sync: Hit "Sync Figma File" and watch your Framer assets panel populate instantly!

5b:[["$","$L5e",null,{"post":{"id":"019f8507-0ae3-7770-a423-b3a27ef497fb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff121138-ac98-4c86-a230-12c0d7db0e59","name":"Pixels","slug":"pixels","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ff121138-ac98-4c86-a230-12c0d7db0e59/9jje7ugc","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1379","resolved":true,"title":"Design Sync","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Bridging the gap between your Figma designs and Framer projects.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Stop wasting time manually copying hex codes, recreating text styles, and managing dark mode variants across platforms. Figma Sync is the ultimate bridge between your design tool and your Framer canvas."}]},{"type":"paragraph","content":[{"type":"text","text":"With just a single Figma File URL, this plugin instantly scans your design and generates native, fully-linked Framer Color and Text styles in seconds."}]},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Key Features","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Instant Style Import:","marks":[{"type":"bold"}]},{"type":"text","text":" Automatically pull in all your solid colors and typography settings directly from your Figma file."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart Dark Mode Mapping:","marks":[{"type":"bold"}]},{"type":"text","text":" Names your Figma colors with \"Light\" or \"Dark\" prefixes? Figma Sync intelligently pairs them together to automatically generate Framer styles with built-in Light and Dark themes."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native Framer Styles:","marks":[{"type":"bold"}]},{"type":"text","text":" Creates true Framer Color Styles and Text Styles—meaning if you update the style later, it updates everywhere across your entire Framer site."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Secure OAuth:","marks":[{"type":"bold"}]},{"type":"text","text":" Uses Figma's official OAuth to securely connect to your account without ever storing your data."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native UI:","marks":[{"type":"bold"}]},{"type":"text","text":" Built with a clean interface that seamlessly adapts to Framer’s own light and dark mode for a native feel."}]}]}]},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" How to use","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect:","marks":[{"type":"bold"}]},{"type":"text","text":" Log in with your Figma account directly inside the plugin."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Activate:","marks":[{"type":"bold"}]},{"type":"text","text":" Enter your "},{"type":"text","text":"Polar.sh","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://Polar.sh","target":"_blank"}}]},{"type":"text","text":" license key."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Paste:","marks":[{"type":"bold"}]},{"type":"text","text":" Grab your Figma File URL (Click "},{"type":"text","text":"Share","marks":[{"type":"italic"}]},{"type":"text","text":" -> "},{"type":"text","text":"Copy Link","marks":[{"type":"italic"}]},{"type":"text","text":" in Figma) and paste it into the plugin."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sync:","marks":[{"type":"bold"}]},{"type":"text","text":" Hit \"Sync Figma File\" and watch your Framer assets panel populate instantly!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Figma to Framer Sync","slug":"design-sync","author":{"framerUserId":"ff121138-ac98-4c86-a230-12c0d7db0e59","name":"Pixels","slug":"pixels","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ff121138-ac98-4c86-a230-12c0d7db0e59/9jje7ugc","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ff121138-ac98-4c86-a230-12c0d7db0e59/019f8504-ff64-75ac-bad8-536250e0fc9b.png","metadata":{"tint":"hsl(0 0% 3%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-07-21T14:14:18.726Z","updatedAt":"2026-07-22T12:47:58.714Z","publishedAt":"2026-07-22T12:47:58.704Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"9wfezab12cw3mki30mdratvzr","paid":true,"categories":[{"id":"3fc802d9-7527-48e0-9403-c9bd534ab520","name":"Utilities","slug":"utilities"},{"id":"79a3568a-05f3-4f98-b70f-6c9ff9e301c4","name":"UI Kits","slug":"ui-kits"},{"id":"d42b39e6-e921-4d46-be20-263eb61efbf9","name":"Developers","slug":"developers"}]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-21T14:14:19.107Z","updatedAt":"2026-07-21T14:14:19.107Z","reported":false}}],"$L60"]

Suggested for you