Lio Toolbox

About this plugin

Lio Toolbox is a Figma plugin built for web design projects.

It helps UI designers set up projects faster, keep files consistent, and automate repetitive tasks across the design process.

The plugin is based on The Lio Method — a practical system for structuring design decisions, organizing variables, and documenting projects with clarity.

Lio Toolbox is used daily at Refokus Agency as part of our design workflow.

What is it for?

Lio Toolbox helps you:

1. Set up a complete web project structure in one click.
2. Generate color, typography, and layout styleguides ready for developer handoff.
3. Audit and systematize your typographic scale.
4. Convert text styles into variables and keep everything in sync.
5. Automate small but time-consuming tasks, like managing prototype flow points.

It doesn’t design for you.

It doesn’t choose colors, layouts, or typography.

Instead, it takes the decisions you’ve already made and turns them into structure, consistency, and documentation, following The Lio Method.

How to get started

1. Open your Figma file.
2. Run Lio Toolbox from the Plugins menu.
3. Start with Project Setup to create pages and variables aligned with The Lio Method.
4. Define your styles and tokens as usual.
5. Use Styleguide Assistant and Typography Tools to document and systematize your decisions.
6. Explore Other Automations to speed up specific web-design tasks.
7. Each section includes inline guidance and clear status messages.

Learn more

For detailed documentation, best practices, and examples based on The Lio Method, visit https://liomethod.framer.website/lio-toolbox