---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Studio](https://academy.laioutr.com/bereiche/studio)
- [Design und Marke](https://academy.laioutr.com/leitfaeden/design-und-marke)
- [Mit dem Figma-Kit arbeiten und an die Entwicklung übergeben](https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben)
# Mit dem Figma-Kit arbeiten und an die Entwicklung übergeben
Das Laioutr Figma-Kit wird als Bibliothek im eigenen Figma-Team veröffentlicht, zuerst das UI Kit mit den Tokens, danach die spezialisierten Bibliotheken. Weil Namen von Variablen und Komponenten 1:1 dem Code und Studio entsprechen, lassen sich Entwürfe ohne Übersetzungsschritt an die Entwicklung übergeben.
## Bevor du startest
- Tarif
- Alle Pläne
- Dauer
- 10 Min.
### Voraussetzungen
- Figma-Team mit dem Recht, Bibliotheken zu veröffentlichen
- Die .fig-Dateien des Laioutr Figma-Kits, zum Beispiel aus dem Figma-Community-Profil von Laioutr
Zuletzt geprüft am 15. Oktober 2026
Das **Laioutr Figma-Kit** ist das Design System von Laioutr als Figma-Bibliothek. Es wird 1:1 in Studio gespiegelt: Jede Komponente in Figma hat eine Entsprechung als Section oder Block, jede Variable eine Entsprechung als CSS Custom Property.
Das Kit besteht aus mehreren Bibliotheken. Das **Laioutr UI Kit** ist der Kern mit allen Design-Tokens als Figma Variables und den Grundkomponenten wie Buttons, Eingabefeldern und Modals. Darauf bauen spezialisierte Bibliotheken auf, etwa SHOP, CMS und Inpage Navigation, weitere für Navigation, SaaS, B2B, Booking, Retail und Marketplace.
Die Komponenten sind mobile first aufgebaut, nutzen Auto Layout und bringen Zustände wie Hover, Fokus und Deaktiviert mit. Die Variablen enthalten Modi für Hell und Dunkel sowie für Mobile und Desktop.
Für eine reibungslose Übergabe gilt eine Regel: **bestehende Namen nie ändern**, sondern neue Variablen und Komponenten ergänzen. Dann kann die Entwicklung Entwürfe direkt auf vorhandene Sections und Blocks abbilden und nur echte Erweiterungen neu bauen.
## Schritt für Schritt
1. 1 ### Schritt 1: Projekt in Figma anlegen
Im Figma-Team ein neues, leeres Projekt anlegen, zum Beispiel mit dem Namen Laioutr Design System. So liegen alle Bibliotheken an einem Ort.
2. 2 ### Schritt 2: .fig-Dateien importieren
Die bereitgestellten .fig-Dateien per Drag and Drop in das neue Projekt ziehen.
3. 3 ### Schritt 3: UI Kit zuerst veröffentlichen
Die Datei Laioutr UI Kit öffnen und auf **Publish** klicken. Die Datei enthält die globalen Variablen, auf die alle anderen Bibliotheken zugreifen.
4. 4 ### Schritt 4: Spezialisierte Bibliotheken veröffentlichen
Die Dateien SHOP, CMS und Inpage Navigation nacheinander öffnen und veröffentlichen. Fehlen danach Variablen, im Tab **Assets** über das Bibliothekssymbol mit **Swap library** die Verbindung zum neu veröffentlichten UI Kit herstellen.
5. 5 ### Schritt 5: Bibliotheken im Entwurf aktivieren
In der eigenen Design-Datei das Panel **Assets** öffnen, auf das Bibliothekssymbol klicken und alle Laioutr-Bibliotheken aktivieren.
6. 6 ### Schritt 6: Theme-Modus anwenden
Einen Frame oder eine Seite auswählen und über das Variablensymbol in der rechten Seitenleiste zwischen den Theme-Modi sowie zwischen Mobile und Desktop wechseln.
7. 7 ### Schritt 7: Erweitern statt umbenennen
Markenwerte über die Theme-Variablen anpassen und neue Komponenten als eigene Komponenten ergänzen. Bestehende Variablen und Komponenten nie umbenennen, weil die Namen mit Code und Studio verknüpft sind.
8. 8 ### Schritt 8: An die Entwicklung übergeben
Den Entwurf mit dem Entwicklungsteam teilen und kennzeichnen, welche Teile vorhandene Sections und Blocks nutzen und welche neu sind. Geänderte Token-Werte übernimmt das Team in das Projekt-Theme, neue Komponenten werden als eigene Sections und Blocks umgesetzt.
## Ergebnis prüfen
In der Design-Datei eine Komponente aus der SHOP-Bibliothek einfügen und den Theme-Modus wechseln: Farben und Schriften ändern sich mit. Zeigt die Komponente keine Variablen-Verknüpfung, ist die Bibliotheksverbindung noch nicht hergestellt.
## Häufige Fragen
Warum muss das UI Kit zuerst veröffentlicht werden?
Alle anderen Bibliotheken nutzen die Variablen aus dem UI Kit. Ist es nicht veröffentlicht, finden die spezialisierten Bibliotheken ihre Tokens nicht.
Wo stehen die Änderungen einer neuen Kit-Version?
Jede Bibliotheksdatei hat eine eigene Seite mit den Release Notes, zum Beispiel Changelog. Zusätzlich zeigt Figma beim Aktualisieren einer Bibliothek eine kurze Zusammenfassung.
Dürfen eigene Komponenten ergänzt werden?
Ja. Neue Variablen und Komponenten lassen sich frei ergänzen, solange die bestehenden Namen unverändert bleiben.
## Passend dazu
- [Design-Tokens und Themes verstehen](https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen)6 Min.
Design-Tokens sind benannte Variablen für Farben, Schriften, Abstände, Radien und Effekte, auf denen jede Komponente von Laioutr UI aufbaut. Ein Theme belegt diese Tokens mit konkreten Werten und ändert so das Aussehen der gesamten Storefront, ohne Komponenten anzufassen.
- [UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen](https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen)7 Min.
In den UI-Kit-Einstellungen in Studio legt das Team Farbskalen, Schriften und Icon-Bibliotheken des Projekts fest und sieht jede Änderung sofort in der Vorschau. Der Stand wird als Version gespeichert und gilt nach dem Veröffentlichen in der Storefront.
- [Eigene Sections und Blocks für Studio definieren](https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren)15 Min.
Jede Section und jeder Block ist eine Vue-Datei mit einer exportierten definition, erstellt mit defineSection oder defineBlock. Die definition legt Komponentenname, Studio-Metadaten, Felder und Slots fest, und Studio baut daraus Auswahl und Seitenleiste.
- [Sections und Blocks einsetzen](https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen)7 Min.
Sections sind die großen Bereiche einer Seite in Header, Body oder Footer, Blocks sind Inhaltseinheiten in den Slots einer Section. Beide werden im Layers-Baum hinzugefügt und angeordnet und in den Properties bearbeitet.
## In einer Lektion lernen
- [Figma-Kit und Übergabe an die Entwicklung](https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe)12 Min.
## [Design und Marke](https://academy.laioutr.com/leitfaeden/design-und-marke)
In diesem Leitfaden suchen
1. [Design-Tokens und Themes verstehen](https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen)6 Min.
2. [UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen](https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen)7 Min.
3. [Mit dem Figma-Kit arbeiten und an die Entwicklung übergeben](https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben)10 Min.
4. [Barrierefreiheit nach WCAG 2.1 AA](https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa)6 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Design und Marke",
"item": "https://academy.laioutr.com/leitfaeden/design-und-marke",
"position": 3
},
{
"@type": "ListItem",
"name": "Mit dem Figma-Kit arbeiten und an die Entwicklung übergeben",
"item": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Warum muss das UI Kit zuerst veröffentlicht werden?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Alle anderen Bibliotheken nutzen die Variablen aus dem UI Kit. Ist es nicht veröffentlicht, finden die spezialisierten Bibliotheken ihre Tokens nicht.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Wo stehen die Änderungen einer neuen Kit-Version?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Jede Bibliotheksdatei hat eine eigene Seite mit den Release Notes, zum Beispiel Changelog. Zusätzlich zeigt Figma beim Aktualisieren einer Bibliothek eine kurze Zusammenfassung.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Dürfen eigene Komponenten ergänzt werden?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ja. Neue Variablen und Komponenten lassen sich frei ergänzen, solange die bestehenden Namen unverändert bleiben.
"
}
}
]
}
```