Export Figma Text & Color Styles To Framer

Get your Figma styles over into Framer in a fast and clean way with the workflow detailed in this video.

Timecodes
00:00 Intro
00:45 Figma - Step 1
02:10 Figma - Step 2
02:39 Figma - Step 3
03:25 Framer - Styleguide page
09:35 Framer - Apply to real context

[JamiltonMacedo]

I've been testing Framer after the acquisition of Figma by Adobe. And I discovered an incredible tool.

[LittleCaira]

Mr. Gabe, this is an amazing tutorial, thank you very much.

[holypink]

you're the best one how share videos about learning framer and now I'm waiting for you to share video on how we do unique animation in the framer app.. thank u for sharing your knowledge

[VladYaremenko-pgpu]

Thanks, Tim! Great approach and video itself! Waiting for more content about Framer and wish you the best!

[Ioannnify]

Thanks Tim ! Can you make more Framer tutorials :) You mention in the end to check out the video on building components with Framer, can you provide the link?

[jurgenbuchholz]

Thanks for sharing your workflow with us! Very interesting 👍

[artcgix]

Thank you! Do any of this change with the new viarant features from Figma?

[madhoundes]

very nice, I am wondering is there any way to change all text font family in one click without going into each every style, thanks

[JulienDidier-kp]

Hi Tim ! I discovered you 3 days ago and I'm watching your all Youtube, thanks a lot man.. :). Quick question, in your 6 UI hacks vid you talk about trying to keep up to 2 font sizes max, in this one I can see around 10 font sizes, am I missing something hey here ?
Also, how did you one click copy the gradient style !?

[creatoratplay]

Thank you!! I wonder how designer can incorporate motion design in Framer. 🧐

[cassiechen]

What is the background music?! Sounds so relax!

[PhilipWallage]

Isn't there a faster way to import the actual styles or variables? This can be a crazy amount of work.

[corneromme]

Great video! How did you get the line heights in em’s in Figma?

[onequestpixel]

Is it possible to create folders for the colors like in Figma? I usually use the "/" for a folder so that I can organize the colors by things like dark and light variants or other things but I can't figure out how to do that in Framer. The "/" doesn't seem to work.

[christeUXUI]

I always thought you would have text styles from H1-H5 for example, then on smaller screens H1 would become H3 for example, is it common practise to have different types of H1? :S

[abeblue]

*No major update since these tutorials? Thanks for all these tuts ;)*

[muhammadyasir-rnpz]

can you tell the name of plug-in style guide to framer from figma

[jipingliu]

Love your videos! I’m working on a website in Figma. Is it 1920 the best width for full screen website? But when I preview it seems not wide enough for full screen. Please advise! Thanks

[webguymike]

Thanks Tim! I'm just starting to look at Framer and was wondering, do you have any thoughts on Framer vs. Webflow? I've been using Webflow for a while and just wondering how Framer compares for the designer as well as the clients. Thanks!

[kylehumber]

Thanks for the vid! I'm curious to start using Framer so your vids have been super helpful.
And what application do you use for screen recording? the text is looking sharp which some software has issues with that