View on Figma Community

Focus on designing products, not documentation

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

I set out to create a flexible, elegant documentation system for UX Specs and Design Systems. The framework needed to be simple enough for myself and my team members to adopt quickly. It needed to be fast, and readable. As teams moved into remote and asynchronous work, it was essential to capture the design thinking alongside the specs and systems doc. I was particularly inspired by Notion, and their block-based architecture.

The problem was, I couldn’t find the time to work on the idea. Finally, I decided to make it a personal project during my sabbatical in 2021. When it was done, I decided to share the file with the Figma Community. Reboot was featured for several weeks, resulting in 1,500 duplications!

Optimized for reading

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 against typographic best practices. My experience working on the Amazon Kindle came in handy too. This resulted in generous white space, idealized line length, leading, letter spacing, and clear content dividers.

Sizing of elements

It was challenging to find a balance for relative sizing. Because the system was designed for creating flows and specs, the typography had to be relatively large. This prevented the Figma file from being consumable at 100%. Next best choice was to build it at 50% zoom.

Dark theme

Adding dark theme created complexity in the design. It was a necessity for video games, which are usually equivalent to a dark theme. Plus, most modern apps are now designed with ability to match the OS visual mode. The challenge was to ensure this complexity wasn’t passed onto the designer using the system. I could have built two different libraries and used Figma's Swap Library functionality. But, I opted to simply add dark theme variants with a toggle. This was more obvious and discoverable.

Customizable

I didn't want to impose my aesthetic. All the styles are paired down to the fewest possible type styles and colors. This means you can re-theme the system in seconds. I wanted designers to be able to download the system and get straight to work. And I knew it would be invaluable for consultants and contractors, who need their docs to match their client’s brands.

Flexible

We're always designing for multiple screen sizes these days. The tools for creating flows are designed so you can change the size, aspect ratio, and orientation. Plus, you can do things like extend the screen height to show long scroll views, etc. The arrows for connecting screens have options for adding numbers, gesture interactions.

Test drive

Luckily, I had a team of designers willing to take Reboot for a test spin. I also reached out to designer friends, who graciously integrated the system into their workflow. I immediately received a ton of positive feedback about the overall approach. Most of the critical feedback was related to complexity cause by nested base components, which I revisited and mostly removed. This made the system more lightweight and usable.