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 Widget Cover

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 Widget Cover

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 Widget Cover

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 Widget Cover

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.

Figma Widget Userflow 1Figma Widget Userflow 2


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.

Figma Widget Sketches


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.

Figma Widget Design explorations


Final design

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

Figma Widget Final design


Versions

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

Figma Widget Versions


Usability testing

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

Figma Widget Usability testing results

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:

Updates, inspirations and thoughts.

Subscribe to my newsletter

Yann-Edern Gillet

Software Designer, Linear
Framer Awards Site of the Year 2022

Thunderstorm

© 2024 Yann-Edern Gillet

·

Updates, inspirations and thoughts.

Subscribe to my newsletter

Yann-Edern Gillet

Software Designer, Linear
Framer Awards Site of the Year 2022

Thunderstorm

© 2024 Yann-Edern Gillet

·

Updates, inspirations and thoughts.

Subscribe to my newsletter

Yann-Edern Gillet

Software Designer, Linear
Framer Awards Site of the Year 2022

© 2024 Yann-Edern Gillet