How We Built the Color Management Plugin for Figma. Chapter 3. Version 2.0 — Live Preview Mode.

We’re back! 👋 This is the third article in a series of four in which we describe the process of developing our Figma plugin. You can find all links below.

Chapter 1. Research and Ideation.
Chapter 2. Creating an MVP.

A feature we’ve been missing

In the previous article, I told you how we made the first version of Color Management. It was very cool and usable but lacked a crucial feature we needed — Live Preview, the ability to change color tokens in the plugin, and instantly see the changes directly in design mockups. Starting out, we spent quite some time brainstorming different ideas. And this storm gave us the most valuable one we had. I’d go so far as to call it a killer feature.

Although we planned to implement it since the beginning, we couldn’t add it straight away in the first version because of the complexity and amount of work it required. We needed to build a stable foundation first. And now we have it.

Problems and solutions around real-time editing

When we work on the design in Figma, we get instant visual feedback on every action, like when we create some text, a rectangle, or a frame or change the text or color of an element. Figma plugins can interact with elements in the workspace too, but there are some limitations developers have to consider:

• Strict limit to the amount of data processed. There is constant data transfer between the Figma app and a plugin, and it has a very strict limit to the amount of data that can be transferred at one point in time. This crucial aspect demanded our attention while building Live Preview. Updating mockups in real-time requires quite a vast data stream.
• Availability for mid-range PCs. While the general idea of real-time features sounds ambitious, it can cause significant performance issues for mid-range PCs. We wanted to support as many devices as possible, so performance was something we had to consider.

We spent some time discussing different ideas and approaches, but the ultimate solution for both problems was quite simple — we limited Live Preview to the user’s selection. That way, a user must select one or more elements in Figma to start editing styles and see real-time changes in that particular selection. Since a Figma file can contain many layouts, it would be very difficult to instantly update the entire design file, and only high-end computers could handle this.

We also did several tests on mid-range hardware to see how many selected elements they could handle. The result was quite good — an old laptop could easily process a large set of mockups (around 40k elements).

Working on Preview Mode turned out to be one of those cases where one change led to another and another, improving the overall experience every step of the way.

At first, we added Live Preview as an additional mode turned off by default. Our hopes and dreams became reality! Preview mode was a roaring success. It was so much better than the default one (where the plugin shows all the tokens present in the file with no real-time preview) that there was no point in keeping the default mode in the plugin anymore. So, we just cut it out completely.

Adding onboarding

Enabling Live Preview mode by default led us to introduce other changes to the way the plugin works. Since Live Preview only works with specific selections, it was important to let the user know about that. If the user didn’t have any element selected in Figma before launching Color Management, the token list in the plugin would be empty. It was important to make an empty state where the plugin would tell the user what they needed to do to start working.

Instead of a standard empty state message, we decided to add an onboarding screen with small tips for users but make it as unobtrusive as possible. If the user doesn’t have something selected in Figma while launching the plugin, they go to onboarding with the message “please select a frame you want to work with to start” and an option to swipe to see the other tips. If the user has something selected in Figma on plugin launch, they go straight to editing tokens.

I don’t think the critical importance of onboarding is lost on anyone, right? Well, okay, for the uninitiated, onboarding is a series of screens that guide users through the app’s interface and functions. It facilitates a positive user experience and helps educate the user about the functions and benefits of the plugin.

“Let the system do the work”

After implementing Live Preview mode and doing some trial runs, we discovered some insights. By adding this function, we actually changed the way people work with the plugin.

In version 1.0, the plugin was showing all the tokens at once. For the user, it was hard to find any specific token in a long list, forcing the user to use search or scroll through all the tokens in an attempt to find the one they required. By allowing us to work only with a selection, big or small, we were able to speed up the process by cutting out the time wasted on searching.

We noticed that despite our previous experience with the plugin, it’s a lot easier to select small frames and groups with up to six or seven tokens, edit them, and move to another small set of tokens by selecting the next frame. It makes the whole process a lot faster than before.

But we were hindered by the need to constantly press the “Save Changes” button before moving to the next frame. The “save” button was supposed to help avoid errors while working with the plugin, but in the end, it only complicated the process by adding one more action we didn’t really need. It was a dead weight on the whole process, so we left it on the cutting room floor.

We deleted the button and added an autosave feature to the plugin. Now every time a user switches to another selection or just closes the plugin, all the changes made are saved automatically.

Additionally, we modified the action history so that if the user made a mistake or accidentally selected something in Figma, they can undo changes by simply pressing CMD+Z.

Wrapping up

All these features really changed how the plugin works and how we interact with it. They allowed us to work so much faster and more efficiently. But wait, there’s more! In this and the previous articles, we focused on the core features of our plugin. Now it’s time to add the final touches and make the plugin as user-friendly and convenient as possible.

Thanks for making it to the end! I hope you got something from it. In the next and final article, you’ll see:

• Usability upgrade — adding final features to improve user experience,
• Adding a library of saved colors to the plugin,
• Making the workflow even faster with keyboard shortcuts.