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

> Yhdistä Figma Macaly-tiliisi

Figma on yhteistyöhön tarkoitettu suunnittelutyökalu käyttöliittymille, prototyypeille ja design-järjestelmille. Yhdistä tilisi kerran, niin agentti muuttaa suunnitelmasi, komponenttisi ja tyylisi suoraan toimiviksi osiksi projektiasi.

<Callout icon="user">
  Saatavilla kaikissa paketeissa
</Callout>

## Miksi yhdistää Figma

* **Muuta suunnitelmasi oikeiksi sivuiksi.** Osoita agentille Figma-tiedosto, niin se rakentaa asettelun, komponentit ja välistykset responsiiviseksi sivuksi, eikä sinun tarvitse rakentaa suunnitelmaasi uudelleen käsin.
* **Pidä projektisi automaattisesti brändin mukaisena.** Agentti hakee komponenttisi, tyylisi ja muuttujasi, myös valmiin Tailwind-määrityksen, joten projektisi vastaa design-järjestelmääsi ilman käsityötä.
* **Luovuta suunnitelmat kehitykseen poistumatta keskustelusta.** Vie mikä tahansa frame kuvana, hae kehitysresurssit ja tiedoston tiedot, ja jätä Figman ja projektisi välinen edestakainen työ väliin.

## Mitä tarvitset

* **Figma-tili**. Luo sellainen ilmaiseksi osoitteessa [figma.com](https://www.figma.com)
* Figma Organization- tai Enterprise-paketti, jos haluat käyttää julkaistuja muuttujia tai kirjastojen koko analytiikkaa

## Yhdistä Figma Macalyyn

<Steps>
  <Step title="Avaa asetukset">
    Siirry Macaly-workspacessasi kohtaan **Asetukset → Integraatiot**.
  </Step>

  <Step title="Yhdistä Figma">
    Etsi Figma-kortti sovellusluettelosta ja napsauta **Yhdistä**-painiketta.
  </Step>

  <Step title="Valtuuta tilisi">
    Avautuvassa uudessa ikkunassa sinua pyydetään kirjautumaan Figmaan. Kun hyväksyt käyttöoikeuden, sinut ohjataan takaisin Macalyyn.
  </Step>
</Steps>

## Käytä Figmaa keskustelusta

Kun yhteys on muodostettu, kuvaile, mitä haluat, niin agentti hoitaa loput.

Muuta suunnitelma sivuksi:

```
Tässä on Figma-suunnitelmani hinnoittelusivusta [linkki]. Rakenna siitä
oikea sivu, noudata asettelua, komponentteja ja välistyksiä,
ja tee siitä responsiivinen.
```

Tuo design-järjestelmäsi projektiin:

```
Hae tämän Figma-tiedoston tyylit ja värimuuttujat ja
muuta ne projektini Tailwind-määritykseksi.
```

Vie tiedostoja rakentamisen aikana:

```
Vie Figma-tiedostoni ”Hero”-frame SVG-tiedostona ja lisää
se etusivulle.
```

Tai rakenna suunnittelukirjastosi päälle:

```
Rakennan design-järjestelmän dokumentaatiosivustoa. Hae komponentit
ja tyylit Figma-kirjastostamme ja listaa ne esikatseluineen.
```

## Mitä agentti voi tehdä Figmassa

Muuttaa tiedoston rakenteen, komponentit ja tyylit responsiivisiksi sivuiksi, poimia design tokenit ja Tailwind-määrityksen, viedä frameja kuvina sekä hakea tiedoston tiedot, kommentit ja versiohistorian sujuvaa luovutusta varten. Julkaistut muuttujat ja kirjastoanalytiikka vaativat Figma Organization- tai Enterprise-paketin.

## Hyvä tietää

* **Yhdistät vain kerran.** Kaikki workspacesi projektit käyttävät samaa Figma-yhteyttä.
* **Jotkin kirjastoominaisuudet vaativat maksullisen Figma-paketin.** Julkaistut muuttujat ja osa kirjastoanalytiikasta vaativat Figma Organization- tai Enterprise-paketin.
* **Sinun tilisi, sinun hallintasi.** Agentti toimii vain, kun pyydät sitä. Voit katkaista Figma-yhteyden milloin tahansa kohdasta **Asetukset → Integraatiot**.


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