Understanding Units (XD to Webflow)

Get the cloneable at webflow.grsm.io/mr-studio
Wizardry resources at wizardry-technique.webflow.io/
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@junningliu9766]

Would love to see more videos like this Tim! Design walkthroughs are incredibly helpful as we get to see your reasoning behind doing things a certain way. Keep up the good work as always :)

[@HanaanHussain]

I second this

[@martijnaanstoot9124]

I third this

[@OlliverW]

This wizardry update blows my mind Timothy! Thanks for this video! 😀

[@chrisrosch4731]

the wizard himself back at it again! love these kind of videos - so much value in 20 minutes. If you could make another one of these in the future I think many people would highly appreciate it! :)

[@nikolatripkovic5322]

Blows my mind on what level you are compared to me! And I still have clients and do good! Shows how much I have in front of me to work for. Thanks so much for a tutorial and please keep up the good work

[@slawekbuczyniak]

Great tutorial T.🤝

[@adekunleolamide6641]

This implementation is superb👏

[@AndresGutierrez-sz2oc]

Super! Great tutorial! Thanks!

[@joergfrank]

Perfect. Thanks for this tutorial. I'm always learning something new out of your posts :)

[@bricepioline2514]

Thanks man !! 🤘🔥

[@RealMehedi]

you just removed my major confusion for using these. I couldnot find proper explanation anywhere... thank you so much for your contents.

[@timothyricks]

I’m so glad this helps! Thank you

[@wearestudiotonic]

Love the speeeeed! Cheers man 😎

[@timothyricks]

Thank you, Tom!!

[@vinceofscandal]

Perfect

[@hrdc_]

Hey Timothy, really great video as always! I almost fully switched to EMs now. I have one question that I can't figure out on my own. I'm working with 1920 artboard size and in the design, I have a container with a max-width of 1280px in one section, but I don't want that container to start scaling down immediately, only when the screen size is smaller than 1280. If I set container max-width to 1280, the font inside of it is not scaling properly, it's breaking in a different number of rows, which pretty much works as pixels units. If I set container max-width to 1920 and give it 320px padding in EMs (around 17em), it's working normally (font is scalling normally), but on smaller screens that section becomes way too small. Is there a way with this method to achieve this thing? Hope you understand what I'm saying, thanks!

[@timothyricks]

Good question! This is part of using fluid type. If your body max font size is 19.2px, the type will keep scaling up until a 1920px screen size. So for any containers that have a smaller max width, the text will start to wrap. You could apply a different max font size to that one container of 12.8px to get all content inside to stop scaling when that container reaches its max width of 1280px. But then an h2 in that container will look smaller on large screens than the h2 in your main container. I personally find that if a smaller container is needed, it’s better most times to let the text wrap, but that’s totally up to your design :)

[@smdconstruction4191]

Thanks for your videos, they are extremely helpful for newcomers like me. I'm not sure what I'm doing wrong, as I copied your exact hierarchy and settings/sizes (minus the photo sizes) and I cannot get the image to wrap below the text responsively like I can with a simple 2 div block grid. It seems to be keeping the text div at 40% of the viewport size and scaling the image div down within the 50% width and stretching both sides vertically. I don't see any difference in your settings in your clone, so is there something that I'm missing?

[@timvanrooyen]

Morning

[@falcodoebler]

Thank you for this awesome tutorial! Is there a way to change the .line-mask color to white after triggering a dark mode toggle (one click animation on a lotto switch) that changes the body color to white? :)

[@emaeshka]

Interesting video. It was interesting to watch the addition of percentages for the images. I want to know what you think. Would it work well if you use wizardry? For example, in the calculator I set the layout size to 1440(max 1920) and the minimum size to 479. I will use EM everywhere (font size, images, indents, roundings and outlines). This is a normal approach? Tell me your opinion

[@michaelirava]

Hey @t.ricks... between Figma & Adobe XD, which of the 2 would you recommend?

[@timothyricks]

Good question! Personally, I feel like Figma is becoming the industry standard. They’re both great tools though!

[@franztruetzschler]

15:03 Why does the image have to be relative positioned?

[@charles6685]

​quick question, do you guys generally use 1920 or 1440px to design? cos i've been using 1920 for a long time, but some of my friends do use 1440 tho.

[@wtfcactus]

i use 1440 just because i design on my laptop, and my browser width is around 1500, so its easier for me to build the website using 1440.

[@lukawalli]

I used to design in 1920, but now I use 1440. Most people use smaller screens, also it helps when designing on the go on my macbook instead of my 32" screen

[@wearestudiotonic]

1440

[@retrospective77]

1920 for me mate. But does it really matter? It's acceptable to have websites that are narrow on larger screens, and if worried about it anyway you could always add larger breakpoints in Webflow with larger Max-Widths. Don't sweat it!

[@franztruetzschler]

05:35 Why is the margin relativ to the font size?

[@mftest7037]

Hi there - what is this plugin you are referencing for unit conversion within WF? Thanks!

[@timothyricks]

Hello, here's the link to the Wizardry Chrome Plugin. chrome.google.com/webstore/detail/wizardry-technique-conver/oggfflpobpmaaolghdfoofejdjldnnjl And here's the tutorial for it. kzbin.info/www/bejne/opfbc2Ohd86Ln8k

[@mftest7037]

@@timothyricks Thanks so much! :)

[@hamzaid9897]

Hi! I thank you so much for these videos .. I have 2 qst 1. why the wizardy technique not working for me after I installed the exentension when I enter setsize1440 webflow consider that as an error 2. in 8:52 why you create the height of div using top padding not the normal height ? thank you again !

[@timothyricks]

So glad these are helpful! For the setsize, hit space bar instead of enter. And for the the height of a div, anytime we set height using % it’s based on the height of the element’s parent so it might not always scale proportionally with the width. If we set top padding instead, it’s related to the width of the parent just like the element’s width is.

[@hamzaid9897]

@@timothyricks hi! thank you for your reply .. now i get it .. and btw the wizardy extension works well ! thank you so much 💛

[@DesignwithCracka]

@@timothyricks that's a neat trick. I find adding aspect-ratio: 1 to the right div's custom CSS works, too. So we won't need to add an extra div with top padding. Your videos are amazing! Thanks a bunch!

[@kumail54]

You're a legend man! Can you tell do I need to know the code to use js animation libraries or is it a plug-and-play kind of stuff? I'm not a coder so need some clarity on this!

[@timothyricks]

Thank you! Knowing some JavaScript definitely helps. You might be able to find different tutorials online for different libraries. Some are easier to customize than others. But learning JavaScript opens up more possibilities.

[@kumail54]

@@timothyricks Thanks bro for your response. Can you recommend few javascript animations library that may help me as a designer?

[@ItsMrxSean]

@@kumail54 threejs

[@kumail54]

@@ItsMrxSean Thanks Sean. Will check it out!

[@slawekbuczyniak]

Hey T. What might be causing an error using wizardry extension? I try to set size of the logo img by typing setsize1440 in width but I get only red sign. No confirmation from the browser that it has been set up correctly. Thanks for the help

[@timothyricks]

Hello! Maybe try hitting the spacebar instead of the enter key.

[@slawekbuczyniak]

@@timothyricks Yes and spacebar + enter to fill the size with ems. Wow! This is a game changer! Thank you :)

[@timothyricks]

@@slawekbuczyniak Awesome!! I’m so glad this helps

[@nabidafarhadooti8409]

I am new at webflow .I have a question. The value wizardry shows is actually vw value according to formula. Then why we use a vw value with em unit. I mean em=78/16=4.875 Vw= 100*78/1440=5.42 Here we use 5.42 in em unit. I am confused. Could anyone please explain me?

[@muhammadazfar6991]

Hi, I'm new to webflow I'm still learning, I have a question, Why can't we directly import the image rather than designing it in webflow because webflow is a developing tool?

[@unpollo93]

I don't know what I'm doing wrong but the extension is not working. Can someone help me?

[@timothyricks]

Hello! Do you see the yellow progress bar when WebFlow loads? If you type 26, space, enter into the width field, what value do you get?

[@unpollo93]

@@timothyricks Yes, i see the yellow progress bar. I deactivate some other extensions and refreshed and now it's working properly. Thank you

[@kyrylo5869]

7:22 help please, how did you drop div block to the right side?? my div block is dropping to the top

[@timothyricks]

It sounds like maybe the flexbox setting of the parent might be set to vertical instead of horizontal. I also have a cloneable link in the description of this video if you’d like to compare the settings

[@kyrylo5869]

@@timothyricks thanks my brother

[@divside]

fucking amazing! Ty from Rus guy