From Figma to React—Reusable Components

Delivering great user experiences across apps suggests strong collaboration between designers and developers and strictly following UI/UX requirements. Let’s see how to achieve this while standardizing building blocks and cutting time at each stage by converting Figma to React reusable components.

In the process of developing customer-facing applications, designers and developers have a common goal—delivering great apps customers love. But they work in different environments. Designers construct the UI and the user journey in their design tool of choice. Developers translate the UI and design into a fully working application using various technologies and tools.

Let’s face it—it is not uncommon that the implementation fails to hit the design intent. A missing shadow here and there, a color tone mismatch or a font size just a pixel away.

But what if, from the very start, designers and developers built perfectly matching UI on both sides? These matching building blocks would ensure that there is smoother team collaboration, built-in reusability and consistent user experience. Like a backbone system of standardized, ready-to-use components, it would minimize discrepancies, drastically cut development time, allow software teams to focus on the customer journey and functionality, and bring designers and developers closer to their common goal.

So, let’s set some context and dive into the process of how you can achieve this dreamed unified building blocks ecosystem with Figma and React.

The Context—Awesomeness Inc.

Let’s say I am part of the Awesomeness Inc. company. UI/UX folks, developers and the business made the decision to standardize all components and widgets used in our applications. This makes sense because it is scalable, maintainable, reusable, consistent and cheaper. And users always appreciate a good UX, consciously or not.

So, the task is clear. The main indicators for success we agreed on are consistency, reusability and time to develop.

For the purposes of this tutorial and for brevity, let’s just focus on the primary call-to-action (CTA) button. The same process could then be applied to the rest of the components.

Toolbox

As the title already suggests, the technology stack and toolbox I will be using includes Figma for building our awesome designs, and React for building awesome customer-facing web applications. Here is what I will need.

• Figma – Figma is a free, cloud-based design tool that has been dominating the design world recently with its powerful features and easy collaboration for the entire team. If you have not checked it out yet, now is the time.

• React – React is a component-based JavaScript library for building rich and dynamic user interfaces. Built by Facebook, React proved to be the tool of choice for thousands, if not millions, of web applications of all sizes.

To further facilitate the process and meet our success criteria, I will use three additional tools. They will allow me to drastically reduce the time it takes to develop, while maintaining high consistency and reusability, as this is what I aim for now.

• KendoReact – KendoReact is a complete React UI suite that delivers ready-to-use, fully functional React components. It is a lifesaver when it comes to productivity. It also goes with the identical Kendo UI Kits for the designer in Figma, which will make both our lives easier.

• Unite UX – Unite UX is a two-part design-to-development collaboration tool. It helps your team to quickly transfer UI styles from Figma to your coded KendoReact library, compare the design and coded elements to make them match, and export the ready-to-use styled component library together with an auto-generated Storybook documentation for it.

• Storybook – Storybook is an open-source tool for storing your coded UI library’s documentation, code reference and demos. One place for all developers to know what elements are in use in the application and not reinvent the wheel every time.

The Figma-to-React Journey

Now that we’ve decided on our toolset, let’s go through the complete process of creating Figma-to-React reusable components step by step.

Create Awesomeness Inc. Primary Button in Figma

Here, we have two approaches. The first one is to start from scratch in Figma. The second is to use the Kendo UI Kits for Figma as a starting point.

As we aim for fast results without compromising the outcome, the second choice is an easy pick. The Kendo UI Kits will bring several benefits.

First, the kits contain Figma reusable components for the whole KendoReact suite. Once we are ready with the button, we will have a good starting point to continue with the rest we need.

Second, the kits are built with the atomic design principle in mind. This means that more complex components consist of the basic ones—so once we are done with the button, the rest of the components that contain a button will inherit that design.

And third, we have a more holistic overview of the components as the kits include all components’ states. In that way, we can design the interaction states too, not just the static normal state.

So, let’s get some work done. First, we need to choose one of the three Kendo UI kits themes (based on which one looks closer to our end goal) and duplicate it. This project will store our Figma reusable components. I will go with the Material theme.

Once opened in Figma, I will navigate to the “Components & Variants” page and locate the SOLID / PRIMARY button.

Kendo UI Kits use design tokens—variables for colors, effects or typography. Change style under a token, and all components that use this token will have the new style applied.

The solid primary button states’ background is set using the $primary and On Primary/White Overlay/$white-overlay-* color tokens. Change their solid colors to #AD44DF and check the result.

The last thing I’ll do is to change the border radius to 40 to get a nice, rounded button with an eye-catching background. To do this just once and apply it to each button, I would change the border radius of the “_Base Button” structural component.

That’s it! We have designed the awesome primary button in no time. Now, it’s time to hand off the design to the developers to convert the Figma components to React.

Handoff to Developers

This is the step where Unite UX comes in. I will export the ready design with the Unite UX plugin for Figma, which I have installed already.

I will navigate to “Export and handoff” from the menu. I will select just the Buttons frame for now as I’ve changed just it, confirm the automatically connected design tokens and styles, and create a new Awesomeness project.

After the project is created and the design is exported to Unite UX, I will share it with the developers on the team, so they can do their bit of the work.

Transfer Design Intent from Figma to React Styled Components

At this point, we have this awesome primary button designed and specs shared with the developers. We can now start transferring the design from Figma to the real React components.

To help with that, I’ll move to the Unite UX cloud-based web application.

The Unite UX working space has two canvases. The one on the left shows the exported Figma design. I can inspect all Figma layers and their respective styles. No design tools are required—all the magic happens in Unite UX.

The one on the right contains the real KendoReact components that I need to style and match the design. As you can see, the smart features of Unite UX have already applied all of the styles for us. If there is something else, you can quickly and easily do it by using the copy-paste feature.

As Unite UX is fully visual, I don’t need to switch between dev tools and design tools, and there’s no manual writing of custom styles. I can just inspect the button in the design, copy the styles and paste them to the React component on the right. If you need to tweak here or there, use the property editors.

I will do this for all states and double-check the result in the comparison pane.

When we have perfectly matching styles, it is time to incorporate them in the application or components library.

Apply Styles to React Components

To apply these styles to the React UI components, I will export from Unite UX.

The output’s content consists of two packages.

• Awesomeness package – This is a ready-to-use npm package containing all the styles and assets that would make the conversion from Figma to React components possible—CSS, SCSS and fonts.
• Documentation – This is our React-based Storybook application—installation info, brief documentation, examples and code fragments reference in one place. When you need to check on a component, open this app, follow instructions, copy code and reuse. In this way, you ensure a fast and consistent process.

Now, let us get to the last step and use the awesome button you have just designed and styled. First, copy the Awesomeness package in your root project directory. Then, install the React Button library from KendoReact (it's on npm: @progresss/kendo-react-buttons) and awesomeness package as a local dependency.

Import the index.(s)css file in your main React component (App by default). To use the component, just copy the Storybook code example and place it in your code.

As an optional step, to further improve your Figma-to-React reusability success metric, you can abstract the button by wrapping it in a custom AwesomeButton component.

import React, { FunctionComponent, MouseEventHandler } from 'react';
import { Button } from '@progress/kendo-react-buttons';

type AwesomeButtonProps = {
  onClick?: MouseEventHandler<HTMLButtonElement>;
};

const AwesomeButton: FunctionComponent<AwesomeButtonProps> = ({ children, onClick }) => (
  <Button primary onClick={onClick}>
    {children}
  </Button>
);

AwesomeButton.defaultProps = {
  onClick: undefined,
};

export default AwesomeButton;

Summary

Aaaand that’s it. We’ve completed the Figma to React journey and met all our goals—short time to develop, consistency between Figma design and real React components, and high built-in reusability.

Try it out yourself.

Happy coding!