FAQs

Getting Started

How do I get started with Lio?

Install Lio Toolbox from the Figma plugin directory. Run "Project Setup" on a new file. The plugin will generate the base structure, and you can start designing immediately with minimal variables. Read the method documentation as you go.

Do I need to learn the whole method before starting?

No. Start with the base setup and learn incrementally. The method is designed to be picked up through practice, not memorized upfront.

Can I use Lio on an existing project?

Yes, but it works best when starting fresh. For existing projects, you can adopt parts of the naming conventions and gradually migrate. Full automation works best with clean slate projects.

Method and Tooling

Can I use the method without Lio Toolbox?

Technically yes, but you'll lose the automation that makes Lio practical. The plugin handles repetitive setup, variable generation, and documentation. Without it, you'd be implementing everything manually.

Why is Lio only for Figma?

Figma currently offers the most efficient workflow for web design: variables, components, auto-layout, and collaboration in one place. Lio Toolbox is built exclusively for Figma because that's where the method works best.

Can multiple designers work on the same Lio file?

Yes. Lio files work like any other Figma file with standard collaboration features. The variable structure and naming conventions help maintain consistency across team members.

Typography

Why doesn't Lio tie typography styles to HTML semantics?

Web design hierarchy is contextual. A semantic <h1> might need to look like a subtitle in one context and a hero title in another. Decoupling visual styles from semantic tags maintains flexibility while keeping accessibility intact through proper HTML structure.

What's the difference between a scale and a system in typography?

A scale provides foundational size options (title-0 through title-6). A system adds intent through modifiers (.button, .navLink, .legals). Lio starts with a scale for exploration, then evolves into a system by encoding proven patterns.

Why are line-height and letter-spacing excluded from Figma variables?

These properties are typically expressed as relative values (percentages) on the web. Since Figma variables don't support percentage-based typography values, Lio manages these properties directly at the style level for better parity with production code.

Layout and Spacing

How minimal should I keep my spacing scale?

Start with the default (S, M, L, XL) focused on section-level spacing. Only expand or add semantic tokens when patterns prove recurring and meaningful. Save decisions, don't create exhaustive systems prematurely.

Can I customize the default 12-column grid?

Yes. Lio Toolbox generates a grid style with variables for width, margin, gutter, and columnCount. Adjust these freely to match your project while maintaining consistency across breakpoints.

When should I add semantic spacing tokens?

Only when spacing decisions repeat consistently across the project. They should represent clear, proven patterns (like ctaWrapper or carouselGap), not one-off exceptions.

Color

Why does Lio use surface/onSurface instead of semantic color roles?

This contextual model works better for web projects where visual identity often evolves during design. It provides structure without forcing premature decisions about UI semantics.

What if my project needs more color tokens than the defaults?

Start minimal and expand only when patterns emerge. If you need additional semantic colors or surface variations, extend the collection using the same naming conventions to maintain consistency.

Why does Lio use "strong" and "weak" instead of "light" and "dark"?

Because the system supports both light and dark modes. Using "light" or "dark" would create ambiguity. "Strong" and "weak" describe emphasis levels that work regardless of theme.

Naming and Conventions

Why does Lio use camelCase?

CamelCase aligns with Figma standards and developer-friendly conventions. It reduces translation friction during handoff and avoids creating "designer-only language" that needs translation.

Responsive Design

How does Lio handle responsive design?

Layout variables in Figma can be mapped to breakpoints (mobile, tablet, desktop). Lio Toolbox generates responsive structures by default, letting you define different values for grid, spacing, and shape tokens across screen sizes.

Scope and Limitations

What kind of projects is Lio best for?

Landing pages, marketing sites, brand refresh projects, editorial websites, agency workflows, and exploratory web design phases. Projects where visual identity may evolve and quick iteration is valued.

Where is Lio NOT the best fit?

Enterprise multi-platform design systems, multi-state UI-driven products, mobile OS-level frameworks, and interaction-heavy applications. Lio is optimized for web communication experiences, not product interfaces.

Can Lio work with component libraries?

Yes, but Lio focuses on foundational tokens (color, typography, spacing), not components. You can use Lio's token system as the foundation and build components on top of it.

Can I use Lio for mobile app design?

Not recommended. Lio is specifically built for web design workflows and constraints. Mobile app design has different requirements that are better served by product-focused design systems.