Case study

Gist

Create a Figma plugin that would let designers write, link, and publish component documentation without leaving their working file.

When
Early 2022
Length
About a month
Role
Designer and developer
Team
Myself

Define

Working on the design system team at Seismic, our component documentation lived outside of Figma. As a designer, it's frustrating to have to leave the working file and search the web or a Figma file for component documentation.

I wanted the docs to live where the work was happening: on the component itself.

Ideate

Having built a data plugin for Sketch before (link to the Unit data plugin case study), a Figma plugin seemed like the natural choice. The core idea: attach the documentation to the component, so the docs follow it into every working file it's used in.

Writing needed to feel familiar, so I settled on Markdown in a rich text editor. And since plenty of teams already keep docs elsewhere, linking out mattered as much as writing: iframes, GitHub, JSONBin, and Notion.

Build

I built the first version in about a month for the design system team at Seismic. A designer could select a component and write docs in the editor, and anyone using that component could read them right in their working file. No more leaving Figma.

I quickly realized the potential went beyond our team. In January 2022 I pitched the idea in the very first tweet on my account, and the response made it clear I was onto something.

The first tweet from @mk_wlsn pitching Gist: 'View component docs without leaving your working file' — with a demo GIF and 431 likes
My first ever tweet, pitching Gist in January 2022.

A month later Gist came out of beta, free to everyone on the Figma Community, alongside a marketing site and a docs site.

Iterate

A few months after launch, the next idea went wider: publishing. If every page of a doc site is just a frame in Figma, Gist could publish an entire documentation site straight from the design file. To prove it, I built Gist's own docs site with Gist. Setup took about five minutes.

A Figma frame titled 'Introduction' being edited with the Gist plugin, mirrored live on a published doc site
Editing a frame in Figma with Gist, mirrored live on the published doc site.

I followed it up with a tutorial on publishing a doc site from Figma in about 10 minutes.

Results

Gist grew well beyond the Seismic design team. It has 8.2k users and 442 likes on the Figma Community, where it's still free today.

Lookback

What I liked

  • Docs finally living where the work happens. A designer using a component gets the rules and usage without breaking flow.
  • Publishing the plugin's own docs site with the plugin. Dogfooding Gist was the fastest way to find its rough edges.

What I learned

  • Shipping a product end to end as one person: the plugin, the marketing site, the docs site, the tutorial, and the support that follows.
  • Building for a platform. The Figma plugin API shaped what the editor could be, and working with it deepened the plugin knowledge I started with Sketch.

What I would do differently

  • Go wider, sooner. Doc site publishing was the idea that resonated most, and I would expand Gist from component docs into full design system sites.