This is fantastic! As a Figma user I love how you can design all three sizes at once and pretty much be done. This is going to save a lot of time. Thanks for sharing.

Super helpful video! I think it would be useful if throughout the video we could see the Layers tab rather than the Pages tab on the left, so we get a better idea of how the layers are nested and everything.

The technique of min-width and wrap helps a lot even with plain html css. Thank you for the tutorial

Awesome content, just started to use it a few days ago for my UI/UX design portfolio and projects

Great tutorial on Framer, I loved it!

Thank you very much for providing such clear instructions.

really nice, all the basics are covered for beginners

Best tutorial I've seen :) Thank you!

This is the hardest video/feature to learn in framer for me.

AWESOME! Thanks Man!

Great video! Thanks a lot! 🙏

Awesome tutorial

Really Really helpful!!!

Great tutoriual. wish your head thumbnail wasnt covering the user interface . should have at least shifted it the left side of the screen as there wasn't much there that you were talking about.

You are a genius ❤

this is useful asf!

You're a great and chill teacher. Too bad that can't be said about everybody trying to show how things are done.

god bless you man ❤👏

Wrap is a gamechanger. Might not work for 100% of the sites you build but it will for a healthy percentage

So if I understand it correctly, all the settings for the breakpoints you do on the Desktop frame and it will automatically appear/adjust on the smaller breakpoints that u add? So in the end you want to only fiddle around with the Desktop frames and not in each device frame individually? This seems to be a very efficient way of working! So thanks for explaining!

@dannydiscovers

10 ай бұрын

You are mostly correct. When you adjust something on the smaller screen sizes/breakpoints it will override the changes made on desktop. Generally setting up everything to be responsive on desktop first before even creating the other breakpoints is best-practice. You can then fiddle with them and override as needed.

guys! please make in depth tutorial video on e-commerce...from scartch to handing over

I have a question regarding breakpoints that I am struggling a bit with. I see you have set you main desktop at 1600px but that makes a tablet size 1599 and small which is not really right. I tend to stick with there default size but after years of designing at 1440 it doesn’t feel right. I don’t want a tablet breakpoint triggering at 1439 🤷🏼‍♂️

@B_Migs

7 ай бұрын

I'm sure you figured this out by now, but Framer has a dumb way of labelling their break points, they even mention how it may not make sense on their own info page, but that you are supposed to think of the original break point number as "And up." This means if your mobile break point is 390, it'll be mobile layout from 390 up til the tablet break point. I agree with you that it makes no sense how it is shown.

Does it make sense to use a wrapper(container) for all the blocks so they fill in the full width of the wrapper but wrapper itself is set to fixed width? Thanks!

It's driving me nuts that you are not showing the layers. There are small things that are confusing, like what layer or stack you are on when adding the wrap. Other than that, this is helpful, just confusing at times.

@Rio-by1eh

Ай бұрын

What kills me, with most you-tubers is they are simply describing what is on the screen and actually not Explaining …I mean everybody can say “I’m going to move this here” that has no educational value …

7.02 So is the hero stack the same as a section, the content stack the same as a container and the 2 stacks below equivalent to div blocks?

🎉 I want to learn about framer and who do I see.... You Danny Sapio

I'm a beginner, just tried framer, I want to ask, in the section that discusses grids, can that be applied if the component is integrated with cms?(card increases automatically when cms is updated) Sorry, this is the result of the translation if it's hard to understand 😅

@dsapio

10 ай бұрын

Yeah works as well in the CMS grids the same way as shown here

Great video, but I was surprised you missed displaying the layers panel, it made this more tutorial more difficult. Also, you could have your little video at a space where you do not cover important content. I appreciate your efforts.

@FluxAcademy

Ай бұрын

Thanks for the feedback

I like that Flux touches on Framer tutorials as well. I'm not a fan of Webflow.

@FluxAcademy

Жыл бұрын

Thanks for letting us know!

Does anyone know what software we should use to record the screen like this tutorial video (from 0:27)?

Is it free software to build any types of Websites.

yea mine just wont let me select fill, ive been stuck on this project for days i have no idea what to do

I'm not sure why but somehow my grid columns jump from showing 2 cards to 1 for tablet and then all of a sudden 2 again to finally go back to 1 column again.. I've tried everything but I can't find the problem.. Anyone an idea why that is? Tablet and phone breakpoints should result in 1 column. The grid layout is set to 'Auto'.

@pris.v

4 ай бұрын

having the same problem, cards on desktop don't show as they should, then on tablet version they are hidden, can't fix this really.- did you find a solution?

Is it as responsive as an html website?

Is the “STACK” another term for a “DIV “…?

spent close to 7 hours on tutorials for responsivenesss, i follow the steps flawlessly and somehow it doesnty wortk. Getting incredibly frustrated with this builder, have a deadlin e coming up. Can anyone help?

@creamdonutco

6 ай бұрын

This is the hardest part

thank bro but the fact u ae on page tab instead of layers are make it difficult

How to use responsive web design in figma

This video was informative but at the same time annoying... You explain how to do some stuff then just drag over premade stuff from an existing template? Like creating the card components... Would have been nice if you re-made all components again for the tutorial instead of saying "heres one i built earlier" and dragging it over.