Figma for Web Developers

[@nraj7604]

This is perhaps the best Figma intro video in KZbin, and other videos I've watched on this channel are the best at explaining concepts in Figma. I wish I had found this before struggling through Figma for days.

[@CodinginPublic]

Awesome! So glad it was a help. Thanks for saying something!

[@Huntabyte]

Wow, this an incredibly well made video. This is exactly what I was looking for. I have the basics of photoshop/illustrator - but it was not knowing how easy the components/variants/styles make things that gave me a hard time in Figma. Thank you!

[@CodinginPublic]

Hey, wonderful! So glad it was such a help! Thanks for saying something!

[@towatch]

The legend uploaded a video ✌🏻🌟

[@CodinginPublic]

😂 not sure I’m a legend. But I did upload again :)

[@ReplayButton_7518]

you just got a new subscriber here, awesone content, as a developer I had headache with designs for several times, now life can become easier , thank you .

[@CodinginPublic]

So glad it was a help!

[@Brocollipy]

What a great video!! Thanks so much for taking the time to prepare this. I’m a developer and most of the courses are for designers and don’t get to the point quick enough. 👍

[@CodinginPublic]

Awesome. Glad you enjoyed it. That was my goal: short-ish, sweet, and to the point.

[@CoolIntellect]

Wow, seriously, what a cool ride! 😎 The content? Amazing. The tutorial on my best design tool (Figma ❤)? Top-notch stuff! And that design? Incredibly fantastic! 🚀 Great job all around, this was seriously impressive!

[@CodinginPublic]

Thanks so much for the kind words! So glad you found it so helpful! I don't really consider myself a designer, so your comments are especially encouraging. Thanks!

[@lexeroo5514]

Best figma tutorial for web devs I've ever seen ! Thank you very much I finally get this fundamentals ;)

[@CodinginPublic]

That's so encouraging to hear! Thanks for sharing! Glad it was a help in your understanding.

[@sonukumar-fx6xq]

Sir this is the best video i have ever watched about web designing...you are the best teacher for me.. ❤️

[@CodinginPublic]

Hey, wonderful! Thanks for the kind words!

[@MuhammadUzair-vw4hw]

I need this for my front end development journey. Thanks Chris for the video! 😄✨👏

[@CodinginPublic]

You’re welcome! Glad it was a a help! 🙌

[@johantsdev6924]

Thank you for the video !! :) For hidding the layout at 4min40 the shortcut is shift+g on windows

[@CodinginPublic]

You’re welcome. Ah-thanks for the Windows help!

[@Fatima-ie5kj]

Hat's off the best n short tutorial on earth 💓

[@CodinginPublic]

Glad you enjoyed it!

[@lvekua]

Sorry Chris, I never got any time to watch this, and finally I just did. This is an amazing video packed with pretty much everything any dev might need. I will definitely follow up at The Net Ninja channel. Thanks again, awesome content as always ❤

[@CodinginPublic]

Hey, no worries! Glad it was a help! Thanks for the encouragement!

[@felipegutierrez2944]

I learn a lot from this, but i couldn't make the gallery work properly . Great content, i love it!!!

[@CodinginPublic]

So glad you learned a lot! I meant to mention in the video that I intentionally didn't build every component out from scratch to give you a chance at building out the few images out from scratch yourself. I'll try to post the figma file here when I get the chance. Glad it was a help!

[@CodinginPublic]

Posted a link to the rough Figma file here: github.com/coding-in-public/parallax-landing-page-ninja/blob/main/Parallax%20Landing%20Page%20Design.fig Hopefully that helps with any trouble you were having!

[@MaksymMinenko]

The fact that an amazing software like Figma can be used for free is almost unbelievable.

[@CodinginPublic]

Seriously!

[@dodosaurus4875]

exactly what I need right now, bro you are the legend

[@CodinginPublic]

🙌 I got you 👊

[@lvekua]

Thank you Chris 🎊🙌🥳❤️ saved to playlist. Gonna watch it after work hours. Much appreciated 🙏

[@CodinginPublic]

You’re welcome! I’d love to hear any feedback you have!

[@joshmonette4352]

Already know this is gonna be a good one!

[@CodinginPublic]

It was a lot of fun to put together! Learned a lot myself. Hope it’s helpful!

[@joshmonette4352]

@@CodinginPublic Switched over from XD to figma a few months ago now. Find it a lot better for me, and this just helped expand what I can do with it. So thank you!

[@CodinginPublic]

Wonderful! Thanks again for letting me know!

[@0xAdamm]

Great tutorial I’m excited to follow the net ninja portion as well! Can you post a Figma link to the style guide you made, you fast forwarded through the end of the style guide creation.

[@CodinginPublic]

Thanks so much for saying something! I'll see if I can track it down and add it to the description. I meant to mention in the video, but I intentionally skipped past that section in an effort to let you build those few components out using the principles I showed you. Components are complex and it takes a few times. I even have a standalone video coming out JUST on components here in a week or two. Thanks again for the comment. I'll try to remember to upload that file here in a bit.

[@CodinginPublic]

File here! github.com/coding-in-public/parallax-landing-page-ninja/blob/main/Parallax%20Landing%20Page%20Design.fig Sorry it took me a bit!

[@mdkawsarislamyeasin4040]

11 day 🙂 Waiting For your Video now you came with Figma, Great ;

[@CodinginPublic]

Yes :) should be back to a Tuesday and Friday release now. Glad you enjoyed the video!

[@jimmyj.6792]

New awesome video Chris 😍🙏 this will help me so much 😇 nice work 👌

[@CodinginPublic]

So glad to hear! Thanks for taking the time to say something!

[@azizrawat5259]

This is a great tutorial. Thanks man.

[@CodinginPublic]

You're welcome!

[@martinchirino5455]

Thank you so much for your clear explanations. Could you please add the figma link? I learn more when I follow along and I would like to add the styles and components that you added before starting to build the page. Thanks again

[@CodinginPublic]

So glad you've enjoyed it. Sorry it's taken me so long! I added the file to the main branch of the repo for the project I built out for the Net Ninja. You can access it here: github.com/coding-in-public/parallax-landing-page-ninja/blob/main/Parallax%20Landing%20Page%20Design.fig

[@martinchirino5455]

@@CodinginPublic Thanks Chris!

[@JimKernix]

How did you do the gallery image swap? Is the image supposed to be on a frame? I couldn't get that prop to show. I was able to put the text in a box and apply auto layout and set that as a prop, but the image is showing as the fill.

[@JimKernix]

I gave up - I keep trying different methods but I can't seem to get the instance swap for the image

[@CodinginPublic]

So you’ll need to make each image a separate component. (Right-click each and set as a component.) to make it easier to swap, put all those image components in a single frame. Hope that helps!

[@JimKernix]

@@CodinginPublic Ok, let me try that

[@stephencarroll312]

can you do css and html for figma designers who are starting out with basic code usefull for designers please thanks

[@CodinginPublic]

I'm not sure that's in my wheelhouse, but I'll consider it. In the meantime, David Gray on KZbin has some amazing SUPER beginner tutorials for HTML and CSS. I think he's the best at it! HTML: kzbin.info/www/bejne/o3vKc4J_pKycnqM CSS: kzbin.info/www/bejne/pGW1Y3hthJKBndE

[@loulou81400]

Hey, great content as always!! I do some stuff like you, I try to think on the development part when I made designs, thinking flex box, grid layout.. I take time to make my own style guide and I use master component, when I want to change all of my inputs for example I just change this master component and all the inputs change...

[@CodinginPublic]

It does take time to set it all up, but once you do, it makes design a lot quicker-much like setting up a solid design system first.

[@loulou81400]

@@CodinginPublic yes it takes time but I finally save time on my project, I take the time to make it suitable for a lot of design, I can change color of course, border, icons, border radius... I will check the code side of the project on the ninja channel!

[@CodinginPublic]

Totally agree!!

[@JimKernix]

For the boolean prop to show/hide the icon for the components section, my icons are increasing the height of the btn when added. I noticed the height of your btn does not change at all. I added a lot of icons, gave them an auto layout and then added them to a frame but I don't see how that could affect the btn height. Any idea why that would be happening? My icon is set to Fixed for resizing.

[@JimKernix]

And BTW, I know I've been adding a lot of comments so sorry about that. I've watched Figma videos for the past 4-5 days and it's funny how you (a Developer) have the most imformative and useful videos on Figma!

[@CodinginPublic]

No worries! Sorry I’ve been slow to respond. I’m starting to get enough comments where it takes some time to respond to everything!

[@CodinginPublic]

My guess is you’re icons were given some padding when you made them an auto layout? Or they’re just taller than your text. So when you select an icon, double check in the sidebar that there’s no added space around the icons in the auto layout section. And then measure the font height verses the icon height. Does that make sense?

[@JimKernix]

@@CodinginPublic Yes, thanks - I'll check both of those things.

[@JimKernix]

@@CodinginPublic Plus the holidays...

[@js-swift]

A Big Thanks for great content 👍

[@CodinginPublic]

Thanks for taking the time to say something!

[@theSoberSobber]

Thank you so much!

[@CodinginPublic]

You’re welcome! Hope it’s a big help!

[@serychristianrenaud]

THANK

[@CodinginPublic]

YOU 😊

[@richterlau]

definitely loves it. thanks!

[@CodinginPublic]

Glad to hear!