Hero image of several components used in the wendy's design system

Design Systems and Tooling at Bonusly

Product design

I had the privilege of joining Bonusly as employee 23 and only the third designer, which means that a lot has changed over the last 2+ years now that the company is 100+ people and growing larger every day. I'm super proud of what we've done to define designer experience, adopt design tooling that lets us ship quickly, and set up infrastructure with Figma and Slack that helps keep stakeholders in the loop.

Wait, what is Bonusly? ->
The website before the redesign
Variants and Auto Layout galore, our Figma design system file uses all the stuff you'd expect to make mocks and prototyping lightning fast.
The website before the redesign
It's also built atomically where larger components consume smaller components, like this menu bar component.
Process artifacts including sketches and sticky notes
Using the Framer Motion React library for animations makes for an incredible prototyping-in-the-browser experience
The website before the redesign
Each of these components shares props, variables, and general nomenclature with a Storybook component.
The website before the redesign
Storybook driven development has been a wonderful workflow, and you can read a bit about how we do it from Alex Robertson on the Engineering team here
Process artifacts including sketches and sticky notes
I also spent a hackathon building a data plugin with the Bonusly API, so that designers can populate mocks with real app data quickly. Architecture based on the wonderful Figma Github Data plugin.
The website before the redesign
The plugin lives in a private GitHub repo available for all designers with documentation on how to use it. I tweeted about building it too.
The website before the redesign
We also built a small Slack application that posts in the #design channel every day at 4p what changes (if any) were made to our designsystem.fig file. I also tweeted some thoughts about it here.

If you want to chat design tooling, Figma plugins, designer experience, why Framer Motion is the best React animation library, slide into my DMs or send me an email.

More like this

Fancy a burger?

Case study ->

Streamin' ain't easy

Case study ->

Storytelling that really matters

Case study ->

Sketch + GIFS = !!!

Case study ->

Turn that 404 into a 444!

Case study ->

Design, etc.

Whomst? ->