For Designers

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.

Figma components are reusable design elements that mirror the behaviors and properties of the live code components.

Data Tables are one of the most complex components in our design system. These guides will show you how to use our templates to easily create and customize Data Tables that match our dev component.

Once you've create a new figma file, use this guide to get started creating responsive designs in Figma. Be sure to check out the layout and responsive docs pages for best practices.

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.

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

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.