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

Опубликовано: 29 Ноябрь 2024
на канале: DesignCourse
36,539
1k

https://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:
https://www.figma.com/community/file/...

The Handover plugin:
https://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: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/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!