> ## Documentation Index
> Fetch the complete documentation index at: https://www.macaly.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma

> Verbinde Figma mit deinem Macaly-Konto

Figma ist ein kollaboratives Design-Tool für Interfaces, Prototypen und Design-Systeme. Verbinde dein Konto einmal, und der Agent verwandelt deine Designs, Komponenten und Stile direkt in funktionierende Teile deines Projekts.

<Callout icon="user">
  Verfügbar in allen Plänen
</Callout>

## Warum Figma verbinden

* **Verwandle deine Designs in echte Seiten.** Zeig dem Agenten eine Figma-Datei, und er baut Layout, Komponenten und Abstände in eine responsive Seite, sodass du dein Design nicht von Hand nachbauen musst.
* **Halte dein Projekt automatisch auf Marke.** Der Agent zieht deine Komponenten, Stile und Variablen, inklusive einer einsatzbereiten Tailwind-Konfiguration, sodass dein Projekt zu deinem Design-System passt, ohne dass du es manuell nachbaust.
* **Übergib Designs, ohne den Chat zu verlassen.** Exportiere jeden Frame als Bild, rufe Dev-Ressourcen und Dateidetails ab und spare dir das Hin und Her zwischen Figma und deinem Projekt.

## Was du brauchst

* Ein **Figma-Konto**. Erstelle eins kostenlos auf [figma.com](https://www.figma.com)
* Einen Figma-Organization- oder Enterprise-Plan, wenn du veröffentlichte Variablen oder vollständige Bibliotheks-Analytics willst

## Figma mit Macaly verbinden

<Steps>
  <Step title="Einstellungen öffnen">
    Gehe zu **Einstellungen → Integrationen** in deinem Macaly-Workspace.
  </Step>

  <Step title="Figma verbinden">
    Finde die Figma-Karte in der Liste der Apps und klicke auf die Schaltfläche **Verbinden**.
  </Step>

  <Step title="Dein Konto autorisieren">
    Ein neues Fenster öffnet sich, in dem du dich bei Figma anmelden sollst. Sobald du den Zugriff genehmigst, wirst du zurück zu Macaly geleitet.
  </Step>
</Steps>

## Figma aus dem Chat nutzen

Sobald verbunden, beschreibst du, was du willst, und der Agent erledigt den Rest.

Verwandle ein Design in eine Seite:

```
Here's my Figma design for the pricing page [link]. Build it
into a real page, match the layout, components, and spacing,
and make it responsive.
```

Bring dein Design-System ins Projekt:

```
Pull the styles and color variables from this Figma file and
turn them into a Tailwind config for my project.
```

Exportiere Assets während der Arbeit:

```
Export the "Hero" frame from my Figma file as an SVG and add
it to the homepage.
```

Oder baue auf Basis deiner Design-Bibliothek:

```
I'm building a design-system docs site. Pull the components
and styles from our Figma library and list them with previews.
```

## Was der Agent in Figma tun kann

Die Struktur, Komponenten und Stile einer Datei in responsive Seiten verwandeln, Design-Tokens und eine Tailwind-Konfiguration extrahieren, Frames als Bilder exportieren und Dateidetails, Kommentare und Versionsverlauf für eine saubere Übergabe abrufen. Veröffentlichte Variablen und Bibliotheks-Analytics erfordern Figma Organization oder Enterprise.

## Gut zu wissen

* **Du verbindest einmal.** Jedes Projekt in deinem Workspace nutzt dieselbe Figma-Verbindung.
* **Manche Bibliotheksfunktionen brauchen einen kostenpflichtigen Figma-Plan.** Veröffentlichte Variablen und Teile der Bibliotheks-Analytics erfordern einen Figma-Organization- oder Enterprise-Plan.
* **Dein Konto, deine Kontrolle.** Der Agent wird nur aktiv, wenn du ihn darum bittest. Du kannst Figma jederzeit über **Einstellungen → Integrationen** trennen.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.