4 Tricks For Best Figma To Framer Export

  Рет қаралды 34,489

Tim Gabe

Tim Gabe

Күн бұрын

Пікірлер: 46
@TimGabe
@TimGabe 2 жыл бұрын
link to the Figma file 💜: www.figma.com/file/Wwa4YMB39SZwiNgwUfmChH/Figma-to-Framer-Export?node-id=302%3A741&t=sIJgGobu0kSZuH9k-1
@piliq3774
@piliq3774 Жыл бұрын
Nice that you included the Figma file!!!
@TimGabe
@TimGabe Жыл бұрын
appreciate the comment and the support, my friend 🤩
@hectorwearden202
@hectorwearden202 Жыл бұрын
Great tips. Loved the last idea about treating everything like lego pieces. So much easier to break the design apart into components and then export. Much easier to update and upgrade modularly in future too.
@TimGabe
@TimGabe Жыл бұрын
happy it resonated with you, Hector!! thanks for commenting 🤩
@carolinadelsur6411
@carolinadelsur6411 10 ай бұрын
great tutorial! thank you so much. could you explain how does a text layer resize at a certain breakpoint, as you mention in 4:11?
@OPE-kc6dp
@OPE-kc6dp Жыл бұрын
Good day, great video. I have a question and I would really love @tim gabe response. I started UI/UX just last year and Figma is the only major designing and prototyping tool I know of. Please I'll like to know if I should stick to figma for designs and prototype. or do i learn framer and invision and protopie as well. Like I need to know if I should be adept in other design softwares as well
@TimGabe
@TimGabe Жыл бұрын
I can only say what I would do, and that would be to learn Figma and use that as your go-to design tool for everything DESIGN. then, if you want to kick ass with web design, Framer is going to be your best friend as a designer in 2023 and onwards 😃
@OPE-kc6dp
@OPE-kc6dp Жыл бұрын
@@TimGabe thank you so much, you're awesome
@xhongaronga
@xhongaronga 2 жыл бұрын
This is so freaking cool! I'm stoked to try Framer when it's time for me to build a portfolio site. Great tutorial, Tim! I'll definitely be coming back to this when it's time to create. Keep the tutorials coming, my dear friend!
@TimGabe
@TimGabe 2 жыл бұрын
Erman, my brother 💜 appreciate the nice feedback as always!! I'm planning on really ramping up the Framer tutorials these coming weeks, so hopefully there'll be a ton of material for you when it's time for the portfolio 🤩
@xhongaronga
@xhongaronga 2 жыл бұрын
@@TimGabe That would be sick! Do you plan on covering Framer animations in the future? That's one of the aspects I'm really looking forward to trying.
@TimGabe
@TimGabe 2 жыл бұрын
@@xhongaronga yes, that’s one of the videos in my upcoming Framer series 🤩🙌
@xhongaronga
@xhongaronga 2 жыл бұрын
@@TimGabe Looking forward to it then!
@cosmiqdesigner
@cosmiqdesigner 2 жыл бұрын
Great tutorial. These surely makes exporting easier.
@TimGabe
@TimGabe 2 жыл бұрын
really appreciate it Cosmiq! 🙏🥳
@madamecelindra
@madamecelindra Жыл бұрын
Thanks for your videos! Is there a possibility to import your figma grids into framer or set them up there? I mean like the 8pt grid, not the framer grid /stack system^^
@TimGabe
@TimGabe Жыл бұрын
if you go to menu > view > show guides you can play around with that 😃
@jskprakash
@jskprakash 2 жыл бұрын
Thank you so much Tim! It's really help for exporting. Great Tutorial
@TimGabe
@TimGabe 2 жыл бұрын
so cool to hear that you found it helpful JSK 🤩🙌
@martalaw100
@martalaw100 11 ай бұрын
I love all of your content, Tim. Thank you so much for making it so easy to understand. I'm currently trying to import a drop-down content information FAQ style into Framer from Figma, and I'm not able to. Do you have any tips on how to do it or if it's even possible? Thank you very, very much.
@TimGabe
@TimGabe 11 ай бұрын
thank you marta!! unfortunately you can't copy-paste it over with functionality, but the best practice would be to build it with proper auto layouts in figma (make the structure perfect) and then copy it over. after that you can create a separate component for it in framer!
@drakZes
@drakZes 10 ай бұрын
Thank you for the video. For the 1st tip you say set up auto layouts before going to framer, but isn't it easier in framer to set up the stacks there than working with Figma AL?
@leamendes6422
@leamendes6422 Жыл бұрын
Great tips, thank you 🙏
@TimGabe
@TimGabe Жыл бұрын
happy you liked it, Léa! 😃
@DhirajKyawal
@DhirajKyawal Жыл бұрын
What an amazing tutorial!
@TimGabe
@TimGabe Жыл бұрын
that's so nice to hear! thank you, Dhiraj! 😃
@DhirajKyawal
@DhirajKyawal Жыл бұрын
@@TimGabe My pleasure! This video should be watched by every Figma designer, even if they are not planning to develop it further in Framer, as it’s filled with good design practices which will lead to smooth developer handoff
@karimvenom6459
@karimvenom6459 4 ай бұрын
How do you transfert compinents from figma to framer keeping the same type of interaction
@brianniwoyda
@brianniwoyda 4 ай бұрын
Thanks Tim but I have a questions... Can I do this the other way around? Can I take a design from Framer to Figma?
@davecelot
@davecelot 2 жыл бұрын
Really nice video! I'm not that familiar with Framer and this is my first time watching something related to it. However, I'll be there when you release the Framer series! 😌 Pd. I teach UX/UI Design and for everything related to Figma I recommend your channel to the students.
@TimGabe
@TimGabe 2 жыл бұрын
thank you so much Diego! 🙏 I think you’ll fall in love with Framer real quick. releasing another video this coming week ☺️ that’s awesome to hear. really makes me genuinely happy to see that my content is appreciated like that. thanks again, my friend 🤩
@jolenekk
@jolenekk Жыл бұрын
Hi Tim, I have been following your Figma videos and that got me interested in Framer. I was wondering what your thoughts are on designing directly in Framer vs designing in Figma first.
@TimGabe
@TimGabe Жыл бұрын
hey Jolene! for me, using Figma for the design parts is still the most convenient since I'm not doing only web design. however, if you're doing just web design and don't need more advanced vector graphic tooling etc., then I think going straight to Framer is definitely an option 🤩
@jolenekk
@jolenekk Жыл бұрын
@@TimGabe That makes sense, thanks Tim. I think for now I'm going to focus on setting up files in Figma that are ready to export to Framer and then move to working directly in Framer. Knowing both is definitely advantageous. Have a great live! 👋
@des7638
@des7638 Жыл бұрын
Awesome thank you
@TimGabe
@TimGabe Жыл бұрын
thanks a lot!!
@diogos7233
@diogos7233 2 жыл бұрын
Do websites built in framer load fast? How does it compare to webflow in regards to load speed?
@TimGabe
@TimGabe 2 жыл бұрын
hey Diogo! I’m not by a computer at the moment, but you could go to Framer.com and pick any of the Framer Awards websites and put them into a speed test site. 😃
@boxeris729
@boxeris729 Жыл бұрын
Can you export Figma animations/prototypes as well?
@elysiumcore
@elysiumcore Жыл бұрын
Thank you for this - i skipped this step and ended up with a mess 😂 - going to clean up my design figma file and will get it right
@TimGabe
@TimGabe Жыл бұрын
good luck my friend!
@REA-888
@REA-888 Жыл бұрын
Can you export from framer to figma?
@TimGabe
@TimGabe Жыл бұрын
unfortunately not...
@doupecan3834
@doupecan3834 Жыл бұрын
Why do you use Framer over webflow? Do you ever find yourself hitting the limitation ceiling of Framer?
@TimGabe
@TimGabe Жыл бұрын
there are definitely drawbacks to framer and webflow is increeeedibly powerful, but you can still achieve most things you want in framer if you just use third-party integrations 😃 so in terms of limitations, i don't really think that is a huge problem, and if it is in some cases (for very big and complex projects), it'll be less and less of a problem as the tool grows
Export Figma Text & Color Styles To Framer
11:07
Tim Gabe
Рет қаралды 19 М.
Figma to Framer: How to Build a Live Portfolio Website
17:13
Design Xstream
Рет қаралды 15 М.
小丑教训坏蛋 #小丑 #天使 #shorts
00:49
好人小丑
Рет қаралды 54 МЛН
Арыстанның айқасы, Тәуіржанның шайқасы!
25:51
QosLike / ҚосЛайк / Косылайық
Рет қаралды 700 М.
Designing the new Dive website in Figma + Framer
17:10
Ridd
Рет қаралды 25 М.
My Figma to Framer Process
16:30
Flux Academy
Рет қаралды 61 М.
I fixed Iman Gadzhi's SaaS website design
3:51
Wize Templates
Рет қаралды 3,6 М.
Turn your Figma designs into a real site with Framer
9:41
Framer
Рет қаралды 204 М.
From Figma to Framer (Get Started in 28 Minutes)
28:33
Tim Gabe
Рет қаралды 48 М.
Master Stacks, Position & Sizing (Framer For Beginners)
10:37
Go From Figma to Live Website in 20 Minutes (No-Code)
21:57
Framer University
Рет қаралды 19 М.
Making Responsive Websites in Framer
18:54
Flux Academy
Рет қаралды 54 М.
小丑教训坏蛋 #小丑 #天使 #shorts
00:49
好人小丑
Рет қаралды 54 МЛН