Introduction
How to Start
How to start using the Figma Kit.
Getting Started
Use this page as a quick starting point for setting up the libraries in your Figma workspace.
- Create a New Project: In your Figma team, create a new, empty project (e.g., named "Laioutr Design System"). This keeps all four library files in one central location.
- Import the .fig Files: Drag and drop the four provided .fig files into this new project.
- Publish the Core Kit First: Open the Laioutr UI Kit file and click the "Publish" button. This file contains the global variables (tokens) that the other libraries rely on
- Publish Specialized Libraries: Open the SHOP, CMS, and Inpage Navigation files one by one and publish them.
Note on Library Connections: If the specialized libraries do not automatically recognize your newly published Core Kit (e.g., variables appear missing or unlinked), you can manually re-establish the connection using Figma's Swap library function:
- Open the Assets tab (Alt + 2) within the specialized file (e.g., SHOP Components).
- Click the Library icon (the book symbol) and locate the original library reference that needs to be replaced.
- Select "Swap library", choose your newly published Laioutr UI Kit from the dropdown, and click Swap library.
- Figma will automatically reconnect all components and variables based on name matches.
- Enable for Your Design File: In your actual design project, open the "Assets" panel, click the library icon, and enable all four laioutr libraries.
- Apply Your Theme: Select a Frame or Page and use the Variable icon in the right sidebar (under "Layer" or "Selection colors") to toggle between the 4 Theme Modes or switch between Mobile/Desktop views.