Improving design tokens usage for designers and tracking issues

Improving design tokens usage for designers and tracking issues

Improving design tokens usage for designers and tracking issues

Improving design tokens usage for designers and tracking issues

Figma launched Widgets in June 2022 that can stay inside a canvas and display relevant information and action without opening a plugin.

After distributing tokens, we wanted to work on helping our users in their design tokens usage. This will help engage users with Specify and improve our retention.

Company

Specify

Period

Nov. to Dec. 2022

Space

Design Operations

Platforms

Web

Key Deliverables

User flows, Mockups, Prototypes, Animations, Code

48%

of paying users had a try to the widget since its release

1k+

installations directly from Figma Community

Figma launched Widgets in June 2022 that can stay inside a canvas and display relevant information and action without opening a plugin.

After distributing tokens, we wanted to work on helping our users in their design tokens usage. This will help engage users with Specify and improve our retention.

Company

Specify

Period

Nov. to Dec. 2022

Space

Design Operations

Platforms

Web

Key Deliverables

User flows, Mockups, Prototypes, Animations, Code

48%

of paying users had a try to the widget since its release

1k+

installations directly from Figma Community

Figma launched Widgets in June 2022 that can stay inside a canvas and display relevant information and action without opening a plugin.

After distributing tokens, we wanted to work on helping our users in their design tokens usage. This will help engage users with Specify and improve our retention.

Company

Specify

Period

Nov. to Dec. 2022

Space

Design Operations

Platforms

Web

Key Deliverables

User flows, Mockups, Prototypes, Animations, Code

48%

of paying users had a try to the widget since its release

1k+

installations directly from Figma Community

Figma launched Widgets in June 2022 that can stay inside a canvas and display relevant information and action without opening a plugin.

After distributing tokens, we wanted to work on helping our users in their design tokens usage. This will help engage users with Specify and improve our retention.

Company

Specify

Period

Nov. to Dec. 2022

Space

Design Operations

Platforms

Web

Key Deliverables

User flows, Mockups, Prototypes, Animations, Code

48%

of paying users had a try to the widget since its release

1k+

installations directly from Figma Community

Opportunities

Here are the main opportunities we detected where the ratio reward/risk was balanced enough for this feature to be interesting for us to work on.

Improve design tokens usage for designers

Track issues, know what is collected and how (local styles, pages, frames), in which repositories


Improve acquisition

Being present where the designers are building (Figma) may help us in acquiring more users.

Design work

How we managed to build this feature and achieved these results

Shaping

Pitch + User flows

Before diving into the design work, we shaped with Maud (Product Manager) a first version of the user flows, wrote a pitch, and de-risked it with developers.


Sketches

While back-end developers were in charge of creating these configuration templates, I worked on the information architecture & layout of this project.

Once the widget is placed on the canvas, the first panel lists all Specify repositories connected to the Figma file. The second panel lists all the frames and local styles inside the Figma file connected to a Specify repository.


De-risk and rabbit holes

By having several discussions with engineers and providing time for them to explore the Notion API possibilities, we “de-risked” this project by ensuring we reduced as many gray zones as possible.

Building

Design explorations

On the first days, I explored a lot of variations regarding information hierarchy, action placement, iconography, and interactions.


Final design

After a bunch of iterations and discussions with engineers, I created this final design for the Specify Figma Widget.


Versions

We also defined milestones with Maud (PM) and engineers by removing actions and changing the listing from the desired final version.


Usability testing

We submitted the first version of this new feature to our paying users and recently (less than three months) registered free users.

See it live

Want to check out the final result? Here you go:

Outcomes

Key results we got a month after the release

48%

of paying users had a try to the widget since its release

1k+

installations directly from Figma Community

Credits

Thanks to this incredible team we exceeded expectations, S/O to them

Product Management

Maud Miguet

Design

Yann-Edern Gillet

3D + Motion

Thibaut Crepelle

Copywriting

Louis Chenais

Implementation

Allan Michay Nathanaël Labreuil

API & Infrastructure

Allan Michay

Read other case studies

Learn more about my work with this selection:

Notion as Destination

Automating design system documentation through streamlined updates

Command Line Experience

Refining Command Line Interface for efficient design pipelines setup

Configuration Templates

Enhance parser discovery for smoother developer onboarding