Figma design to ReactJS : What you should know

Introduction

Here's one for the Front End Developers, an article that focuses on the conversion of Figma designs to clean and reusable react codes written in very simple terms that even a 10-year-old would get it. However, this is only an introduction to key concepts that must be known, I would talk more about the conversion of Figma designs to ReactJS codes in subsequent publications. For developers leaving the "tutorial bubble" and looking to get their hands on some real projects, then welcome! The creation of websites today from leading brands can be divided into two key stages :

1. Design of websites by UI/UX designers

2. Conversion of design to functional websites using programming and markup languages. This is done by developers.

The entire functionality of web pages is done by Front End Developers and Back End Developers but this article focuses on the front end since it accounts for a bulk of the conversion channel. So sit back, grab a coffee and I know I've said it before but here's to welcoming you again!

Prerequisite

Although this article will be as simplified as possible, It is important to have a basic knowledge of HTML, CSS, TailwindCSS(which I will be using for styling) JavaScript, and React to properly grasp the concepts that will be talked about. You can click here to learn more about React, and here to learn about TailwindCSS, a CSS framework I highly recommend.

In this article, I will be using a Figma design template by Aderigbigbe Adewuyi, a top UI/UX designer in the design industry and codes written by me.

Creating the React Project

Since we are going to be using React locally, you need to have NodeJs installed on your computer, you can download it here.

In case you missed it, the popular React initialization line, create-react-app has been deprecated, a couple of other frameworks can be used to create React apps, one of which is Next.js, which we'll be using in our code. To create a react app on your PC, run the code below on your terminal.

npx create-next-app

This installs all the necessary packages. Note that this article will only highlight generic requirements needed for the conversion of Figma designs to code, and not the actual peculiarities of complex designs. In simple terms, it will tell you what you need to know.

The next thing we want to do here is to install the packages needed in styling as earlier stated. Would love to go through the entire integration process of TailwindCSS in our codebase but that's quite far off the scope of this article. However, a detailed installation process and syntax documentation can be found on the official TailwindCSS site.

Setting up your environment

Time to dive in! Let's have a look at our design.

A key reason for picking this design is its simplicity. It looks minimal, yet contains all the elements of a modern landing webpage, and the fact that it was designed by a professional!

The next thing we would want to take note of is the style guide as stated by the designer. This specifies fonts, padding, margin, spacing, and an overview of the page's layout.

As shown in the image above, the fonts(heading and body) are given by the designer, as well as the colours for the heading tags, body, background and button. Copying and pasting hex values whenever it's needed can be time-consuming, hence the reason why specifying all the values with basic names for easier reference is advised.

Now the question is, how do we put all these Figma values shown in the image above in our codebase? Let's dive in.

Fonts

Starting with the fonts, the style guide shows two fonts are used throughout the project: Neue Montreal and Lato, to import this into our project, we can easily head to Google Fonts, which offers a variety of fonts to be used in your projects for free! Cool, isn't it? So how do we import this?

We import these fonts by copying the URL (as specified in Google Fonts) to our index.css file which is one of the files generated when we installed our packages. A code snippet is shown below.

@import url("https://fonts.googleapis.com/css2?family=NeueMontreal:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");

These lines of code make both fonts available in our project. But that's not all. We head to our tailwind.config.js file and specify the fonts to be used.

module.exports = {
  content: ["./index.html", "./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {
      fontFamily: {
        lato: ["Lato"],
        neueMontreal: ["Neue Montreal"],
      },
    },
  },
  plugins: [],
};

And there we have it! We're all set to use our fonts.

Colours

Now to the colours, all we need to do is define all the colours needed for the project in our tailwind.config.js file.

module.exports = {
  content: ["./index.html", "./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {
      colors: {
        basic: "#FFFFFF",
        primary: "#000813",
        secondary: "#EAF5FF",
        button: "#CD8B42",
        footer: "#B1B1B1",
        heading: "#0B3948",
      },

      fontFamily: {
        lato: ["Lato"],
      },
    },
  },
  plugins: [],
};

Now that we have our colours saved in our tailwind.config.js file, we can proceed to use it in any of our components, all you have to do is specify the tailwind format plus the variable name it's saved with. That's easier, right? We'd be seeing more code instances as we move forward.

Layout

Navbar

The Navbar implementation is pretty easy. The Navbar alongside other components in the webpage will be mounted in the App.js, but just before then, let's have the content of our Navbar just before it's exported to be mounted in App.js

/* Import of Arrow symbol from React Icons*/
import { MdOutlineKeyboardArrowDown } from "react-icons/md"; 
/* Import of Menu symbol from React Icons*/
import { IoIosMenu } from "react-icons/io";
import { useState } from "react";

const Navbar = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <nav className="font-lato text-primary  lg:flex mb-24 md:ml-20 my-5 text-xl ">
      <div className=" md:flex-[1_0_0%] lg:flex-[1_0_30%] cursor-pointer">
        <img src={homou} alt="logo" />
      </div>

      <div className="absolute cursor-pointer  right-4 top-4 lg:hidden">
        <IoIosMenu
          className="text-5xl"
          onClick={() => {
            setIsExpanded(!isExpanded);
          }}
        />
      </div>

      <div
        className={
          isExpanded
            ? "lg:flex flex-[1_0_40%]"
            : "lg:flex flex-[1_0_40%] hidden"
        }
      >
        <ul className="text-center [&>*]:my-12 lg:[&>*]:inline [&>*]:mx-5 pt-2  ">
          <li>
            <a className=" hover:text-button" href="#">
              Products
            </a>
          </li>
          <li>
            <a className=" hover:text-button" href="#">
              Features
              <MdOutlineKeyboardArrowDown className="inline" />
            </a>
          </li>
          <li>
            <a className=" hover:text-button" href="#">
              Pricing
            </a>
          </li>
          <li>
            <a className=" hover:text-button" href="#">
              Template
            </a>
          </li>
        </ul>
      </div>

      <div
        className={
          isExpanded
            ? "md:flex-[1_0_10%] text-center h-screen"
            : "lg:flex flex-[1_0_10%] hidden"
        }
      >
        <button className=" py-1 px-3 border-solid border-2 border-button ` hover:bg-button font-semibold">
          Get Started
        </button>
      </div>
    </nav>
  );
};

export default Navbar;

From the codebase, you can see the familiarity with normal HTML code once the environment has been set, that's how crucial setting up your environment in the right way helps build productivity. Also, we see that the fonts and colours are not outrightly specified, but with the help of the variable names used in our tailwind.config.js file.

Instead of importing fonts again(which leads to redundancy and memory wastage), we directly make use of the fonts as shown in the font-lato property embedded in the JSX element.

Also, we see that in making use of colours, we attach the variable names from our tailwind.config.js file to the property to be styled, as per TailwindCSS syntax. For example, instead of using hex codes which makes our codebase untidy and difficult to debug, we can see properties like text-primary, text-button, border-secondary are used, where primary, button, and secondary represent the equivalent hex codes stored in variable names in our configuration file.

Hero Section

We've seen how setting our environment made the creation of our Navbar seamless, creating the hero section is even easier! Let's see how the hero section gets represented in our codebase.

import React from "react";
import homeImg from "./homeImg.jpg";

const Home = () => {
  return (
    <section className="mb-40 max-w-[1240px] ">
      <div className="flex flex-col lg:flex-row  items-center lg:ml-20 ">
        <div className=" lg:flex-[1_0_50%] justify-center ">
          <div

            className="text-center max-w-lg w-full [&>*]:mb-5 lg:text-start"
          >
            <h1 className="text-4xl lg:text-5xl lg:leading-[55px] font-bold ">
              We bring together people to achieve great things !
            </h1>
            <h2 className="text-xl md:text-2xl font-lato text-primary">
              The development of each work and the overall strategy will be
              visible to you. Never has tracking been more fun!
            </h2>
            <button className="border-none rounded-lg py-2 px-5 text-2xl text-white   border-2 bg-button hover:text-black">
              Get Started
            </button>
          </div>
        </div>
        <div className="justify-center">
          <img src={homeImg} alt="home-img" />
        </div>
      </div>
    </section>
  );
};

export default HeroSection;

Quite easy, isn't it? Again, just like the good old HTML code!

However, we've got one final bit of business. These two components that have been created are pretty much useless without exporting them to be rendered in your App.js file. Only components mounted in the App.js file will be rendered in the HTML Document Object Model(DOM). At the end of our Navbar and Hero Section file, you see a line of code with a format export default component which implies the component can be imported for use by the App.js file and other components within its scope. Enough talking! Let's see how it's done.

import React from "react";
import Navbar from "./components/Navbar/Navbar"; // Imports Navbar component
import HeroSection from "./components/HeroSection/HeroSection"; // Imports Hero Section component
import "./App.css";
function App() {
  return (
    <div className="bg-basic text-primary  w-full ">
      <Navbar />
      <HeroSection />
    </div>
  );
}

export default App;

After importing the Navbar and HeroSection components, we can see that rendering the components into our DOM is as easy as writing the <Navbar /> and <HeroSection /> line of code into our App function and voila! we have the exact and pixel-perfect representation of the Figma design in our code. Try to play around and run this bit of code in your code editor, feel free to have fun with it!

Conclusion

With the increase in the complexity of modern web pages and the advent of highly skilled designers, it has become very important for Front-end Developers to adapt to this fast-paced change, and that starts by having a basic knowledge of conversion of static design web pages to clean and reusable codes aiming for maximum optimization and functionality.

Happy to have written this article that explains all you need to know in the conversion of Figma designs to ReactJS codes. With subsequent articles, I will take on more complex designs and look into even more interesting features in React, hope to see you there! Thanks for reading!