From Figma to (Near) Pixel Perfect Frontends

Рет қаралды 40,298

Күн бұрын

bit.ly/3hmTKkK - Become a frontend developer (50% off limited time!)
-- Want to learn UI/UX? designcourse.com
-- Today, I'm going to show you a workflow for accurately translating Figma layouts to near-pixel perfect results in the browser. This process involves converting pixel values based on typography and spacing withing Figma, to em and rem units on the frontend.
0:00 - Introduction
0:26 - An Awesome Offer
1:10 - Getting Started
3:30 - Converting Px to Em/Rems
5:29 - Hand over Plugin
15:30 - Is it pixel perfect?
16:33 - Responsive Considerations
18:00 - Closing
Let's get started!
#figma #frontend #pixelperfection
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 93

@DesignCourse 3 жыл бұрын

If there's anything to add based on my process (or change), let me know! This includes plugins / workflows for translating designs!

@RajatSharma-rs2vw 3 жыл бұрын

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 😅😅

@blackcatdev 3 жыл бұрын

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.

@Tony-jr3ki 2 жыл бұрын

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?

@karanzawar8121 2 жыл бұрын

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?

@DanieleManca1983 Жыл бұрын

@@Tony-jr3ki that's exactly what I am wondering too.

@francescociulla 3 жыл бұрын

Now I feel bad that I could have had Gary Simon with his Python on my Channel.

@lorrieuiux5802 3 жыл бұрын

Now I can confidently say that I understand rem and em units and when to use them!! Thank you so much!

@mattmjlg5053 Жыл бұрын

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

@lorrieuiux5802 3 жыл бұрын

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.

@timr86868 3 жыл бұрын

That was actually a great intro on REM/EM. I don't do much frontend so I never actually knew what 1 REM was.

@unleashthedog 3 жыл бұрын

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.

@lovelyy6491 3 жыл бұрын

can you tell me how could i research about these different approaches? like, what kinda tutorials could i watch to get a better understanding

@danianla12 2 жыл бұрын

@@lovelyy6491 same pls!!

@gonkong5638 2 жыл бұрын

Tell that to my Japanese clients, please. They still live in the 80s.

@aniketjoshi7518 3 жыл бұрын

It's figma to Python I guess 😉

@muddasirvanekar6686 3 жыл бұрын

Always a pleasure when fun and learn acts together.

@LetsRocka 3 жыл бұрын

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.

@unleashthedog 3 жыл бұрын

Should follow Kevin Powell, you would have found out 4 years ago: kzfaq.info/get/bejne/lZORd7JystOoeH0.html

@enraihakanagi8547 2 жыл бұрын

Thanks for explaining difference between px, em, and rem units :)

@samueladdisu3729 3 жыл бұрын

I learn great tip today thanks to you gary keep up the good work

@EnyelberAltube 3 жыл бұрын

Thanks Gary, this is a lesson very important for me

@murat6018 2 жыл бұрын

Thank you so, so much for this wonderful content!

@BobbyBundlez 3 жыл бұрын

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

@saurabhdaswant7833 2 жыл бұрын

Gonna use this technique to build my upcoming projects!!!

@hroman_codes 2 жыл бұрын

Thank you very helpful 👏

@saurabhdaswant7833 2 жыл бұрын

Awesome Stuff!!!! Yay! thank you so much!!

@richiemugambi9487 3 жыл бұрын

Petition for the snake to be in every intro...

@PaulSebastianM 3 жыл бұрын

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.

@seangrogan3622 Жыл бұрын

Thanks, I understood this better

@user-nt9lr3wx8m 3 жыл бұрын

Awesome thanks

@akiij 3 жыл бұрын

another way to set width for paragraph text is with "ch" units so u can preserve line breaks like design

@lovelyy6491 3 жыл бұрын

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?

@DhruvPrajapatiOfficial 3 жыл бұрын

Awesome

@milon27 3 жыл бұрын

Thank you

@tienlx91 3 жыл бұрын

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

@theisoj 3 жыл бұрын

Thanks.

@abdulrahmanalothman9698 3 жыл бұрын

Perfect

@nidarahman2305 3 жыл бұрын

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

@stevezct 2 жыл бұрын

thanksssssss

@sohaibfurqan Ай бұрын

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?

@it-s-me-mohit 3 жыл бұрын

Awesome video 🔥🔥. Can we use rem units everywhere.Will that be a bad practice??

@suyashrahatekar4964 3 жыл бұрын

For setting width, max-width, % is the most ideal unit.

@YLLIEEGD 3 жыл бұрын

guys what scale of frame are u usually using in figma to get like the google web dimensions

@ciaranutting 3 жыл бұрын

Would using Figma's Auto Layout feature change what appears in the inspect sidebar? Is that more helpful for developers?

@Potatis1337 2 жыл бұрын

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

@WebAnimations 3 жыл бұрын

Pixel perfect python 😁

@kyleHunter1986 2 жыл бұрын

Is there a benefit to using font-size:16px over font-size: 100% I would feel 100% would be better for the user.

@DanieleManca1983 Жыл бұрын

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.

@zahidshaikh3122 3 жыл бұрын

The snake was headed towards the mouse.

@FurikuriYugi 3 жыл бұрын

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?

@rabindrajoshi9258 2 жыл бұрын

html: font:size: 0.625rem => makes root size 10px (0.625*16px). So 100px will be 10rem in your body.

@JimKernix 3 жыл бұрын

I thought line-height was dimensionless - that you can just use a number like 1.4. Why use REM for that?

@Cybah 3 жыл бұрын

This snake has very big pixels 😏

@DesignCourse 3 жыл бұрын

No where near as big as the 17'er in my basement! pbs.twimg.com/media/E5uJaW_XEAIhjcU?format=jpg&name=large

@Cybah 3 жыл бұрын

@@DesignCourse DAAAYUUUM that is one BIG snake hooollyy

@sunilthapa3952 3 жыл бұрын

@@DesignCourse What do you really pet pythons?

@n3cro2012 3 жыл бұрын

Love how Gary’s head just floats there.

@patlecat 2 жыл бұрын

Seems more useful this way than with Anima. But what about with Zeplin?

@dzamija922 2 жыл бұрын

nice kemper, I heard absolutely nothing for the first 30 seconds i was staring at it so much

@elle381 2 жыл бұрын

My most severe phobia for an intro. Yay

@jakariarakib2172 2 жыл бұрын

good edit snake 😆😆😆😆😆😆

@Philson 3 жыл бұрын

Does it work for Adobe XD tho.

@DesignCourse 3 жыл бұрын

Yep

@drewstifler1440 2 жыл бұрын

12:03 why did you put 28 on the line height field?

@davidomar742 2 жыл бұрын

because that's what the design has

@lamphrangmilamin2966 3 жыл бұрын

The Python guy in real life 🐍🐍

@dgloria 3 жыл бұрын

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.

@BobbyBundlez 3 жыл бұрын

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

@SCTproductionsJ5 Жыл бұрын

What ever happened to Adobe Dreamweaver... I remember learning it in 8th grade in my media clasd

@josephnetherland880 2 жыл бұрын

I like your channel so I've decided to bombard it with comments.

@theroland6503 3 жыл бұрын

**unrelated snake integration** lmao

@braham.prakash 3 жыл бұрын

My pixel perfect is Ctrl+G => Export => Export as png

@sunilthapa3952 3 жыл бұрын

What.... Python with Garry Simon😱

@xiangzhou8188 3 жыл бұрын

I'm gonna head out. Peace~~~~

@BMikel 3 жыл бұрын

We need you @Garry Simon. Don't let this reptile to choke you

@moviekazi1536 2 жыл бұрын

At first I was like "This is clickbait, This guy was supposed to be talking about frontend, Then why is he showing PYTHON????"

@hewrchelsea6622 3 жыл бұрын

Your head is floating. Again

@omerta3393 3 жыл бұрын

Where are you Gary?

@hellfishii 3 жыл бұрын

insta like 4 the snake

@toast34 3 жыл бұрын

Wh-what was that intro...?

@DesignCourse 3 жыл бұрын

I like sneks.

@vishaalka3529 3 жыл бұрын

😬

@rahavareddy5510 3 жыл бұрын

Ho..... Python......

@smaudd7873 3 жыл бұрын

Pixel perfect is the opposite of responsive. Hate designers expecting pixel perfect on determined resolution instead of adaptability regardless of the resolution