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:
- Látogass el: figma.com
- Regisztrálj vagy jelentkezz be
- Kezdj el tervezni
Desktop alkalmazás
- Töltsd le: figma.com/downloads
- Telepítsd a platformodnak megfelelő verziót
- 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
- Kattints a New design file gombra
- Válaszd ki a frame méretet (Desktop, Mobile, stb.)
- 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
- Jelöld ki az elemeket
Cmd/Ctrl + Alt + K- Komponens létrehozása- Használd újra bárhol a projektben
4. Auto Layout
- Jelöld ki a frame-et
Shift + A- Auto Layout hozzáadása- Állítsd be a padding-ot és gap-et
- 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
- 8px grid - Használj 8-as osztású rácsot
- Constraints - Állíts be reszponzív szabályokat
- Components - Készíts újrafelhasználható elemeket
- 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 |