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.
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?
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
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.
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.
RU-vid 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.
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 :)
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 :)
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
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.
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.
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
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
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
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.
Omg.. why cannot figma just export html, css and js (if needed)? as a dev i'd much likely get a bootstrap html template. Figma should just deliver prepared templates from graphic designers to devs
