github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
66 lines
4.7 KiB
Plaintext
66 lines
4.7 KiB
Plaintext
---
|
|
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.
|