---
title: A Figma használata
info: Learn how you can collaborate with Twenty's Figma
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

A Figma egy olyan kollaboratív felület tervező eszköz, amely segít áthidalni a kommunikációs szakadékot a tervezők és fejlesztők között.
Ez az útmutató bemutatja, hogyan működhet együtt a Figma-val.

## Hozzáférés

1. **Access the shared link:** You can access the project's Figma file [here](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
2. **Bejelentkezés:** Ha még nem jelentkezett be, a Figma felkér erre.
   Kulcsfontosságú funkciók csak bejelentkezett felhasználók számára elérhetők, mint például a fejlesztői mód és az elkülönített keretek kiválasztásának képessége.

<Warning>

Hatékony együttműködéshez elengedhetetlen a saját fiók.

</Warning>

## Figma felépítése

On the left sidebar, you can access the different pages of Twenty's Figma. Így vannak szervezve:

- **Components page:** This is the first page. A tervező ezt használja a tervezési fájlban felhasznált, újrahasználható tervezési elemek létrehozására és rendezésére. Például gombok, ikonok, szimbólumok, vagy bármilyen más újrahasználható komponensek. Ez biztosítja a konzisztencia megtartását a dizájnon belül.
- **Main page:** The second page is the main page, which shows the complete user interface of the project. Nyomja meg a _**Lejátszás**_ gombot a teljes app prototípus használatához.
- **Funkciók oldalai:** A többi oldal általában folyamatban lévő funkcióknak van szentelve. Ezek tartalmazzák az alkalmazás vagy weboldal konkrét funkcióinak vagy moduljainak terveit. Ezek általában még fejlesztés alatt állnak.

## Hasznos tippek

Csak olvasási hozzáféréssel nem szerkesztheti a dizájnt, de elérheti az összes funkciót, amely hasznos lesz a tervek kódba történő átalakításához.

### Használja a Fejlesztő módot

A Figma Fejlesztői Módja növeli a fejlesztők termelékenységét azzal, hogy könnyű tervezési navigációt, hatékony eszközkezelést, hatékony kommunikációs eszközöket, eszköztár integrációkat, gyors kódrészleteket és kulcsfontosságú réteg információkat biztosít, ezzel áthidalva a tervezés és fejlesztés közötti szakadékot. További információt a Fejlesztői Módról [itt](https://www.figma.com/dev-mode/) tanulhat.

Váltson "Fejlesztő" módra a szerszámosláda jobb részén, hogy láthassa a tervek specifikációit, másolhasson CSS-t, és hozzáférhessen a kiegészítőkhöz.

### A Prototípus használata

Kattintson bármelyik elemre a vásznon, majd nyomja meg a "Lejátszás" gombot a felület jobb felső szélén a prototípus nézet eléréséhez. A Prototípus mód lehetővé teszi, hogy a dizájnnal úgy lépjen interakcióba, mintha az a végtermék lenne. Ez bemutatja a képernyők közötti átmeneteket, és hogyan viselkednek az interfész elemek, mint a gombok, linkek vagy menük, amikor ezekhez kapcsolódik.

1. **Átmenetek és animációk megértése:** A Prototípus módban megtekintheti az átmeneteket vagy animációkat, amelyeket a tervező adott hozzá, bemutatva a fejlesztők számára a kívánt viselkedést és stílust.
2. **Implementációs tisztázás:** Egy prototípus segíthet a kétértelműségek csökkentésében is. A fejlesztők interakcióba léphetnek velük, hogy jobban megértsék a funkciókészletet vagy bizonyos elemek kinézetét.

A Figma platform tanulásához részletesebb leírást és útmutatást az illusztráció talál a [Figma Dokumentáció](https://help.figma.com/hc/en-us) weboldalán.

### Távolságok mérése

Válasszon ki egy elemet, tartsa lenyomva a `Option` gombot (Mac) vagy `Alt` gombot (Windows), majd húzza az egérmutatót egy másik elem fölé, hogy lássa a távolságukat.

### Figma kiterjesztés VSCode-hoz (Ajánlott)

A [Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) lehetővé teszi, hogy navigáljon és ellenőrizze a tervezési fájlokat, együttműködjön más tervezőkkel, nyomon kövesse a változásokat, és felgyorsítsa a végrehajtást - mindezt anélkül, hogy elhagyná a szövegszerkesztőt.
Az általunk ajánlott kiterjesztések része.

## Együttműködés

1. **Megjegyzések használata:** Szívesen használhatja a megjegyzés funkciót az eszköztár bal oldalán található buborék ikonra kattintva.
2. **Egérmutató chat:** A Figma egyik kedvelt funkciója az Egérmutató chat. Csak nyomja meg a `;` gombot Mac-en és `/` gombot Windows-on, hogy üzenetet küldjön, ha látja, hogy valaki más is használja a Figma-t ugyanabban az időben.