A breakdown of the design system compliance levels with explanations and considerations.

Figma is the primary UI design tool for the Basis Product design team. We use it to design our UI, build clickable prototypes, create specs for development hand-off, and manage our design system. To login and get stated using Figma follow these steps:

Once you have your account set up and you've familiarized yourself with the team projects, it's time to create your first file.

Once you've create a new figma file, use this guide to get started creating responsive designs in Figma.

Figma variables represent many of our design foundations.

Prepare your design for development.

Figma libraries are a great way to share and reuse design assets with our team. However, libraries can have bugs. If you find a bug in the Figma library, you can report it to the team so that it can be fixed.

UI wireframes are low-fidelity visual guides that outline a digital product’s structure, layout, and functionality, focusing on usability and user flow before high-fidelity design and development.

Have an idea for a new component or update for the design system? We’d love to have your contribution!

Framer is a CSM platform that we use to display our design system documentation. If you are creating new page to document a new addition to the design system, follow these steps:

Learn how to use our design system animation tokens in your prototypes.