An elegant reusable system for the Figma Community

Design Systems · Tools · Community

Please visit Figma Community and get a copy of the file.

When I started making the Reboot system, I aimed to solve the problem of inconsistent documentation across products at N3TWORK.

We needed a customizable documentation system for UX Specs and Design Systems. As teams moved into remote and asynchronous work, it was essential to unify around a format that included design thinking with the mocks. The framework needed to be simple enough for everyone to adopt quickly without losing time.

Getting people to read documentation is difficult. Plus, design docs are consumed by a broad audience of developers, stakeholders, executives, and QA. To ease this burden, I ruthlessly prioritized comfortable and effortless reading. I studied documentation sites and identified important attributes of typographic best practices. This resulted in generous white space, idealized line length, leading, letter spacing, and clear content dividers.

The system need to be visually flexible. All the styles are paired down to the essential typography and colors. This means you can re-theme the system in seconds. And you can quickly toggle screen size, aspect ratio, and orientation. I wanted designers to be able to download the system and get straight to work.

Eventually, I decided to make it a personal project during a short sabbatical in 2021. When complete, I shared the file with the Figma Community. Reboot was featured for several weeks, and copied over 1,600 times.

Examples of Reboot for specs and flows

Design token documentation