Figma Kit

Overview

The Laioutr Figma UI Kit is a professional-grade design system that is mirrored 1:1 in Laioutr Studio. It is built to help teams design and ship extensive, high-performance storefronts and content-rich websites quickly, with a consistent handoff from design to production.

Library Structure

To ensure performance and scalability, the UI Kit is divided into multiple specialized Figma libraries. This modular approach helps prevent Figma memory/runtime issues and allows the component set to grow without compromising file stability.

Library content & purpose

Laioutr UI Kit

The core library containing all design tokens (variables) and foundational elements such as buttons, inputs, and modals.

Navigation Components

Components for global storefront navigation such as headers, menus, mobile navigation, search entry points, breadcrumbs, and utility switches.

SHOP Components

Components focused on shopping and product presentation such as product cards, grids, and filters.

CMS Components

Content-driven sections such as banners, text-image sections, hero modules, and editorial blocks.

SaaS Components

Subscription and pricing components such as pricing cards, plan grids, and feature comparison tables.

B2B Components

Components for complex purchasing workflows like roles, approvals, and quote/offer patterns.

Booking Components

Scheduling and availability-driven components for service-based booking journeys.

Retail & Multichannel Components

Patterns for multi-market/multichannel storefronts and scalable merchandising experiences.

Marketplace Components

Patterns for multi-vendor discovery, listings, and scalable navigation structures.

In-page Navigation (legacy kit)

A dedicated set of navigation components for linking categories and content in different visual styles.

Total control with Figma variables

The Laioutr UI Kit acts as the “brain” of the system: tokens are centralized as Figma Variables and reused across the specialized libraries. A single change to a variable can propagate through the whole system.

What’s included in the variables?

• Typography: Font families, sizes, and line heights.
• Layout: Spacing and sizing systems.
• Styling: Colors, border radii, and effects (shadows, blurs).
• Adaptivity: Modes for Light/Dark and Mobile/Desktop scaling.

Advanced component features

Mobile-first & responsive by default

Components are designed mobile-first and then scale across breakpoints.

Commonly used Figma features include:

• Properties & states (e.g. hover, focus, disabled)
• Instance swapping (icons / nested elements)
• Auto layout for natural responsiveness to content changes

Best practices & naming conventions

To keep the design-to-code pipeline intact:

• Do not rename existing variables or components. Names are linked to CSS custom properties and the Studio/frontend architecture.
• Extend freely: you can add new variables and custom components for your project needs, as long as you keep existing naming stable.