Export Figma Text & Color Styles To Framer

[@LittleCaira]

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

[@VladYaremenko-pg1pu]

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

[@TimGabe]

thanks a lot vlad! hopefully you've liked the videos since your comment here!!

[@holypink4488]

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

[@TimGabe]

thank you so much, my friend 🤩 how to do animation work in Framer is coming up these coming weeks 🙏☺️

[@jurgenbuchholz7279]

Thanks for sharing your workflow with us! Very interesting 👍

[@TimGabe]

happy you liked it, Jürgen! 😃

[@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?

[@TimGabe]

will definitely create more videos on Framer 😃 I'm embarrassed to admit that the video mentioned has yet to be published... 😅

[@artcgix]

@@TimGabe hopefully you can release it soon, I'm just starting with Framer and I am having trouble. And you explain so well!

[@calvinpower7721]

@TimGabe, did you release this yet?

[@JamiltonMacedo]

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

[@TimGabe]

really is an amazing tool! can’t wait to cover it more in the future 😃

[@JulienDidier-k6p]

Hi Tim ! I discovered you 3 days ago and I'm watching your all KZbin, 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 !?

[@TimGabe]

the bigger your project gets, the more fonts you will usually need -- so for a big website with everything from bold marketing pages to blogs and actual user interfaces, you will have to have more fonts. but for any one view, 2-3 font sizes will usually be more than enough 😃

[@artcgix]

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

[@TimGabe]

since it's not a straight export, it doesn't really matter 😃

[@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

[@TimGabe]

not that i know of... i think Framer is working hard on improving the design system parts of the software though!!

[@creatoratplay]

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

[@TimGabe]

i'm planning on releasing more and more animation content on Framer, so keep an eye out 😃

[@abeblue]

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

[@TimGabe]

no major things that changes the workflow of this! 🙏

[@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

[@TimGabe]

happy that I've got you interested in Framer, Kyle. I don't think you'll ever regret making that leap 🤩 I just use QuickTime Player on Mac 👌

[@corneromme8735]

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

[@TimGabe]

hey Corné!! it's in % 😃

[@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!

[@TimGabe]

hey Michael! ☺️ I think at this point it really depends on the complexity of the project - if you’re building simpler sites that need basic CMS setups and nothing too fancy, I would go with Framer every day of the week. now, for more advanced sites I think Webflow still has an edge because they’re offering more capabilities out of the box. with that said, I’m expecting Framer to close the gap more and more this year 😃

[@cassiechen2874]

What is the background music?! Sounds so relax!

[@TimGabe]

can't remember 😅 but probably from artlist!

[@jipingliu7028]

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

[@PhilipWallage]

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

[@perkzofbeingben]

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.

[@martinzetta]

thanks Tim! I have a problem adding a breakpoint for a text style, I only can choose between L or M size for te breakpoints, and the M size don't allow me to change the Min Width value. Do u know for what reason this happen?

[@TimGabe]

hmmm, that's interesting martin! i haven't stumbled upon that before, so i couldn't tell you what it might be right off the bat here

[@muhammadyasir-rn7pz]

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

[@tintinwario]

How do I resolve this using EM and REM instead of Pixels?

[@TimGabe]

I'd probably use an online converter of some sort and manually input it! 🙏

[@tintinwario]

@@TimGabe Thank you. A question before the streaming starts - can we build a reusable hover/shadow/etc style in Framer and be applied in different elements? Buttons, pictures, frames etc? If yes, kindly paste the link here. I'm alittle frustrated trying to repeat the same styles on every element across a 5 page website

[@coryjosef]

Hey Tim, how do you handle H4-H6?

[@TimGabe]

hey Cory! Framer doesn't have H4-H6 as native text styles, but as a workaround you can create regular paragraph text styles and then manually change the HTML tag in the right sidebar 👌

[@coryjosef]

@@TimGabe Brilliant! thank you!

[@Zunguyen13]

well it's kinda hard to find the color styles in framer if I don't see your videos

[@TimGabe]

it's definitely a little threshold to get into Framer, but once you're over that threshold.... magic!! 🤩

[@Zunguyen13]

@@TimGabe I can't embed loom video with embed component too, don't know why

[@isthatsharanya]

The manual work here twisted my head, but I hope Framer team finds a solution!

[@TimGabe]

yes! i’m sure if the community shows that the Figma > Framer workflow is important, they’ll add more and more ☺️

[@vladimirmandic8726]

your tutorials are great but your voice always puts me to sleep while watching 😂💤💤

[@TimGabe]

haha, that's no good!!

[@juanescobedo4413]

I've seen literally 3 ads in 2 minutes. Dislike