Overview
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.
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.
Inpage Navigation
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.