Figma to CSS

Converting your Figma designs to CSS can make bringing your digital creations to life much easier. Figma provides tools and features that help translate your design elements directly into code, saving time and ensuring consistency. In this article, we'll explore how to efficiently convert Figma designs into CSS, making the web development process smoother and more straightforward.

What is Figma?

Figma is a powerful online tool used for designing websites, apps, and other digital products. It acts like a digital canvas where you can create and edit designs easily. One of Figma's best features is its ability to let multiple people work on the same design simultaneously, making teamwork easy and efficient. It works on any computer with an internet connection, so you don’t need to install any special software. Figma is user-friendly and perfect for both beginners and experienced designers.

Creating a Design

Start by creating a design in Figma. Add a frame in it, create a navigation bar and an about section for the desired company along with it's heading & photo. Add a few more design elements such as button, icon etc.

Plugins to Convert Design into CSS Codes

1. Locofy Lightning

Locofy Lightning is a easy to access & use plugin that provides with both the HTML & CSS Codes. Here's it's community page description:

Run the plugin to get the code generated in this format:

VS Code Project Structure from Locofy Plugin

The Project directory on downloading appears like this.

2. Figma to HTML

This plugin allows us to download the code in a zipped format, where in all images lie there including the specific codes of HTML & CSS. The code, however, remains same generated by both the plugins.

Run the plugin as follows by selecting the zip format & HTML Code for a particular frame in the design file.

3. Figma to HTML and CSS

This plugin allows us to particularly inspect every element and get the desired CSS. For eg. If we click on a button in the frame, this plugin will give us all the required CSS for the button.

On inspecting the frame, we received the following CSS details:

Figma to HTML and CSS design — Figma Output to CSS

4. Figma to Tailwind CSS

This plugin provides us with the CSS in the form of a tailwind output for every particular element you inspect.

Output Code:

5. CSS Extractor

This plugin again allows us to inspect independently each element of the frame and further expand it's CSS properties.

Showing CSS Properties:

VS Code Project Structure from Figma to HTML Plugin

Output Code

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />

    <link rel="stylesheet" href="./global.css" />
    <link rel="stylesheet" href="./index.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap"
    />
  </head>
  <body>
    <div class="css-file">
      <header class="rectangle-parent">
        <div class="frame-child"></div>
        <div class="frame-wrapper">
          <img
            class="frame-item"
            loading="lazy"
            alt=""
            src="./Frame/image.png"
          />
        </div>
        <div class="courses-wrapper">
          <a class="courses">Courses</a>
        </div>
        <div class="tutorials-wrapper">
          <a class="tutorials">Tutorials</a>
        </div>
        <nav class="frame-container">
          <nav class="jobs-contests-parent">
            <div class="jobs-contests">
              <a class="jobs">Jobs</a>
              <a class="contests">Contests</a>
            </div>
            <a class="practice">Practice</a>
          </nav>
        </nav>
        <div class="nav-button-wrapper">
          <button class="nav-button">
            <a class="contact-us">Contact us</a>
          </button>
        </div>
      </header>
      <section class="css-file-inner">
        <div class="frame-parent">
          <div class="frame-group">
            <div class="primary-heading-parent">
              <h2 class="primary-heading">
                <p class="geeksforgeeks">
                  <b class="geeksforgeeks1">GeeksForGeeks</b>
                  <span>
                    <span class="span"> </span>
                  </span>
                </p>
                <p class="the-technical-platform">
                  <span>
                    <b>The Technical Platform</b>
                  </span>
                </p>
              </h2>
              <div class="span-decorative-text">
                Hello, What Do You Want To Learn? We help you ace technical &
                programming interviews.
              </div>
            </div>
            <button class="btn-primary">
              <div class="lets-get-started">Let’s get started!</div>
            </button>
          </div>
          <div class="hero-wrapper-image-center-wrapper">
            <img
              class="hero-wrapper-image-center-icon"
              loading="lazy"
              alt=""
              src="./Frame/another.avif"
            />
          </div>
        </div>
      </section>
    </div>
  </body>
</html>

CSS

/* index.css */

.frame-child {
  height: 87px;
  width: 1214px;
  position: relative;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  background-color: var(--color-white);
  display: none;
  max-width: 100%;
}
.frame-item {
  width: 87px;
  height: 44px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}
.frame-wrapper {
  width: 174px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.courses {
  text-decoration: none;
  align-self: stretch;
  height: 48px;
  position: relative;
  line-height: 14px;
  color: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.courses-wrapper {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-lg) 0 0;
  box-sizing: border-box;
}
.tutorials {
  text-decoration: none;
  align-self: stretch;
  height: 48px;
  position: relative;
  line-height: 14px;
  color: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.tutorials-wrapper {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-lg) 0 0;
  box-sizing: border-box;
}
.contests,
.jobs {
  text-decoration: none;
  height: 48px;
  flex: 1;
  position: relative;
  line-height: 14px;
  color: inherit;
  display: inline-block;
  z-index: 1;
}
.contests {
  z-index: 2;
  margin-left: -21px;
}
.jobs-contests {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.practice {
  text-decoration: none;
  height: 48px;
  width: 160px;
  position: relative;
  line-height: 14px;
  color: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.frame-container,
.jobs-contests-parent {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.jobs-contests-parent {
  align-self: stretch;
  flex-direction: row;
  gap: 18px;
  text-align: left;
  font-size: var(--font-size-5xl);
  color: var(--color-black);
  font-family: var(--font-poppins);
}
.frame-container {
  width: 502px;
  flex-direction: column;
  padding: var(--padding-lg) var(--padding-6xl) 0 0;
  box-sizing: border-box;
  max-width: 100%;
}
.contact-us {
  text-decoration: none;
  position: relative;
  font-size: var(--font-size-xl);
  line-height: 14px;
  font-weight: 600;
  font-family: var(--font-inter);
  color: var(--gray-gray-50);
  text-align: left;
  display: inline-block;
  min-width: 106px;
}
.nav-button,
.nav-button-wrapper,
.rectangle-parent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.nav-button {
  cursor: pointer;
  border: 0;
  padding: 14px var(--padding-6xl);
  background-color: transparent;
  border-radius: var(--br-8xs);
  background: linear-gradient(225deg, #6675f7, #57007b);
  flex-direction: row;
  white-space: nowrap;
  z-index: 1;
}
.nav-button-wrapper,
.rectangle-parent {
  flex-direction: column;
  padding: 4px 0 0;
}
.rectangle-parent {
  align-self: stretch;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  background-color: var(--color-white);
  flex-direction: row;
  padding: 21px 24px 0;
  box-sizing: border-box;
  top: 0;
  z-index: 99;
  position: sticky;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-5xl);
  color: var(--color-black);
  font-family: var(--font-poppins);
}
.geeksforgeeks1 {
  font-family: var(--font-inter);
  background: linear-gradient(180deg, #de4396, rgba(13, 28, 159, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.span {
  font-weight: 300;
}
.geeksforgeeks,
.the-technical-platform {
  margin: 0;
}
.primary-heading {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 71px;
  display: inline-block;
  max-width: 100%;
  font-family: inherit;
}
.span-decorative-text {
  align-self: stretch;
  height: 58px;
  position: relative;
  font-size: var(--font-size-xl);
  line-height: 36px;
  color: var(--gray-gray-700);
  display: inline-block;
  flex-shrink: 0;
}
.primary-heading-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 28px;
  max-width: 100%;
}
.lets-get-started {
  position: relative;
  font-size: 18px;
  line-height: 14px;
  font-weight: 600;
  font-family: var(--font-inter);
  color: var(--gray-gray-50);
  text-align: left;
}
.btn-primary,
.frame-group {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.btn-primary {
  cursor: pointer;
  border: 0;
  padding: 19px 30px;
  background-color: #3d63ea;
  box-shadow: var(--btn-shadow);
  border-radius: var(--br-8xs);
  flex-direction: row;
  white-space: nowrap;
}
.btn-primary:hover {
  background-color: #577dff;
}
.frame-group {
  flex: 1;
  flex-direction: column;
  gap: 75px;
  min-width: 345px;
  max-width: 100%;
}
.hero-wrapper-image-center-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.frame-parent,
.hero-wrapper-image-center-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.hero-wrapper-image-center-wrapper {
  height: 404px;
  width: 424px;
  flex-direction: column;
  padding: 16px 0 0;
  box-sizing: border-box;
  min-width: 424px;
}
.frame-parent {
  width: 1014px;
  flex-direction: row;
  gap: 59px;
}
.css-file,
.css-file-inner {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.css-file-inner {
  width: 1202px;
  flex-direction: row;
  justify-content: center;
  padding: 0 20px;
  max-width: 100%;
  text-align: left;
  font-size: 45px;
  color: var(--color-gray-100);
  font-family: var(--font-inter);
}
.css-file {
  width: 100%;
  position: relative;
  background-color: var(--color-white);
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 23px;
  gap: 46px;
  line-height: normal;
  letter-spacing: normal;
}
@media screen and (max-width: 1125px) {
  .frame-container {
    display: none;
  }
}
@media screen and (max-width: 1025px) {
  .primary-heading {
    font-size: 36px;
    line-height: 57px;
  }
  .hero-wrapper-image-center-icon {
    align-self: stretch;
    width: auto;
  }
  .hero-wrapper-image-center-wrapper {
    flex: 1;
  }
  .frame-parent {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 750px) {
  .frame-group {
    gap: 37px;
  }
  .hero-wrapper-image-center-wrapper {
    min-width: 100%;
  }
  .frame-parent {
    gap: 29px;
  }
  .css-file {
    gap: 23px;
  }
}
@media screen and (max-width: 450px) {
  .jobs-contests-parent {
    display: none;
  }
  .frame-container {
    width: 25px;
  }
  .primary-heading {
    font-size: 27px;
    line-height: 43px;
  }
  .span-decorative-text {
    font-size: 16px;
    line-height: 29px;
  }
  .frame-group {
    gap: 19px;
    min-width: 100%;
  }
}

CSS

/* global.css */

body {
    margin: 0;
    line-height: normal;
  }
  
  :root {
    /* fonts */
    --font-inter: Inter;
    --font-poppins: Poppins;
  
    /* font sizes */
    --font-size-xl: 20px;
    --font-size-5xl: 24px;
  
    /* Colors */
    --color-white: #fff;
    --gray-gray-50: #fafafa;
    --color-gray-100: #1a202c;
    --gray-gray-700: #4a5568;
    --color-black: #000;
  
    /* Paddings */
    --padding-6xl: 25px;
    --padding-lg: 18px;
  
    /* Border radiuses */
    --br-8xs: 5px;
  
    /* Effects */
    --btn-shadow: 0px 4px 49px rgba(0, 0, 0, 0.15);
  }

Live Server Output

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

Conclusion

Using Figma to CSS conversion tools can greatly enhance your web development workflow. It helps maintain the integrity of your design while making it easier to implement in code. By following the steps and tips outlined in this article, you can seamlessly transition from design to development, creating professional and consistent web pages.