---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover"
locale: en
meta:
  "og:title": "Academy Lesson"
---

[Go to home](https://academy.laioutr.com/en)

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

- [Figma kit and handover to development](https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover)

Figma kit and handover to development

# Figma kit and handover to development

12 min

The Figma kit mirrors the Sections, Blocks and tokens of Laioutr. This lesson shows how designs are built directly on these building blocks, how new sections are described so development can implement them and how Design System 1.0 keeps Figma and code aligned.

## Key takeaways

- Designs use the building blocks from the Figma kit.
- New sections need a clear description of slots and properties.
- Tokens connect Figma and code.

## Read more

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

  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.
- [Design System 1.0: tokens, colour scales and themes](https://academy.laioutr.com/en/artikel/design-system-1-0-tokens-colour-scales-and-themes)7 min In preparation

  The Laioutr Design System 1.0 is the shared foundation for the UI Kit and themes. It is built entirely on design tokens that exist as variables in Figma and in the UI Kit, so a theme changes the whole look without touching components.
- [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.

## 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/lektionen/ux-designer-figma-kit-and-handover#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic UX Designer",
          "item": "https://academy.laioutr.com/en/lernpfade/ux-designer-learning-path",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Figma kit and handover to development",
          "item": "https://academy.laioutr.com/en/lektionen/ux-designer-figma-kit-and-handover",
          "position": 3
        }
      ]
    }
  ]
}
```