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

Design

Design

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:

Locofy Lightning

Community Page Plugin

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

Locofy and Design

Locofy Plugin O/P

VS Code Project Structure from Locofy Plugin

The Project directory on downloading appears like this.

Files in VS Code

Project Structure

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.

Figma to HTML

Figma to HTML Plugin

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

Figma to HTML

Figma to HTML

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.

Figma to HTML and CSS

Figma to HTML and CSS

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.

Figma to Tailwind CSS

Figma to Tailwind CSS

Output Code:

Output Code

Output

5. CSS Extractor

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

CSS Extractor

CSS Extractor

Showing CSS Properties:

CSS Properties

CSS Properties

VS Code Project Structure from Figma to HTML Plugin

VS Code Files

Project Structure

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="horje">
                  <b class="horje1">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);
}
.horje1 {
  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;
}
.horje,
.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:

Live Server Output

Live Server Output

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.


 


Reffered: https://www.geeksforgeeks.org

Design

Related
Poster Design in Figma Poster Design in Figma
Figma for Mobile App Design: Best Features and Tips Figma for Mobile App Design: Best Features and Tips
How to Integrate Figma with Visual Studio Code and Other Tools? How to Integrate Figma with Visual Studio Code and Other Tools?
Best Web Design Companies in the World Best Web Design Companies in the World
What is Duotone Effect? What is Duotone Effect?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 19



 

Horje