From Figma Units to CSS for Pixel Perfect Layouts

From Figma Units to CSS for Pixel Perfect Layouts - 2 Methods

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

Күн бұрын

bit.ly/3Esd0JN 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you two methods for translating the pixel values used to define things like font size, margin/padding, width/height in Figma, to CSS em and rem values!
The Figma Project Demo:
www.figma.com/community/file/...
The Handover plugin:
www.figma.com/community/plugi...
0:00 - Introduction
0:33 - Learn UI/UX Interactively
1:18 - Getting Started
2:30 - Figuring out Distance in Figma
3:05 - HTML and CSS Setup
3:50 - Why not to use Pixel Values
5:40 - Method 1 (Plugin)
9:33 - Method 2 (62.5% font-size)
12:56 - Final Thoughts
Let's get started!
#figma #css
- - - - - - - - - - - - - - - - - - - - - -
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!

Пікірлер: 45

@DesignCourse Жыл бұрын

Hey all. Check out designcourse.com/css and enter your email to be notified when my new CSS course releases in less than 2 months!

@uiux_musman Жыл бұрын

Sir kindly make a video on Enterprise Web Application Design...how and where to learn and from where to start from scratch. thank you

@CodeNascher_ Жыл бұрын

i use a simple sass function: @function rem($px) { @return #{$px / 16}rem; } then I can say width: rem(160); // width: 10rem;

@PASIN706 Жыл бұрын

this is what we've waiting for , more content like this 💯

@blackpapi6712 Жыл бұрын

great stuff. the way you teach about design makes things a lot easier to understand.

@joshuastories Жыл бұрын

Just found a $20 in an old backpack. Now I have enough for the course. Got the course! Love what you do brother. Thanks!

@parpar8090 Жыл бұрын

This trick is awesome! Thanks for sharing it with us.

@isnintendo8656 27 күн бұрын

This explanation is awesome!! simple and briefly

@joshuastories Жыл бұрын

Your content is absolutely amazing btw

@TheRafiqVi 6 ай бұрын

Very simple to understand and useful topic.

@RodrigoRodriguez-gg5ur Жыл бұрын

Nice video! Just a small advice, it isn't always better to use rem in margins and paddings for accessibility purposes because it reduces the available space for text or other elements to be displayed. I found out by experience that is usually better to only use rems for font-sizes in heavy text websites like blogs.

@anishvr4953 Жыл бұрын

Great content... I expect more from you... Keep Going

@dozieemodi5558 Жыл бұрын

Nice and straight fwd

@outpost31737 Жыл бұрын

Nice one Gaz.

@chupete5596 Жыл бұрын

Hello, I have learned a lot from your videos, thank you very much! I would like to ask you if you know of any way to download an html file of your prototype like the one you download from Invision, but from figma? Tnks!!

@noahdiez9400 Жыл бұрын

Amazing content. I would love to see how front devs convert and work with the grid layout from Figma, and apply it in their web design work.

@abigailbrandon 7 ай бұрын

Yes!!! I’ve been searching for those type of videos!!

@gillbates9668 Жыл бұрын

Love when you do frontend stuff

@alewastaken5989 Жыл бұрын

hey nice vid! By the way whats your vscode theme? Its so pretty!!

@mohsinejaz6882 Жыл бұрын

we can use mixin to convert to rem/em

@snowandcoal Жыл бұрын

What about using 6.25%

@goljivines7356 Жыл бұрын

Also make a video on the UI for displaying information in tables not horibbly

@joshuastories Жыл бұрын

I saved up $50 for course but missed the sale. I hope there’s a sale close or same to that soon

@MauritsWilke Жыл бұрын

wont this have responsiveness issues?

@BobbyBundlez Жыл бұрын

I still don't get this stuff sometimes. I see and have worked with many designs for example where a font-size might go up 20% but the padding or margin will increase by 50% on a larger device. So then all these units relative to font-size get broken.. it almost never works out as conveniently as planned. anyone have a good video that walks through the entire figma handoff -> dev process?

@kyler.6645 Жыл бұрын

"so you don't have to deal with math.." I love your content man and I know you're skilled but you say some of the most wild stuff off the top sometimes.

@DesignCourse Жыл бұрын

I mean, it's a legit comment!

@majoralter Жыл бұрын

How're you moving the camera Such a nice touch

@DesignCourse Жыл бұрын

An edelkrone jib

@njengathegeek Жыл бұрын

That is a pro tip

@MrJettann Жыл бұрын

Hello, Gary! Can you tell me what is the best place to find free and quality figma templates for layout practice and adding it to portfolio? Thanks in advance

@eliastouil7686 Жыл бұрын

Did I misunderstand or do you want to use a free resource as your portfolio? And aren't willing to look for it yourself..?

@MrJettann Жыл бұрын

@@eliastouil7686 I've searched a lot by myself, just looking for quality and interesting templates, which I can use for practice in coding and show of my skills:)

@danielwatson6529 Жыл бұрын

nice technique, this also applies for mobile first doesn't it

@Gubuyguy 3 ай бұрын

Couldn't you just set the root font size to 10px, nstead of 62.5%?

@fishinghunter4030 Жыл бұрын

At 6:15 they are called chevrons.

@DesignCourse Жыл бұрын

There we go!

@MauritsWilke Жыл бұрын

Why 62.5% and not just 10px?

@MrSchizothemia Жыл бұрын

10px will override the user's chosen browser default font size. It's an accessibility issue. 62.5% * 1.6em will always give the user's chosen size, even if it isn't 16px.

@ob7349 Жыл бұрын

@@MrSchizothemia when we should write em and rem, I didnt get it?

@foodher0812 Жыл бұрын

I like you marry me.. so smart

@emotran Жыл бұрын

Wtf is this “wanna be a better designer” “how much you really wanted?” BS? Feels like a 90s infomercial. You don’t need to push brother, we already here, we are already listening, we already trust you. Tell me about the course you have build for me, all in one place, all with a logic order.. all with no ads.. all to help me reach the sky.. that’s all we need

@goshmain982 Жыл бұрын

Good video but you could have done this in 5 minutes, I feel like you are stalling and deliberately making video longer and it feels boring for me, sorry.