Convert A Figma Design To A Real Website (HTML) - Part I

Convert A Figma Design To A Real Website (HTML) – Part I



Hi, in this video, I will show you how to convert a Figma design to a real website using HTML and CSS and some JavaScript. This is the first part of the video series. In this part we will cover the HTML. In the next part we will work with the CSS and JavaScript.

Figma File:
Link of Figma Design video:
Next Video (CSS & JS):
Link of the complete Playlist:

Source code:

If you liked this video, please click on the LIKE button and subscribe to this channel for notifications.

47 thoughts on “Convert A Figma Design To A Real Website (HTML) – Part I

  1. Hi guys, check out my new class on Skillshare (Design An Image Gallery From Scratch Using HTML, CSS & JS – with Lightbox): https://skl.sh/3zc7zZS

    Hope you find it useful.

  2. Thank you so much for this great video.
    I just want to ask that how do you code a website on a 1920*1080 resolution screen, when the design's frame size is 1440 ? I mean how do you maintain the font sizes, size of images, etc?

  3. the only thing I didnt understand was at the beginning when you say a new project. I have checked and there is not any shortcuts or options dor new project

  4. A true example of how one goes about creating a web site using Figma in the designing phase and then shifting over and creating the outline in HTML and finishing it off by using CSS along with the code generated in Figma for the final rendering. The use of the console and targeting elements using JavaScript is just icing on the cake. The way you seamlessly blended the art of using multiple platforms and articulated it to us folks is extraordinary. You are a genius !!!! I hope everyone that's learning web design stumbles on this 2 part series. So thankful for all your work. ))

  5. Thank you SO much! I found this extremely helpful. I've known HTML and CSS for quite some time but have always gotten stuck when it comes to actually building a website – this really helped!!

  6. Is there an “easy builder” of sorts that helps make a Figma design a website without actually typing all the code?

  7. Amazing content. I was still deciding on whether I should learn figma or adobe xd, but I think adobe xd is still my 1st choice. However this video was amazing I need more like this.

  8. porpuseful misleading title, 90% of the people searching figma to HTML either already know this or doesn't want to do this

  9. at first I thought you were going fast, I started pausing and actually completed the video and was very impressed with your teaching instructions, thank you!

  10. hi bro I'm from Bangladesh I cant understand that what is xd to HTML Figma to HTML sketch to HTML ai to HTML i know just PSD to HTML I have been learning web design for 8 months now I'm going to create a gig on fiver I see that there are so many gigs like this I'm so confused, I have a laptop I have a question to you the question is can I design all things by laptop please answer me plz bro

  11. If you could give about 1 minute of instruction on how you set up and use Visual Studio Code it would go a million miles. Your vidoe isn't just about Figma, it's really about Visual Code Editor too

Leave a Reply

Your email address will not be published. Required fields are marked *