Figma to HTML

Converting Figma Design to HTML Code can come in Handy in Various Different ways is extremely necessary. Designing & Development go hand in hand with each other and every set of design can require their transformation into codes. We use Figma for designing which provides us with a set of plugins to transform our design into lines of codes in different programming languages. In this article, we will learn how to create a design in Figma and then transfer it into HTML code.

How to Convert Figma Design to HTML Code?

1. Creating a design

Create a design with a rectangle in the centre & three respective rectangles in the centre for content and photo. Give a heading in the design and add a bit of content in all the three boxes alongwith a photo in each. The design should look somewhat like this:

Design

2. Best Plugins for conversion of design to HTML Code

1. Locofy Lightning

Locofy Lightning is a plugin that helps convert the entire code into HTML + CSS and also provides a view type where in we can inspect elements.

Locofy Lightning Plugin

Run the plugin and you will get the popup as follows:

Locofy

Select a frame to convert the design of frame into code.

Frame

The code is obtained as follows:

Code Preview

The user can also view the inspect elements and it provides a chrome like feature to check the design and code in different screen sizes.

Code + Design

2. Figma to HTML

Figma to HTML is a plugin that converts the code into HTML & allows the user to download the code in the form of a zip format. It includes two files: index.css + global.css along with the index.html file.

Figma to HTML Plugin

On running the plugin, the design file gets converted into a HTML + CSS zip file which can be further downloaded in the desired directory on the system.

Zip File

3. Figma to Code (HTML, Tailwind, Flutter, SwiftUI)

The Figma to Code plugin converts the entire design file into different programming languages in one single click, such as react.js, html, flutter etc. It provides the user with responsive designs for all kinds of screen.

Figma to Code Preview Plugin

Run the plugin and choose the required programming language, here HTML. And following will be the code with the CSS inline styles.

Figma to Code

3. HTML Output Code

Whatsoever plugin we use from the above three methods, we will be getting the same code. The only thing remaining for us is to save the images in the same directory from where in we can access those images. Here’s the entire code for responsive designs:

HTML

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Rockwell+Extra+Bold&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link href="./css/main.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <div class="v1_4">
      <div class="v21_2">
        <div class="v21_3"></div>
        <span class="v21_4">About Me</span>
      </div>
      <div class="v21_39">
        <div class="v21_5">
          <div class="v21_6"></div>
          <div class="v21_7">
            <div class="v21_8"></div>
            <span class="v21_9">FULL Stack Developer</span
            ><span class="v21_10"
              >Lorem ipsum dolor sit amet consectetur. Euismod ac in morbi nunc.
              Aliquet ornare enim leo velit tortor. Etiam porttitor ultricies
              eleifend vitae consectetur volutpat ipsum semper. Ornare phasellus
              rhoncus mauris rhoncus sapien cursus sed nullam donec. Vestibulum
              dui viverra sit a augue. Viverra suscipit volutpat eget sit in
              turpis. Massa aliquet venenatis.</span
            >
          </div>
        </div>
        <div class="v21_11">
          <div class="v21_12"></div>
          <div class="v21_13">
            <div class="v21_14"></div>
            <span class="v21_15">Content Writer</span
            ><span class="v21_16"
              >Lorem ipsum dolor sit amet consectetur. Euismod ac in morbi nunc.
              Aliquet ornare enim leo velit tortor. Etiam porttitor ultricies
              eleifend vitae consectetur volutpat ipsum semper. Ornare phasellus
              rhoncus mauris rhoncus sapien cursus sed nullam donec. Vestibulum
              dui viverra sit a augue. Viverra suscipit volutpat eget sit in
              turpis. Massa aliquet venenatis.</span
            >
          </div>
        </div>
        <div class="v21_17">
          <div class="v21_18"></div>
          <div class="v21_19">
            <div class="v21_20"></div>
            <span class="v21_21">UI/UX Designer</span
            ><span class="v21_22"
              >Lorem ipsum dolor sit amet consectetur. Euismod ac in morbi nunc.
              Aliquet ornare enim leo velit tortor. Etiam porttitor ultricies
              eleifend vitae consectetur volutpat ipsum semper. Ornare phasellus
              rhoncus mauris rhoncus sapien cursus sed nullam donec. Vestibulum
              dui viverra sit a augue. Viverra suscipit volutpat eget sit in
              turpis. Massa aliquet venenatis.</span
            >
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

/* index.css */
.about-me {
    align-self: stretch;
    position: relative;
    font-size: 100px;
    text-transform: uppercase;
    font-family: var(--font-poppins);
    color: #390062;
    text-align: center;
  }
  .frame-child,
  .profile-child {
    height: 928px;
    width: 1728px;
    position: relative;
    box-shadow: 0 4px 60px rgba(0, 0, 0, 0.25);
    background-color: var(--color-white);
    display: none;
    max-width: 100%;
  }
  .frame-child {
    width: 492px;
    height: 782px;
    box-shadow: 0 4px 70px rgba(0, 0, 0, 0.25);
    border-radius: var(--br-xl);
    background-color: var(--color-whitesmoke);
    border: 4px solid var(--color-black);
    box-sizing: border-box;
  }
  .skill-item-background {
    height: 201px;
    width: 180px;
    position: relative;
    object-fit: cover;
    z-index: 1;
  }
  .skill-item-background-wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--padding-xl) 0 var(--padding-6xl);
  }
  .full-stack-developer {
    align-self: stretch;
    position: relative;
    font-weight: 600;
    z-index: 1;
  }
  .lorem-ipsum-dolor {
    height: 414.2px;
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    z-index: 1;
  }
  .skill-description,
  .skill-item-title {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
  }
  .skill-description {
    flex-direction: row;
    padding: 0 var(--padding-lg);
    box-sizing: border-box;
    text-align: left;
    font-size: var(--font-size-5xl);
  }
  .skill-item-title {
    flex-direction: column;
    gap: 35px;
  }
  .frame-item,
  .rectangle-parent {
    box-shadow: 0 4px 70px rgba(0, 0, 0, 0.25);
    border-radius: var(--br-xl);
    background-color: var(--color-whitesmoke);
    border: 4px solid var(--color-black);
    box-sizing: border-box;
    max-width: 100%;
  }
  .rectangle-parent {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: var(--padding-2xs) var(--padding-4xl) 36px var(--padding-9xs);
    gap: 15.6px;
    min-width: 369px;
  }
  .frame-item {
    width: 492px;
    height: 782px;
    position: relative;
    display: none;
  }
  .frame-inner {
    height: 205.2px;
    width: 180px;
    position: relative;
    object-fit: cover;
    z-index: 1;
  }
  .rectangle-wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--padding-xl) 0 var(--padding-6xl);
  }
  .uiux-designer {
    align-self: stretch;
    position: relative;
    font-weight: 600;
    z-index: 1;
  }
  .lorem-ipsum-dolor1 {
    height: 422.9px;
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    z-index: 1;
  }
  .lorem-ipsum-dolor-sit-amet-con-wrapper,
  .uiux-designer-parent {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
  }
  .lorem-ipsum-dolor-sit-amet-con-wrapper {
    flex-direction: row;
    padding: 0 var(--padding-lg);
    box-sizing: border-box;
    text-align: left;
    font-size: var(--font-size-5xl);
  }
  .uiux-designer-parent {
    flex-direction: column;
    gap: var(--gap-17xl-9);
  }
  .rectangle-div,
  .rectangle-group {
    box-shadow: 0 4px 70px rgba(0, 0, 0, 0.25);
    border-radius: var(--br-xl);
    background-color: var(--color-whitesmoke);
    border: 4px solid var(--color-black);
    box-sizing: border-box;
    max-width: 100%;
  }
  .rectangle-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: var(--padding-2xs) var(--padding-4xl) var(--padding-2xl)
      var(--padding-9xs);
    gap: 15.9px;
    min-width: 369px;
  }
  .rectangle-div {
    width: 492px;
    height: 782px;
    position: relative;
    display: none;
  }
  .rectangle-icon {
    height: 205.2px;
    width: 180px;
    position: relative;
    object-fit: cover;
    z-index: 1;
  }
  .rectangle-frame {
    width: 438px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--padding-xl);
    box-sizing: border-box;
    max-width: 100%;
  }
  .content-writer {
    align-self: stretch;
    position: relative;
    font-weight: 600;
    z-index: 1;
  }
  .lorem-ipsum-dolor2 {
    height: 422.9px;
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    z-index: 1;
  }
  .lorem-ipsum-dolor-sit-amet-con-container {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-lg);
    box-sizing: border-box;
    max-width: 100%;
    text-align: left;
    font-size: var(--font-size-5xl);
  }
  .content-writer-parent,
  .rectangle-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 100%;
  }
  .content-writer-parent {
    align-self: stretch;
    align-items: flex-start;
    gap: var(--gap-17xl-9);
  }
  .rectangle-container {
    flex: 1;
    box-shadow: 0 4px 70px rgba(0, 0, 0, 0.25);
    border-radius: var(--br-xl);
    background-color: var(--color-whitesmoke);
    border: 4px solid var(--color-black);
    box-sizing: border-box;
    align-items: flex-end;
    padding: 27px var(--padding-4xl) var(--padding-2xl) var(--padding-9xs);
    min-width: 369px;
  }
  .frame-parent {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 78.5px;
    max-width: 100%;
    z-index: 1;
  }
  .homescreen,
  .profile {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .profile {
    align-self: stretch;
    box-shadow: 0 4px 60px rgba(0, 0, 0, 0.25);
    background-color: var(--color-white);
    flex-direction: row;
    padding: 54px 44px;
    min-height: 928px;
    max-width: 100%;
    text-align: center;
    font-size: var(--font-size-21xl);
    color: var(--color-black);
    font-family: var(--font-poppins);
  }
  .homescreen {
    width: 100%;
    position: relative;
    background-color: #c7c7c7;
    overflow: hidden;
    flex-direction: column;
    padding: 330px 0 457px;
    gap: 78px;
    line-height: normal;
    letter-spacing: normal;
  }
  @media screen and (max-width: 900px) {
    .about-me {
      font-size: 50px;
    }
    .full-stack-developer {
      font-size: var(--font-size-13xl);
    }
    .rectangle-parent {
      padding-top: var(--padding-xl);
      padding-bottom: var(--padding-4xl);
      box-sizing: border-box;
    }
    .content-writer,
    .uiux-designer {
      font-size: var(--font-size-13xl);
    }
    .rectangle-container {
      padding-top: var(--padding-xl);
      padding-bottom: var(--padding-xl);
      box-sizing: border-box;
    }
    .profile {
      padding: 35px 22px;
      box-sizing: border-box;
    }
    .homescreen {
      gap: var(--gap-20xl);
    }
  }
  @media screen and (max-width: 700px) {
    .rectangle-container,
    .rectangle-group,
    .rectangle-parent {
      min-width: 100%;
    }
    .frame-parent {
      gap: var(--gap-20xl);
    }
  }
  @media screen and (max-width: 450px) {
    .about-me {
      font-size: 30px;
    }
    .full-stack-developer {
      font-size: var(--font-size-5xl);
    }
    .lorem-ipsum-dolor {
      font-size: var(--font-size-lgi);
    }
    .skill-item-title {
      gap: 17px;
    }
    .rectangle-parent {
      padding-bottom: var(--padding-xl);
      box-sizing: border-box;
    }
    .uiux-designer {
      font-size: var(--font-size-5xl);
    }
    .lorem-ipsum-dolor1 {
      font-size: var(--font-size-lgi);
    }
    .uiux-designer-parent {
      gap: var(--gap-lg);
    }
    .content-writer {
      font-size: var(--font-size-5xl);
    }
    .lorem-ipsum-dolor2 {
      font-size: var(--font-size-lgi);
    }
    .content-writer-parent {
      gap: var(--gap-lg);
    }
    .frame-parent {
      gap: 20px;
    }
    .profile {
      padding-top: var(--padding-4xl);
      padding-bottom: var(--padding-4xl);
      box-sizing: border-box;
    }
    .homescreen {
      gap: 19px;
    }
  }

CSS

/* global.css */
body {
    margin: 0;
    line-height: normal;
  }
  
  :root {
    /* fonts */
    --font-poppins: Poppins;
  
    /* font sizes */
    --font-size-5xl: 24px;
    --font-size-lgi: 19px;
    --font-size-21xl: 40px;
    --font-size-13xl: 32px;
  
    /* Colors */
    --color-white: #fff;
    --color-whitesmoke: #ececec;
    --color-black: #000;
  
    /* Gaps */
    --gap-20xl: 39px;
    --gap-17xl-9: 36.9px;
    --gap-lg: 18px;
  
    /* Paddings */
    --padding-4xl: 23px;
    --padding-2xl: 21px;
    --padding-9xs: 4px;
    --padding-xl: 20px;
    --padding-lg: 18px;
    --padding-2xs: 11px;
    --padding-6xl: 25px;
  
    /* Border radiuses */
    --br-xl: 20px;
  }

Final Output on Locofy Lightning (Figma Plugin):

Code Output

On adding the code in VS Code, or downloading it in a zip format, we will get the following project structure:

Project Structure

On VS Code you can run live server and the resulting output on the default browser will be as follows:

Live Server Output

Conclusion

Thus, converting design into code is an essential step involved in Design & Development, and every designer needs to know how to convert a Figma file into codes of HTML. Using the above steps & screenshots one can easily convert a design file in Figma to a HTML code.

Tags:

#Figma #Design #Design Tools #Web Design

HTML <em> Tag

How to Make GIF in Photoshop?