Figma - UI/UX tervezés

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
2. Regisztrálj vagy jelentkezz be
3. Kezdj el tervezni

Desktop alkalmazás

1. Töltsd le: 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
• Figma Learn
• Figma Community
• Figma Blog