Love your content!! Pro tip: if you have single monitor, PLEASE, standardize on Win+1, Win+2.. shortcuts! Have first icon in taskbar VS Code, second one Chrome. You will never have to mouse to taskbar and switch to see your result. It will also speed up flow in showing users the result. Mine are (Linux and Windows): Win+1 - Terminal Win+2 - Communication (MS Teams) Win+3 - Chrome Win+4 - VS Code
this tool is amazing if you already know how to code, because it removes a lot of the guess work, and you just have to adjust your code accordantly, this tool will not replace a developer at all.
I don't know if you noticed, but this video is great for intermediate beginners like me. You show each step of what's wrong and how to fix it. I learned a few things from this video: 1. Default scale of a webpage content is 16px. 2. Using rem instead of absolute px. 3. What to do when you see an absolute px unit and convert it to rem units (px/default scale=rem). 4. When to use "margin: 0;" (to center the exclamation mark with the title). 5. Using gap. 6. Flexbox child to align-self: center; (I will need to study more about that one). Thanks!
I think number 2 is a good thing to consider and we should use rem a lot more than most devs use, specially when dealing with dimentions for text and text oriented elements in the ui, but px is still relevant in some cases and other units like % or vw/vh can be the best fit when treating responsiveness.
`Flexbox child to align-self: center` is a really straightforward concept, it's used to align the child element vertically (left, center, right) within it's flex container instead of the default horizontal alignment (usually flex-start). Align-self can be used on almost all nested item to align itself within the context of it's container, there's a few extra thing you can do with flexbox but the core concepts are the same.
@@arthurbonatti1238 This is a good thing to point out. I generally use a mixture of %, rm, and px. It really depends on what I want to do, as each has it's own benefits and drawbacks. Overall though, I think it's beneficial for developers to implement units in rm, as it outputs to an appropriate pixel size without you having to do the math. For the majority of a site, I'm using rm as I just need it to be readable regardless of screen size. Percentage I mostly use to define margins and other alignments for containers where I know that I always want the relationship between the items to be the same percentage on any or all devices. Px gets used generally only if I want to display something at it's original (or a specific) size, or if I'm defining styles for different aspect ratios separately within the project.
It's nice to be able to inspect the Figma design from within the IDE but most developers will expect the Figma extension to export the HTML and CSS for them (let alone JavaScript, SASS or Tailwind). Still early days so hopefully they will add that.
RUclips is so smart. I was suffering with a pain of toggling between figma design and vs code and then my own frontend UI on browser. This video popped out for help. Thank you very much for such amazing tips. Figma extension was the best one ❤️
we are getting closer and closer to the obvious need....to just simply be able to export figma design into code seamlessly (at least for html, css and javascript for interaction and movement) but its still an awesome upgrade. at least you code it side by side with a little help to get what you need.
I don't really see any benefit over the previous figma without dev mode apart from having a VS Code plugin. You still copy everything by hand and have to decide where to paste it in your code. Am I missing something?
Thank you for the excellent content you give us.And you are the best Lecturer for teaching concepts and how to apply them.Your content has helped me a lot on my UX/UI journey and Web development
I'll tell you what's gonna happen, figma will integrate gpt4 and convert raw css into any css framework of your choice! I am waiting to comment again in few months saying I told you so :)
Well, I think its intentional that border radius isn't described in rem units. The border radius shouldn't change based on how people prefer to see font size.
Hey Gary! The new DevMode is a pretty useful feature and makes things a lot easier. Thanks for the good introduction! There's something else that really interests me: Where do these gray auto-fill properties in VSC come from, that shortly pops up like at around 12:18 when you wrote the selector for the h1 element? Thanks a lot! Mike 🦩
There is a setting in VSCode that you can check to have the Figma extension generate predictive codeblocks for you. I can't remember how to activate that setting, but that's what you're seeing in the video
I will say my opinion, and I want your opinion, Simon, now about the new updates and developments. I strongly believe that the web industry and that industry must be entered into by learning the programming language, because the work of the designer will be easy for any developer, and the hardest part will be in the developers and the design will be much easier than we can imagine, so whoever loves the field of uiux must He has to be a developer
Why did you specify the first button as a.cta instead of just cta, when the second button's class was cta secondary? What does the "a." mean? I'm a new ux/ui designer who is also learning to code into html, css, and javascript.
So if I understand correctly, it is like Dreamweaver, but better, yes? Apologies for the silly question, I'm very new, and try to understand UI/UX design and the simplest way to convert it to a website. Thank you :)
I love your content! it's amazing! I have a question! What would be the best roadmap to follow for a junior ui designer? Your answer would be a great help.
Wow, this looks amazing. Always nicely and timely. One query i have is, you put margin bottom for h1 rather than putting margin top for below paragraph. I always teach my juniors to not to use margin bottom if your element is not last one. Put same top margin on following element. You can say like convention to follow always as top to bottom. What do you think and guys here ?
Personal opinion, this looks like a gimmick rather than a feature. Because if you are little bit experience it would be much faster if you use tailwind for css rather than copying every elements css from figma.
Not everyone uses or likes Tailwind. Plus, if you want near pixel-perfect translation, you still need to know what the padding/margin/white space/font size values are even when using tailwind.
Hes right^ … as a dev I’ve used styled components , emotion and tailwind for css equally in my career and tbh tailwind ends up being just as fast as my process with styled components / emotion. Not faster or slower for many things. Sometimes it is easier to write your css out. It really depends there are pros and cons. Often setting up a global tailwind class library though and extending things etc takes longer than with styled components / emotion. I will say once you have that set up with tailwind though it does flow pretty quickly
Now that adobe have bought them I’m seeing all these annoying pop up’s and tooltips. Figma used to be so intuitive you didn’t need them. The community isn’t free assets anymore. Adobe are money hungry grubs.
Dev Mode Sucks. There has been already CSS/TailwindCSS plugins before Dev Mode comes out. The only thing you can reference from the Figma is size and color stuff.. So not smart mode
Who's tried the new dev mode? Also, keep an eye out on next week's videos where we check out advanced prototyping, variables and more.
Love your content!! Pro tip: if you have single monitor, PLEASE, standardize on Win+1, Win+2.. shortcuts! Have first icon in taskbar VS Code, second one Chrome. You will never have to mouse to taskbar and switch to see your result. It will also speed up flow in showing users the result. Mine are (Linux and Windows):
Win+1 - Terminal
Win+2 - Communication (MS Teams)
Win+3 - Chrome
Win+4 - VS Code
this tool is amazing if you already know how to code, because it removes a lot of the guess work, and you just have to adjust your code accordantly, this tool will not replace a developer at all.
I don't know if you noticed, but this video is great for intermediate beginners like me. You show each step of what's wrong and how to fix it.
I learned a few things from this video:
1. Default scale of a webpage content is 16px.
2. Using rem instead of absolute px.
3. What to do when you see an absolute px unit and convert it to rem units (px/default scale=rem).
4. When to use "margin: 0;" (to center the exclamation mark with the title).
5. Using gap.
6. Flexbox child to align-self: center; (I will need to study more about that one).
Thanks!
I think number 2 is a good thing to consider and we should use rem a lot more than most devs use, specially when dealing with dimentions for text and text oriented elements in the ui, but px is still relevant in some cases and other units like % or vw/vh can be the best fit when treating responsiveness.
`Flexbox child to align-self: center` is a really straightforward concept, it's used to align the child element vertically (left, center, right) within it's flex container instead of the default horizontal alignment (usually flex-start).
Align-self can be used on almost all nested item to align itself within the context of it's container, there's a few extra thing you can do with flexbox but the core concepts are the same.
@@arthurbonatti1238 This is a good thing to point out. I generally use a mixture of %, rm, and px. It really depends on what I want to do, as each has it's own benefits and drawbacks. Overall though, I think it's beneficial for developers to implement units in rm, as it outputs to an appropriate pixel size without you having to do the math.
For the majority of a site, I'm using rm as I just need it to be readable regardless of screen size.
Percentage I mostly use to define margins and other alignments for containers where I know that I always want the relationship between the items to be the same percentage on any or all devices.
Px gets used generally only if I want to display something at it's original (or a specific) size, or if I'm defining styles for different aspect ratios separately within the project.
It's nice to be able to inspect the Figma design from within the IDE but most developers will expect the Figma extension to export the HTML and CSS for them (let alone JavaScript, SASS or Tailwind). Still early days so hopefully they will add that.
RUclips is so smart. I was suffering with a pain of toggling between figma design and vs code and then my own frontend UI on browser. This video popped out for help. Thank you very much for such amazing tips. Figma extension was the best one ❤️
we are getting closer and closer to the obvious need....to just simply be able to export figma design into code seamlessly (at least for html, css and javascript for interaction and movement) but its still an awesome upgrade. at least you code it side by side with a little help to get what you need.
There are already sites that does this no? Not exactly figma but WebFlow lets you design websites similar to Figma
@@philippemathewdevera9911 yeah but you can't download the source files
@@patrickudoh7732 you can download the source code tho which is enough
I don't really see any benefit over the previous figma without dev mode apart from having a VS Code plugin. You still copy everything by hand and have to decide where to paste it in your code. Am I missing something?
Exactly. Looks like it is not really different from just having Figma window next to editor
Yeah, I feel dumb for having so much hope in a free plugin.
Definitely excited for these new features!
There was a tailwind option instead of CSS as I remember, can you explain that in a video too? I wonder how it will work.
Great tight explanation. Just watched an official Figma YT video and it was PowerPoint hell.
Thank you for the excellent content you give us.And you are the best Lecturer for teaching concepts and how to apply them.Your content has helped me a lot on my UX/UI journey and Web development
I think having auto layout would help devs identify which row/column should be implemented.
I'll tell you what's gonna happen, figma will integrate gpt4 and convert raw css into any css framework of your choice! I am waiting to comment again in few months saying I told you so :)
a feature that's beyond perfect!!! Thank you so much for your labor.
The decimals in the rem values hurt my design brain! Great video, I can only see dev mode getting better and better.
All I can say is thank you 😢😢
Great! Thank you for the content. Very helpful. Figma + Dev in progress Yahoo! :)
Well, I think its intentional that border radius isn't described in rem units. The border radius shouldn't change based on how people prefer to see font size.
keep going sir that's really super fantastic
Hey Gary!
The new DevMode is a pretty useful feature and makes things a lot easier. Thanks for the good introduction!
There's something else that really interests me:
Where do these gray auto-fill properties in VSC come from, that shortly pops up like at around 12:18 when you wrote the selector for the h1 element?
Thanks a lot!
Mike 🦩
There is a setting in VSCode that you can check to have the Figma extension generate predictive codeblocks for you. I can't remember how to activate that setting, but that's what you're seeing in the video
Thank you for this video, I will give it a try.
I will say my opinion, and I want your opinion, Simon, now about the new updates and developments. I strongly believe that the web industry and that industry must be entered into by learning the programming language, because the work of the designer will be easy for any developer, and the hardest part will be in the developers and the design will be much easier than we can imagine, so whoever loves the field of uiux must He has to be a developer
Why did you specify the first button as a.cta instead of just cta, when the second button's class was cta secondary? What does the "a." mean? I'm a new ux/ui designer who is also learning to code into html, css, and javascript.
so this new innovation is still just recreating the design pictures in code, like using Zeplin or something to read the values?
So if I understand correctly, it is like Dreamweaver, but better, yes? Apologies for the silly question, I'm very new, and try to understand UI/UX design and the simplest way to convert it to a website. Thank you :)
Seams like it to this old timer
Hey guys, Loving the video so far but I wasn't able to see the full description of the path for the SVG viewbox. Does anyone know what it could be?
Nice features
Great material!! I was doing so well until the rem part 😵💫. So much stuff to learn! Thanks for sharing your knowledge, thou.
I love your content! it's amazing! I have a question! What would be the best roadmap to follow for a junior ui designer? Your answer would be a great help.
This is cool, i like it
gracias! al día con la nueva actualización
what's your vs code theme? i love it 💚
Wow, this looks amazing. Always nicely and timely.
One query i have is, you put margin bottom for h1 rather than putting margin top for below paragraph. I always teach my juniors to not to use margin bottom if your element is not last one. Put same top margin on following element. You can say like convention to follow always as top to bottom. What do you think and guys here ?
I thought figma had a bunch of plug-ins and ways to export HTML and css?
What is allowing this page to be responsive exactly?
Figma inventing next level
They ate Zeplin
How do you display the code panel vertically?
Please create some videos on FlutterFlow
how to convert figma prototype animation code to vs
I wait this feature for long time ! Happy to see it’s here !
@DesignCourse I have a problem finding my page bar that's supposed to be at the left side of my screen. please help me
on my figma file
This is awesome
Damn! You gotta give us more examples on how to do this lol
amazing
So basically you still do everything yourself?? With GPT already here, and all that, I really expected a bit more from DevMode...
there are not free anymore~
Personal opinion, this looks like a gimmick rather than a feature. Because if you are little bit experience it would be much faster if you use tailwind for css rather than copying every elements css from figma.
Not everyone uses or likes Tailwind. Plus, if you want near pixel-perfect translation, you still need to know what the padding/margin/white space/font size values are even when using tailwind.
Hes right^ … as a dev I’ve used styled components , emotion and tailwind for css equally in my career and tbh tailwind ends up being just as fast as my process with styled components / emotion. Not faster or slower for many things. Sometimes it is easier to write your css out. It really depends there are pros and cons. Often setting up a global tailwind class library though and extending things etc takes longer than with styled components / emotion. I will say once you have that set up with tailwind though it does flow pretty quickly
Use a UI library instead...
Now that adobe have bought them I’m seeing all these annoying pop up’s and tooltips. Figma used to be so intuitive you didn’t need them. The community isn’t free assets anymore. Adobe are money hungry grubs.
It's understandable though, being that more features are being added.
👏
GOOD
the take-away message from this video: the Figma Dev mode / plugin doesn’t do much for you. It’s pretty useless atm
Dev Mode Sucks. There has been already CSS/TailwindCSS plugins before Dev Mode comes out. The only thing you can reference from the Figma is size and color stuff.. So not smart mode
who the heck uses rem for widths and heights
Everybody :) Simply because of consistency between element size and text size. When device use different value for rem, we do not have a problem.
Bro, lol, your mind runs all over the place! Lol!