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.


  1. 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?

  2. 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

Leave a comment

Your email address will not be published.