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

# Figma

> Yhdistä Figma Vibewax-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.

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

<Steps>
  <Step title="Avaa asetukset">
    Siirry Vibewax-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 Vibewaxen.
  </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 page is part of the [Vibewax documentation](https://vibewax.be/docs/fi/welcome/overview).