Why not change the 1rem to 10px? Then we won't need the plugin. Just write : html { font-size:62.5%; } Now 1 rem will be equal to 10px. The calculations are easier this way. Hope you like the solution 😅😅
It will be a lot easier to use 8 or 16px grid in this design before coding it. Then you could use something like 0.5rem, 1rem, 2rem etc. Converter/calculator would be needed just in edge cases.
It's nice when you can do a component pixel perfect... But what about the layout? That seems to be the most tricky part for me. How do you perfectly translate from grid/col/rows in figma to css/html?
I have heard about first creating design in figma, Then replicating it in webflow and exporting the code from webflow , this seems really easy but is it really practical and working?
Useful tip: there are browser extensions that allow overlaying on your live web page the exported design. That way you can go about editing the code and see if things are lining up. My personal opinion though is that this "pixel perfect" approach is past its times, in the sense that in this world of a multitude of screen sizes and pixel densities, we either work assigning widths in %, or have grid systems that calculate widths for us, and we take care of the gaps between elements using relative units.
lmfao i just did a website as an internship for the company im working for and did this ALL wrong. figma and the px units made shit sooo complicated. idk why they don't have that plug in already! you also explained em and rem better than anyone ive ever heard.. thank you
Just started the video and I must say I am here for it! Love seeing my three favorite interests collide. Reptiles, UI/UX and front-end development. Ok, now on to the actual video lol.
I think a better way to explain rem units is not that they are equal to 16px, but that 1 rem unit by definition is equal to what the root element's font-size is set to in points and that rem units are useful because they don't relate to the (inheritable) font size of the element they are set to, but to the so called default font size, the root element's font size. Em units by contrast, are relative to the font size set on the same element they are set on, or on the parent element's font size... or so on, depending on where the font-size is defined and inherited from. So ok, just to clarify, em units relate to the last inheritable font-size where 1em = the inherited font-size, and rem units relate to the default font size, set on the html element, not being affected by any other font-sizes set on any other elements. So em's are good to build nested size hierarchies and rems are good to relate to a common fixed size as a base point. Personally I think em's are more useful but if you want a size hierarchy that cannot be screwed up by custom font-size's set on parent elements, rem's are the solution.
I'd be very interested in seeing how a complete website is converted from Figma to a pixel perfect design - now that we have dev mode, does that change anything when it comes to building pixel perfect figma representations in code?
The only plugin I know where we can overlay a static design with a live site/app is pixel perfect on Chrome. However I must also say that making it 100% same is impossible. There is a wide variety of screen sizes/devices nowadays to take into account. As someone else in the comments say, pixel perfection for me is a thing of the past, when websites and apps where in fixed sizes.
Sir your course that u mentioned in the beginning, is it for ui designers or people who now coding. well...? I know some coding.. But i am leanring to be. A ux designer
The issue is that the designers most of the time don't just change elements and put them in in their final shape, but they do most changes in the ui designer, which is bad. Also some images are merged together, and just randomly squeezed to fit in, then the image I, the developer get, is not the same ratio. Or many images are overlapping without considering responsive desing and different mobile phone screen ratios. That's why just getting px is not anymore a solution.
have you ever had issues where the fonts just dont look the same no matter what? is the resolution? and professionally speaking should i just edit the line height so it looks near identical? i have a take home project and i swear my rem units etc are spot on yet it looks slightly off still
Yes, it will display flex box etc. I also think it's better to use auto layout and use rem units in those values, as you'll get an 8point grid naturally in your design. That's not always what you might want, but it's much cleaner to use divisions of 8 than fractions. Compare 6.33rem to 6.25rem or 1.356rem to 1.375rem
Pixel perfect is the opposite of responsive. Hate designers expecting pixel perfect on determined resolution instead of adaptability regardless of the resolution
Does anyone know of a good way to let visitors to a website look through a large amount of photos ie 250+ HD pictures without them having to scroll forever and without them having to load all of them at once?
If there's anything to add based on my process (or change), let me know! This includes plugins / workflows for translating designs!
Why not change the 1rem to 10px? Then we won't need the plugin. Just write :
html {
font-size:62.5%;
}
Now 1 rem will be equal to 10px. The calculations are easier this way. Hope you like the solution 😅😅
It will be a lot easier to use 8 or 16px grid in this design before coding it. Then you could use something like 0.5rem, 1rem, 2rem etc. Converter/calculator would be needed just in edge cases.
It's nice when you can do a component pixel perfect... But what about the layout? That seems to be the most tricky part for me. How do you perfectly translate from grid/col/rows in figma to css/html?
I have heard about first creating design in figma, Then replicating it in webflow and exporting the code from webflow , this seems really easy but is it really practical and working?
@@Tony-jr3ki that's exactly what I am wondering too.
Now I feel bad that I could have had Gary Simon with his Python on my Channel.
You made me want to buy all your courses because you’re the only person who went over getting a very similar html from protypes
Useful tip: there are browser extensions that allow overlaying on your live web page the exported design. That way you can go about editing the code and see if things are lining up.
My personal opinion though is that this "pixel perfect" approach is past its times, in the sense that in this world of a multitude of screen sizes and pixel densities, we either work assigning widths in %, or have grid systems that calculate widths for us, and we take care of the gaps between elements using relative units.
can you tell me how could i research about these different approaches? like, what kinda tutorials could i watch to get a better understanding
@@lovelyy6491 same pls!!
Tell that to my Japanese clients, please.
They still live in the 80s.
Now I can confidently say that I understand rem and em units and when to use them!! Thank you so much!
It's figma to Python I guess 😉
That was actually a great intro on REM/EM. I don't do much frontend so I never actually knew what 1 REM was.
lmfao i just did a website as an internship for the company im working for and did this ALL wrong. figma and the px units made shit sooo complicated. idk why they don't have that plug in already!
you also explained em and rem better than anyone ive ever heard.. thank you
The easiest explanation of rem and em that I've seen, will share if I got asked about it again. First time I learned it was kinda mesmerizing.
Should follow Kevin Powell, you would have found out 4 years ago: ua-cam.com/video/_-aDOAMmDHI/v-deo.html
Just started the video and I must say I am here for it! Love seeing my three favorite interests collide. Reptiles, UI/UX and front-end development. Ok, now on to the actual video lol.
Always a pleasure when fun and learn acts together.
Petition for the snake to be in every intro...
I think a better way to explain rem units is not that they are equal to 16px, but that 1 rem unit by definition is equal to what the root element's font-size is set to in points and that rem units are useful because they don't relate to the (inheritable) font size of the element they are set to, but to the so called default font size, the root element's font size. Em units by contrast, are relative to the font size set on the same element they are set on, or on the parent element's font size... or so on, depending on where the font-size is defined and inherited from. So ok, just to clarify, em units relate to the last inheritable font-size where 1em = the inherited font-size, and rem units relate to the default font size, set on the html element, not being affected by any other font-sizes set on any other elements. So em's are good to build nested size hierarchies and rems are good to relate to a common fixed size as a base point. Personally I think em's are more useful but if you want a size hierarchy that cannot be screwed up by custom font-size's set on parent elements, rem's are the solution.
Thanks, I understood this better
em: similar to rem but it use the font-size of current element or inherit of parent
rem: when html have font-size: 16 then 1rem = 16px
Pixel perfect python 😁
I'd be very interested in seeing how a complete website is converted from Figma to a pixel perfect design - now that we have dev mode, does that change anything when it comes to building pixel perfect figma representations in code?
Thanks for explaining difference between px, em, and rem units :)
Love how Gary’s head just floats there.
The snake was headed towards the mouse.
This snake has very big pixels 😏
No where near as big as the 17'er in my basement! pbs.twimg.com/media/E5uJaW_XEAIhjcU?format=jpg&name=large
@@DesignCourse DAAAYUUUM that is one BIG snake hooollyy
@@DesignCourse What do you really pet pythons?
The only plugin I know where we can overlay a static design with a live site/app is pixel perfect on Chrome. However I must also say that making it 100% same is impossible. There is a wide variety of screen sizes/devices nowadays to take into account. As someone else in the comments say, pixel perfection for me is a thing of the past, when websites and apps where in fixed sizes.
I learn great tip today thanks to you gary keep up the good work
Does it work for Adobe XD tho.
Yep
Thanks Gary, this is a lesson very important for me
Gonna use this technique to build my upcoming projects!!!
html: font:size: 0.625rem => makes root size 10px (0.625*16px).
So 100px will be 10rem in your body.
My most severe phobia for an intro. Yay
another way to set width for paragraph text is with "ch" units so u can preserve line breaks like design
nice kemper, I heard absolutely nothing for the first 30 seconds i was staring at it so much
Awesome
Awesome video 🔥🔥. Can we use rem units everywhere.Will that be a bad practice??
For setting width, max-width, % is the most ideal unit.
Thank you so, so much for this wonderful content!
Why did you use margin for the H1 instead of padding
**unrelated snake integration** lmao
this helps me a lot, thank you! so would rem/em be the best option even if you're not pulling layout information from Figma?
Awesome Stuff!!!! Yay! thank you so much!!
❤ thank you so much
What ever happened to Adobe Dreamweaver... I remember learning it in 8th grade in my media clasd
Sir your course that u mentioned in the beginning, is it for ui designers or people who now coding. well...? I know some coding.. But i am leanring to be. A ux designer
The issue is that the designers most of the time don't just change elements and put them in in their final shape, but they do most changes in the ui designer, which is bad. Also some images are merged together, and just randomly squeezed to fit in, then the image I, the developer get, is not the same ratio. Or many images are overlapping without considering responsive desing and different mobile phone screen ratios. That's why just getting px is not anymore a solution.
have you ever had issues where the fonts just dont look the same no matter what? is the resolution? and professionally speaking should i just edit the line height so it looks near identical? i have a take home project and i swear my rem units etc are spot on yet it looks slightly off still
Thank you very helpful 👏
The Python guy in real life 🐍🐍
Is there a benefit to using font-size:16px over font-size: 100% I would feel 100% would be better for the user.
Seems more useful this way than with Anima. But what about with Zeplin?
Thanks.
I like your channel so I've decided to bombard it with comments.
guys what scale of frame are u usually using in figma to get like the google web dimensions
I thought line-height was dimensionless - that you can just use a number like 1.4. Why use REM for that?
Awesome thanks
Would using Figma's Auto Layout feature change what appears in the inspect sidebar? Is that more helpful for developers?
Yes, it will display flex box etc. I also think it's better to use auto layout and use rem units in those values, as you'll get an 8point grid naturally in your design. That's not always what you might want, but it's much cleaner to use divisions of 8 than fractions. Compare 6.33rem to 6.25rem or 1.356rem to 1.375rem
Pixel perfect is the opposite of responsive. Hate designers expecting pixel perfect on determined resolution instead of adaptability regardless of the resolution
good edit snake 😆😆😆😆😆😆
My pixel perfect is
Ctrl+G => Export => Export as png
Thank you
Does anyone know of a good way to let visitors to a website look through a large amount of photos ie 250+ HD pictures without them having to scroll forever and without them having to load all of them at once?
What.... Python with Garry Simon😱
thanksssssss
Perfect
Where are you Gary?
12:03 why did you put 28 on the line height field?
because that's what the design has
At first I was like "This is clickbait, This guy was supposed to be talking about frontend, Then why is he showing PYTHON????"
Your head is floating. Again
Wh-what was that intro...?
I like sneks.
I'm gonna head out. Peace~~~~
We need you @Garry Simon. Don't let this reptile to choke you
Ho..... Python......
insta like 4 the snake
😬
Yall don‘t know about plasmic.app