Do it again. Time after time. Over and over.

We run into the same problem. We spend so much time re-building the same core web components and customizing their appearance. True, we start with an existing library like Semantic, but there's the inevitable customization to meet the design requirements. We start from scratch each time.

What about when an icon color needs to be updated?  This means revising the design file, generating the icon, creating a ticket for the engineers to do work, scheduling the ticket into a sprint, waiting for an engineer to pull the change into the repo, doing a test build, and on and on it goes.

But enough is enough.

tldr; We made code-generated Figma components via a plugin called Holy Grail. It enables designers to style React components directly in Figma and commit the changes to a git repo. Join our email list for updates and early access.

Figma Steps Forward

Figma, for the uninitiated, is a web-based design tool for creating user interfaces. We moved to Figma with vigor a few years ago for two primary reasons:

• Built in collaboration between designers and developers

• Cross-operating system compatibility backed by cloud storage

We migrated from Sketch, which certainly paved the way for Figma. Many of the concepts of reusable components and instance state overrides existed in Sketch. That's actually what made the transition so easy. It never felt like we were losing much (except the simple ability to work offline without pre-opening the file).

As part of Figma's recent round of big dollar funding and some of their own internal work, the foundation has been laid for Figma to move closer and closer to generating real web components. This is all very excellent and may eventually solve all of our problems. But we can't wait that long. This is a clear and present danger to rapid development and it may be years before Figma starts generating code.

Figma's plugin API makes for a simple way to attach new functionality to the already robust capabilities of the app. Many plugins exist to execute repetitive actions or import third-party information. The fact that the plugin is, in simplistic terms, running a website in a document-attached modal makes it easy to envision a powerful tool connecting designs to web components.

Storybook and React Components

For development, we also employ the open-source project Storybook to demonstrate components, views and full user interfaces outside of the actual application. It's a great tool and, along with expansions such as Chromatic, offers a fantastic way to segment code into reusable chunks and simplify visual code validation.

It seemed only natural to try and figure out a way to connect the React components residing in Storybook with the Figma designs. On top of that, the code repositories are hosted–each with their own APIs–setting the stage for a translation layer to expedite and simplify the component styling and maintenance process.

The Holy Grail

Holy Grail is a Figma plugin to make React component-based design and development simple. And yeah, we think it's the Holy Grail of UX development, hence the name.

Here is the workflow we're striving to achieve:

1. A new code project is scaffolded with the Holy Grail design system files

2. In Figma, the designer connects the Holy Grail plugin to the repo

3. A single button click generates all the reusable Figma colors, type styles and base components (like buttons and form elements) from the repo code

4. The designer changes these core components and clicks the "Publish" button in the Holy Grail plugin

5. A merge request is generated in git

6. The project infrastructure creates a Storybook build to demonstrate the updated components

7. The new design is reviewed, approved and merged into production code

Designers can now directly edit core components in Figma with their edits being directly checked into the normal developer workflow via git. A developer never has to be involved. How is that not the Holy Grail?

Closing the Gap

We're a bit past the proof-of-concept stage and certainly have a long way to go. We want to make robust middleware that successfully and accurately transforms a React component based on Figma styling. As of the writing of this article we successfully implemented:

• Connecting and persisting a repo (Github and Gitlab) connection via a Figma plugin

• Defined a design system JSON structure for themes and components

• Built-in inheritance of components which correctly and completely styles sub-component states and variants in Figma for simple components

This means we can abstract the customizable pieces of a component into a way that can be edited by Figma. The business logic of the component remains intact isolated from the visual styling within the React component.

Next on the Docket

We need your help. We're getting closer and closer to a private Alpha release of the plugin to test and debug. If you're interested in testing the plugin, join our mailing list and we'll keep you in the loop. We think this can revolutionize the way we design and implement systems for applications. Of course, we're not the only ones trying to solve this problem. In fact, we'll be thrilled if this becomes a solved problem even if we're not the ones to do it.

Let's all drink from the cup and hope for eternal life. Or at least let's be satisfied with instant styling updates in our software. Either way it seems like a win.

‍