# Figma - UI/UX tervezés

> Figma használata UI/UX tervezéshez és prototípus készítéshez - kollaboratív design tool böngészőben.

A **Figma** a legnépszerűbb kollaboratív design eszköz, amely böngészőben és desktop alkalmazásként is elérhető. Ideális UI/UX tervezéshez, prototípus készítéshez és fejlesztőkkel való együttműködéshez.

> **Miért használd?**
>
> - **Böngésző alapú** - Nincs telepítés, bárhol elérhető
> - **Real-time kollaboráció** - Többen dolgozhatnak egyszerre
> - **Fejlesztőbarát** - Dev Mode kód exportálással
> - **Ingyenes kezdés** - Starter plan díjmentesen

---

## Árazás

| Csomag | Ár | Célcsoport |
|--------|-----|------------|
| **Starter** | Ingyenes | Egyéni felhasználók, tanulók |
| **Professional** | $16/hó | Profik és kis csapatok |
| **Organization** | $45/hó | Nagyobb csapatok |
| **Enterprise** | $90/hó (Full seat) | Nagyvállalatok |

> **Éves számlázás**
>
> A Professional csomag havi opcióval 25-60%-kal drágább.

---

## Főbb funkciók

### Design

- **Canvas** - Végtelen vászon
- **Layers** - Rétegek kezelése
- **Components** - Újrafelhasználható elemek
- **Auto Layout** - Automatikus elrendezés
- **Constraints** - Reszponzív design szabályok
- **Variants** - Komponens variációk

### Prototípus

- **Interactive overlays** - Felhasználói interakciók szimulálása
- **Smart Animate** - Automatikus animációk
- **Custom animations** - Springs, slides, dissolves
- **Device preview** - Mobil előnézet
- **User flow** - Navigáció tervezése

### Dev Mode

- **Inspect** - Változók, méretek, távolságok
- **Code properties** - CSS, Swift, Android kód
- **Annotations** - Tervezői megjegyzések
- **Component code** - Kód snippetek komponensekhez
- **Plugin integráció** - Zeplin, Storybook export

### Kollaboráció

- **Real-time editing** - Párhuzamos szerkesztés
- **Comments** - Megjegyzések és @mentions
- **Version history** - Korábbi verziók visszaállítása
- **Sharing** - Link alapú megosztás
- **Team libraries** - Megosztott komponens könyvtárak

---

## Telepítés

### Böngésző verzió

Nincs telepítés szükséges:
1. Látogass el: [figma.com](https://www.figma.com/)
2. Regisztrálj vagy jelentkezz be
3. Kezdj el tervezni

### Desktop alkalmazás

1. Töltsd le: [figma.com/downloads](https://www.figma.com/downloads/)
2. Telepítsd a platformodnak megfelelő verziót
3. Jelentkezz be a fiókodba

### Támogatott platformok

- **macOS** - Intel és Apple Silicon
- **Windows** - 64-bit
- **Böngésző** - Chrome, Firefox, Edge, Safari

---

## Első lépések

### 1. Új projekt létrehozása

1. Kattints a **New design file** gombra
2. Válaszd ki a frame méretet (Desktop, Mobile, stb.)
3. Kezdj el tervezni

### 2. Alap eszközök

| Gyorsbillentyű | Eszköz |
|----------------|--------|
| `V` | Move (Kijelölés) |
| `F` | Frame |
| `R` | Rectangle |
| `O` | Ellipse |
| `L` | Line |
| `T` | Text |
| `P` | Pen |

### 3. Komponens létrehozása

1. Jelöld ki az elemeket
2. `Cmd/Ctrl + Alt + K` - Komponens létrehozása
3. Használd újra bárhol a projektben

### 4. Auto Layout

1. Jelöld ki a frame-et
2. `Shift + A` - Auto Layout hozzáadása
3. Állítsd be a padding-ot és gap-et
4. Az elemek automatikusan igazodnak

---

## Hasznos pluginek

### Design

| Plugin | Funkció |
|--------|---------|
| **Unsplash** | Stock fotók |
| **Iconify** | Ikonok beszúrása |
| **Lorem ipsum** | Placeholder szöveg |
| **Content Reel** | Valósághű tartalom |

### Export

| Plugin | Funkció |
|--------|---------|
| **HTML to Figma** | Weboldal importálás |
| **Figma to Code** | React, Vue kód generálás |
| **Zeplin** | Fejlesztői handoff |

### Productivity

| Plugin | Funkció |
|--------|---------|
| **Stark** | Akadálymentesség ellenőrzés |
| **Contrast** | Kontraszt checker |
| **Batch Styler** | Tömeges stílus módosítás |

---

## WordPress fejlesztéshez

### Mire használd?

- **Wireframe** - Oldal struktúra tervezése
- **UI Design** - Vizuális tervek készítése
- **Komponensek** - Gombok, formok, kártyák
- **Style Guide** - Színek, tipográfia dokumentálása

### Hasznos tippek

1. **8px grid** - Használj 8-as osztású rácsot
2. **Constraints** - Állíts be reszponzív szabályokat
3. **Components** - Készíts újrafelhasználható elemeket
4. **Styles** - Definiálj színeket és szövegstílusokat

---

## Alternatívák

| Eszköz | Előny |
|--------|-------|
| **Adobe XD** | Adobe ökoszisztéma |
| **Sketch** | macOS natív |
| **Penpot** | Nyílt forráskódú |
| **Framer** | Kódgenerálás |

---

## Kapcsolódó linkek

- [Figma hivatalos oldal](https://www.figma.com/)
- [Figma Learn](https://help.figma.com/)
- [Figma Community](https://www.figma.com/community)
- [Figma Blog](https://www.figma.com/blog/)