Convert Figma Design to HTML and CSS

By
Asif Ali
-
0

Hey everybody, let’s talk about how to convert Figma Design to HTML and CSS from scratch. I will share with you how to use HTML and CSS to make responsive Figma design step by step with practicals.

Figma has grown to be a well-liked alternative for designers due to its collaborative options and suppleness. As soon as your design is full, the subsequent step is changing it to a practical website utilizing HTML and CSS. This information outlines the method in a method that’s accessible to everybody, from rookies to skilled builders.

Convert Figma Design to HTML and CSS

Figma is a collaborative design instrument used for creating every part from easy wireframes to advanced consumer interfaces. It permits several customers to work on the identical design concurrently, making it preferred for teamwork. The first parts in Figma are frames, elements, textual content, and pictures. Understanding how these translate into HTML and CSS is essential for a profitable conversion.

How to Convert Figma Design to HTML and CSS

Guys, before moving the codes, you should watch the tutorial about how to convert Figma design to HTML and CSS. Inside the video tutorial you will learn how to design Figma templates into responsive websites.

I hope you’ve watched the video till to end and learned a lot of new things and tactics that are used to design a responsive website. You can use the same method to convert any other template as well, but you must know HTML and CSS, then you will able to do that.

You May Also Like:

Step 1: Put together Your Figma Design

Prior to changing your design into code, be certain that your Figma undertaking is well-organized. Begin by grouping associated parts and giving them descriptive names. It will make it simpler to map out the construction of your HTML afterward. Consistency is essential, so test that colors, typography, and spacing are uniform all through the design. Export any photographs, icons, or different graphical properties that you’re going to want in your HTML and CSS information.

Step 2: Set Up the HTML Structure

Now it is time to create the fundamental HTML construction. Begin with an easy template that features the doc kind, language settings, head part, and physique. Set the title of the web page and embrace any essential meta tags, akin to these for character encoding and viewport settings. Hyperlink your CSS file to the HTML doc to use styling afterward.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="responsive.css" />
    <title>Pod request access landing page</title>
  </head>
  <body>
    <main>
      <div class="container">
        <div class="logo">
          <img src="./assets/desktop/logo.svg" alt="" />
        </div>
        <div class="showcase">
          <div class="content">
            <div class="txtContent">
              <h2>Publish your podcasts <span>everywhere.</span></h2>
              <p>
                Upload your audio to Pod with a single click. We’ll then
                distribute your podcast to Spotify, Apple Podcasts, Google
                Podcasts, Pocket Casts and more!
              </p>
              <div class="input_control">
                <form>
                  <input type="text" placeholder="Email address" />
                  <button>Request Access</button>
                </form>
              </div>
              <div class="icons">
                <img src="./assets/desktop/spotify.svg" alt="" />
                <img src="./assets/desktop/apple-podcast.svg" alt="" />
                <img src="./assets/desktop/google-podcasts.svg" alt="" />
                <img src="./assets/desktop/pocket-casts.svg" alt="" />
              </div>
            </div>
          </div>
          <div class="img">
            <img src="./assets/desktop/image-host.jpg" alt="" />
          </div>
        </div>
        <div class="bg_img">
          <img src="./assets/desktop/bg-pattern-dots.svg" alt="" />
        </div>
      </div>
    </main>
  </body>
</html>

Step 3: Convert Design Parts to HTML

With the fundamental construction in place, start including parts of your Figma design in the HTML. Use semantic HTML tags to create a logical format. For instance, use <header> for the header part, <nav> for navigation, and <footer> for the footer. When including content material, be certain that you utilize suitable tags, like <h1> for headings and <p> for paragraphs. Consult with your Figma design for the proper placement of parts.

Step 4: Apply CSS Kinds

As soon as you have arranged your HTML construction, it is time to model it with CSS. Use an exterior CSS file for higher group and maintainability. Apply kinds to format and positioning, utilizing methods like Flexbox or CSS Grid for advanced layouts. Make certain to use font kinds, colors, and different design parts that match your Figma undertaking. To make sure your website seems to be good on numerous gadgets, use media queries so as to add responsive design options.

@import url("https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --primaryColor: #54e6af;
  --secondaryColor: #2c344b;

  --darkBlack: #121725;
  --White: #ffffff;
  --lightBlue: #5a668a;
  --lightGray: #c2cbe5;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--darkBlack);
  font-family: "Chivo";
}

main {
  padding: 2rem 0;
  position: relative;
}

.container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

.logo {
  transform: translateY(130%);
  z-index: 10;
}

.showcase {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.showcase .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--darkBlack);
  position: absolute;
  width: 60%;
  padding: 4rem 0;
  bottom: 0;
  z-index: -1;
}

.showcase .txtContent h2 {
  font-size: 3.5rem;
  color: var(--primaryColor);
  text-transform: uppercase;
  font-weight: 300;
}

.showcase .txtContent h2 span {
  color: var(--White);
}

.showcase .txtContent p {
  color: var(--lightGray);
  margin: 2rem 0;
  line-height: 2;
  width: 55%;
}

.showcase .img {
  margin-left: auto;
  z-index: -5;
}

.input_control {
  width: 65%;
  position: relative;
}

.input_control input {
  background-color: var(--lightBlue);
  outline: none;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  padding: 1.3rem 2rem;
  width: 100%;
}

.input_control input::placeholder {
  color: var(--lightGray);
}

.input_control button {
  outline: none;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.95rem 2rem;
  border-radius: 50px;
  background-color: var(--primaryColor);
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 5px;
  bottom: 4px;
}

.input_control button:hover {
  opacity: 0.5;
}

.icons {
  width: 80%;
  display: flex;
  justify-content: space-between;
  transform: translateY(150%);
}

.bg_img {
  position: absolute;
  right: 15%;
  bottom: -2%;
}

That’s it for the desktop versions, but you can use a media query to make it responsive with different devices such as tablets and mobile. So, Let’s look at the codes that were used to make it responsive.

Step 5: Check and Refine

After you have accomplished the fundamental conversion, take a look at your website to make sure every part works as anticipated. Verify your website in several browsers to verify cross-browser compatibility, and take a look at numerous gadgets to make sure responsiveness. Make any essential changes to format, styling, and performance-based mostly on your testing outcomes.

@media (max-width: 1024px) {
  .showcase .content {
    width: 55%;
  }
  .showcase .txtContent h2 {
    font-size: 2.5rem;
  }

  .showcase .txtContent p {
    width: 75%;
  }

  .input_control {
    width: 75%;
  }

  .icons {
    width: 85%;
    gap: 2rem;
  }

  .bg_img {
    position: absolute;
    right: 05%;
    bottom: -2%;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0rem;
  }

  .logo img {
    margin: 0 1rem;
  }

  .showcase .content {
    width: 90%;
    padding: 1rem;
    bottom: 90px;
  }

  .showcase .txtContent h2 {
    font-size: 3rem;
  }

  .showcase .img {
    transform: translateY(-12%);
  }

  .showcase .img img {
    content: url("./assets/tablet/image-host.jpg");
  }

  .bg_img {
    position: absolute;
    left: 5%;
    bottom: -15%;
  }
}

@media (min-width: 375px) and (max-width: 425px) {
  body {
    background: url("./assets/mobile/image-host.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
  }

  .container {
    padding: 0;
  }

  .logo {
    display: flex;
    justify-content: center;
  }

  .showcase {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 0;
    margin: 0;
    min-height: 85vh;
  }

  .showcase .content {
    position: absolute;
    background: none;
    top: 0;
    padding: 0;
    margin: 0;
    z-index: 10;
  }

  .showcase .txtContent h2 {
    font-size: 1.7rem;
    text-align: center;
  }

  .showcase .txtContent p {
    width: 100%;
  }

  .showcase .img img {
    display: none;
  }

  .icons {
    width: 100%;
    gap: 1rem;
    transform: translateY(-100%);
  }

  .input_control {
    width: 100%;
    transform: translateY(200%);
  }

  .input_control button {
    display: block;
    width: 100%;
    margin: 1rem 0;
    transform: translateY(170%);
  }

  .icons img {
    width: 70px;
  }

  .bg_img {
    display: none;
  }
}

Changing a Figma design to HTML and CSS could seem difficult, however by following these steps, you possibly can simplify the method. Begin with a clear and arranged Figma design, construct the fundamental HTML construction, and apply CSS kinds, after which take a look at and refine the ultimate product. With this information, you will be in your approach to making a practical website that mirrors your authentic design.

How to Upload HTML Website on Hostinger

Once you designed the project using HTML CSS and JavaScript It’s a static project, you can watch the video on below how to upload it on an online server. If you want to see your project around the world you need to upload your project on cpanel or online server.

I hope this tutorial is helpful for you, If you’ve any questions/suggestions feel free to contact me. I will be happy to give you a reply as soon as possible

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.