---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe"
locale: de
meta:
  "og:title": "Academy Lesson"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Agentic UX Designer](https://academy.laioutr.com/lernpfade/lernpfad-ux-designer)

- [Figma-Kit und Übergabe an die Entwicklung](https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe)

Figma-Kit und Übergabe an die Entwicklung

# Figma-Kit und Übergabe an die Entwicklung

12 Min.

Das Figma-Kit bildet Sections, Blocks und Tokens von Laioutr ab. Diese Lektion zeigt, wie Entwürfe direkt auf diesen Bausteinen entstehen, wie neue Sections so beschrieben werden, dass die Entwicklung sie umsetzen kann, und wie Design System 1.0 Figma und Code zusammenhält.

## Das Wichtigste in Kürze

- Entwürfe nutzen die Bausteine aus dem Figma-Kit.
- Neue Sections brauchen eine klare Beschreibung von Slots und Eigenschaften.
- Tokens verbinden Figma und Code.

## Weiterlesen

- [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.

  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.
- [Design System 1.0: Tokens, Farbskalen und Themes](https://academy.laioutr.com/artikel/design-system-1-0-tokens-farbskalen-und-themes)7 Min. In Vorbereitung

  Das Laioutr Design System 1.0 ist die gemeinsame Grundlage für UI-Kit und Themes. Es baut vollständig auf Design-Tokens auf, die in Figma als Variablen und im UI-Kit als Variablen vorliegen, sodass ein Theme das ganze Erscheinungsbild ändert, ohne Komponenten anzufassen.
- [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.

## 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/lektionen/ux-designer-figma-kit-und-uebergabe#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic UX Designer",
          "item": "https://academy.laioutr.com/lernpfade/lernpfad-ux-designer",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Figma-Kit und Übergabe an die Entwicklung",
          "item": "https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe",
          "position": 3
        }
      ]
    }
  ]
}
```