Quickbase—
Bebop design system

● Background

Quickbase had already began and implemented parts of the design system before I was hired. We used Sketch, Zeplin, and Zeroheight to design, hand off designs to developers (and give product managers a view at our work), and publicize our design system internally. OneDrive was also used to make sure our Sketch files were available for other designers.

There were many issues that arose from the suite of apps that we used. Sharing files was a clunky process, it could get hard to make sure designers were working off of the latest files, and even small changes that content designers might want to edit needed to be communicated to designers or implemented later. In short, we had too many tools to keep track of and collaboration was more difficult that it needed to be.

● Process and solution

We had floated the idea of moving to Figma a few times, but once Figma and I connected via email, the migration process moved fast.

I set up meetings with Figma reps and our design team, estimated pricing for the move and what apps we could unify, while another designer and our manager helped drive the initiative internally. Email communications were shared by all of us.

We eventually moved to testing, and I set up the initial Figma library for us to start testing and eventually adopting it. One important decision for me was to rebuild Bebop from scratch for the transition. This helped me make sure I was building things with Figma best practices in mind and helped me keep inventory on what pieces we had.

● Research results

The result of our move to Figma and rebuilding the design system has led to:

• More collaboration: interaction, visual, and content designers can all work in the same space asynchronously.
• Edited states
• Improved file management: fewer files to work with and not needing files directly on our drives makes it easy to share work.
• More visibility into everyone's work: it's easier for designers to contact each other and share files for more consistency throughout our product
• Fewer tools: save money for other resources
• Customer benefit: faster design process, more concepts, more collaboration within the team for better designs, better output, more time to listen to customers and fix issues

● Ongoing work

There are many design system-oriented changes that would've made the process easier that went deeper than just moving from Sketch to Figma.

• Continually make updates and fixes to Bebop via new components, variants, documentation, and improved organization
• Make sure components are accessible visually (color contrast requirements), in documentation (tab orders, different states), and when handing off to developers
• Keep updated on Figma changes (Auto Layout, individual borders, etc.) and rebuilding things as needed
• Making sure component names are consistent with implementation
• Make sure components are accessible visually (color contrast requirements), in documentation (tab orders, different states), and when handing off to developers
• Pull in other team members when needed (interaction, content)
• Get Bebop to a state where it can be public

● Contributions

My published components and patterns include:

• Figma: Base design file setup, file organization, administration and governance
• Foundation: logos, sub-brand logos, color system, brand colors, icons, typography, markup
• Components: code text, option card, token, tooltip, skeleton state, form error and help states
• Patterns: panel, chrome, dialog, in-product guides, column picker