Playbook seamlessly integrates with Figma, providing a 1:1 match to our open-source platform. The library offers meticulously crafted components with adjustable properties, allowing designers to quickly build out complex designs straight out of the box.

1. Go to the Playbook Design System on the community page and add it to your team. Make sure to add the library to individual projects. 

2. Explore Playbook components, styles, and guidelines within Figma. Tailor the design system to match your project's unique requirements by adjusting colors, fonts, and other elements.

Utilizing Playbook Library

Figma's cutting edge tools

This library allows designers to quickly build and customize UI. Every component created makes use of Figma’s advanced features like auto-layout, properties, and nested instances, ensuring precise design quality and efficiency. With this, components are instantly ready to use, with all variants included and available without the need to detach instances. In addition, global variables, typography styles, and color tokens allow for quick customizability throughout the entire library.

Dependencies

Font

The Playbook library is designed to work well with sans-serif fonts. You can easily replace the library’s current font with any font styles of your choosing and all components will update accordingly.

Icons

Playbook utilizes Font Awesome 6 Pro for its icons. Font Awesome 6 Pro is a paid icon library font from Font Awesome. You can acquire it from Font Awesome or use their free font, Font Awesome 6 Free. Alternatively, you can replace Playbook icons with any icon library of your choice.

Updates

The playbook team periodically updates the library. Check back on the library page in Figma to see our change log and make sure to keep your files updated.