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

> Verbind Figma met uw Macaly-account

Figma is een collaboratieve designtool voor interfaces, prototypes en designsystemen. Verbind uw account eenmalig en de agent zet uw designs, componenten en stijlen rechtstreeks om in werkende onderdelen van uw project.

<Callout icon="user">
  Beschikbaar in alle pakketten
</Callout>

## Waarom Figma verbinden

* **Uw designs worden echte pagina's.** Wijs de agent naar een Figma-bestand en deze bouwt de layout, componenten en spacing om tot een responsive pagina, zodat u uw design niet handmatig hoeft na te bouwen.
* **Uw build blijft automatisch on-brand.** De agent haalt uw componenten, stijlen en variabelen op, inclusief een kant-en-klare Tailwind-configuratie, zodat uw project overeenkomt met uw designsysteem zonder handmatig herwerk.
* **Draag designs over zonder de chat te verlaten.** Exporteer elk frame als afbeelding, haal devresources en bestandsdetails op, en sla het heen-en-weer gepingpong tussen Figma en uw project over.

## Wat u nodig hebt

* Een **Figma-account**. Maak er gratis een aan op [figma.com](https://www.figma.com)
* Een Figma Organization- of Enterprise-abonnement als u gepubliceerde variabelen of volledige bibliotheekanalyses wilt

## Verbind Figma met Macaly

<Steps>
  <Step title="Open Instellingen">
    Ga naar **Instellingen → Integraties** in uw Macaly-workspace.
  </Step>

  <Step title="Verbind Figma">
    Zoek de kaart van Figma in de lijst met apps en klik op de knop **Verbinden**.
  </Step>

  <Step title="Autoriseer uw account">
    Er wordt een nieuw venster geopend, waarin u wordt gevraagd in te loggen bij Figma. Zodra u de toegang goedkeurt, wordt u teruggeleid naar Macaly.
  </Step>
</Steps>

## Gebruik Figma vanuit de chat

Eenmaal verbonden beschrijft u wat u wilt en de agent regelt de rest.

Zet een design om in een pagina:

```
Dit is mijn Figma-design voor de prijzenpagina [link]. Bouw het om
tot een echte pagina, houd de layout, componenten en spacing aan,
en maak hem responsive.
```

Breng uw designsysteem in het project:

```
Haal de stijlen en kleurvariabelen op uit dit Figma-bestand en
zet ze om in een Tailwind-configuratie voor mijn project.
```

Exporteer assets terwijl u bouwt:

```
Exporteer het frame "Hero" uit mijn Figma-bestand als SVG en
voeg het toe aan de homepage.
```

Of bouw voort op uw designbibliotheek:

```
Ik bouw een documentatiesite voor een designsysteem. Haal de
componenten en stijlen op uit onze Figma-bibliotheek en toon ze
met previews.
```

## Wat de agent kan doen met Figma

Zet de structuur, componenten en stijlen van een bestand om in responsive pagina's, extraheer designtokens en een Tailwind-configuratie, exporteer frames als afbeeldingen, en haal bestandsdetails, opmerkingen en versiegeschiedenis op voor een nette overdracht. Gepubliceerde variabelen en bibliotheekanalyses vereisen Figma Organization of Enterprise.

## Goed om te weten

* **U verbindt eenmalig.** Elk project in uw workspace hergebruikt dezelfde Figma-verbinding.
* **Sommige bibliotheekfuncties vereisen een betaald Figma-abonnement.** Gepubliceerde variabelen en delen van de bibliotheekanalyse vereisen een Figma Organization- of Enterprise-abonnement.
* **Uw account, uw controle.** De agent onderneemt alleen actie wanneer u erom vraagt. U kunt Figma op elk moment loskoppelen via **Instellingen → Integraties**.