---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Studio](https://academy.laioutr.com/en/bereiche/studio)
- [Design and brand](https://academy.laioutr.com/en/leitfaeden/design-and-brand)
- [Work with the Figma Kit and hand off to development](https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development)
# Work with the Figma Kit and hand off to development
The Laioutr Figma Kit is published as a library in the team's own Figma workspace, first the UI Kit with the tokens, then the specialised libraries. Because variable and component names match code and Studio 1:1, designs can be handed off to development without a translation step.
## Before you start
- Plan
- All plans
- Duration
- 10 min
### Prerequisites
- A Figma team with permission to publish libraries
- The .fig files of the Laioutr Figma Kit, for example from Laioutr's Figma Community profile
Last reviewed on October 15, 2026
The **Laioutr Figma Kit** is the Laioutr design system as a Figma library. It is mirrored 1:1 in Studio: every component in Figma has a counterpart as a section or block, every variable a counterpart as a CSS custom property.
The kit consists of several libraries. The **Laioutr UI Kit** is the core, with all design tokens as Figma Variables and foundation components such as buttons, inputs and modals. Specialised libraries build on it, such as SHOP, CMS and Inpage Navigation, plus further ones for Navigation, SaaS, B2B, Booking, Retail and Marketplace.
Components are built mobile first, use auto layout and include states such as hover, focus and disabled. The variables contain modes for light and dark and for mobile and desktop.
One rule keeps the handoff smooth: **never rename existing names**; add new variables and components instead. Development can then map designs directly to existing sections and blocks and only build genuine extensions.
## Step by step
1. 1 ### Step 1: Create a project in Figma
Create a new, empty project in the Figma team, for example named Laioutr Design System. This keeps all libraries in one place.
2. 2 ### Step 2: Import the .fig files
Drag and drop the provided .fig files into the new project.
3. 3 ### Step 3: Publish the UI Kit first
Open the Laioutr UI Kit file and click **Publish**. It contains the global variables that all other libraries rely on.
4. 4 ### Step 4: Publish the specialised libraries
Open the SHOP, CMS and Inpage Navigation files one by one and publish them. If variables are missing afterwards, use **Swap library** via the library icon in the **Assets** tab to reconnect them to the newly published UI Kit.
5. 5 ### Step 5: Enable the libraries in the design file
In the design file, open the **Assets** panel, click the library icon and enable all Laioutr libraries.
6. 6 ### Step 6: Apply a theme mode
Select a frame or page and use the variable icon in the right sidebar to switch between the theme modes and between mobile and desktop.
7. 7 ### Step 7: Extend instead of renaming
Adjust brand values through the theme variables and add new components as separate components. Never rename existing variables or components, because the names are linked to code and Studio.
8. 8 ### Step 8: Hand off to development
Share the design with the development team and mark which parts use existing sections and blocks and which are new. The team transfers changed token values into the project theme, and new components are built as custom sections and blocks.
## Check the result
Insert a component from the SHOP library into the design file and switch the theme mode: colours and fonts change with it. If the component shows no variable links, the library connection is not yet in place.
## Frequently asked questions
Why does the UI Kit have to be published first?
All other libraries use the variables from the UI Kit. If it is not published, the specialised libraries cannot find their tokens.
Where are the changes of a new kit version listed?
Each library file has its own page with release notes, for example Changelog. Figma also shows a short summary when a library update is accepted.
Can custom components be added?
Yes. New variables and components can be added freely, as long as the existing names stay unchanged.
## Related
- [Understanding design tokens and themes](https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes)6 min
Design tokens are named variables for colours, fonts, spacing, radii and effects that every Laioutr UI component is built on. A theme assigns concrete values to these tokens and changes the look of the whole storefront without touching any component.
- [UI Kit settings: colours, fonts, icons and versions](https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions)7 min
In the UI Kit settings in Studio, the team defines the project's colour scales, fonts and icon libraries and sees every change in the preview right away. The state is saved as a version and applies to the storefront once published.
- [Define custom Sections and Blocks for Studio](https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio)15 min
Every Section and Block is a Vue file with an exported definition, created with defineSection or defineBlock. It sets the component name, Studio metadata, fields and slots, and Studio builds its picker and sidebar from it.
- [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min
Sections are the large areas of a page in header, body or footer, and blocks are content units inside a section's slots. Both are added and arranged in the layers tree and edited in the properties panel.
## Learn it in a lesson
- [Figma kit and handover to development](https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover)12 min
## [Design and brand](https://academy.laioutr.com/en/leitfaeden/design-and-brand)
Search this guide
1. [Understanding design tokens and themes](https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes)6 min
2. [UI Kit settings: colours, fonts, icons and versions](https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions)7 min
3. [Work with the Figma Kit and hand off to development](https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development)10 min
4. [Accessibility according to WCAG 2.1 AA](https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa)6 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/en/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Design and brand",
"item": "https://academy.laioutr.com/en/leitfaeden/design-and-brand",
"position": 3
},
{
"@type": "ListItem",
"name": "Work with the Figma Kit and hand off to development",
"item": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Why does the UI Kit have to be published first?",
"acceptedAnswer": {
"@type": "Answer",
"text": "All other libraries use the variables from the UI Kit. If it is not published, the specialised libraries cannot find their tokens.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Where are the changes of a new kit version listed?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Each library file has its own page with release notes, for example Changelog. Figma also shows a short summary when a library update is accepted.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Can custom components be added?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. New variables and components can be added freely, as long as the existing names stay unchanged.
"
}
}
]
}
```