Figma: Kompletní průvodce
- Level
- Kapitol
- 155
- Kategorie
- Design a Video
- Hodnocení
- 4,9 z 5
- Délka
- 13h 19min
- Jazyk
- CZ
🎨 Popis online kurzu Figma: Kompletní průvodce
Figma je mocný nástroj. Ale jen když víte, jak ji správně používat.
Jinak vám práce zabere zbytečně víc času a spolupráce s vývojáři se změní v nekonečnou smyčku dotazů a oprav.
V tomto kurzu vás provedu Figmou od úplných základů až po pokročilé techniky, které používají designéři v praxi. Naučíte se vytvářet funkční, promyšlené a dobře strukturované návrhy, které obstojí i v produkčním prostředí.
Kurz je postavený na reálných příkladech z praxe a ukáže vám, jak:
Jinak vám práce zabere zbytečně víc času a spolupráce s vývojáři se změní v nekonečnou smyčku dotazů a oprav.
V tomto kurzu vás provedu Figmou od úplných základů až po pokročilé techniky, které používají designéři v praxi. Naučíte se vytvářet funkční, promyšlené a dobře strukturované návrhy, které obstojí i v produkčním prostředí.
Kurz je postavený na reálných příkladech z praxe a ukáže vám, jak:
- navrhovat uživatelská rozhraní efektivně a systematicky,
- používat komponenty, varianty a auto-layouty,
- vytvářet design systémy, které zvládnou růst spolu s projektem,
- spolupracovat s vývojáři bez zbytečných nedorozumění,
- a využívat Figmu naplno
📚 Co se v kurzu Figma: Kompletní průvodce naučíte
- Základy práce ve Figmě – rozhraní, nástroje, prototypování
- Jak tvořit konzistentní designy pomocí komponent a variant
- Principy tvorby a správy design systémů
- Jak správně připravit návrh pro vývojáře (Design → Dev handoff)
- Tipy a postupy z reálných projektů, které vám ušetří hodiny práce
- Jak si organizovat pracovní prostředí, knihovny a týmové workflow
🧑🎓Pro koho je kurz určený
- Pro začínající i pokročilé designéry, kteří chtějí ovládnout Figmu do hloubky
- Pro UX a UI designéry, kteří chtějí zefektivnit svou práci a lépe spolupracovat s vývojáři
- Pro product manažery, kteří chtějí rozumět designovým procesům svých týmů
- Pro každého, kdo chce tvořit moderní, profesionální a škálovatelné designy
Po absolvování kurzu budete umět využít Figmu naplno od prvního wireframu až po předání hotového designu vývojáři. Získáte jistotu, rychlost i přehled, který od profesionálního designéra očekávají týmy i klienti.
📦 Co všechno dostaneš v kurzu Figma: Kompletní průvodce
- videotutoriály na téma Figma,
- certifikát o absolvování kurzu Figma: Kompletní průvodce,
- moderované diskusní fórum, ve kterém na tvé otázky odpovídá lektor Šimon Jůn,
- garance vrácení peněz do 14 dnů v případě nespokojenosti s kurzem.
Kapitoly online kurzu
Úvod do kurzu (1)
👋 Vítám vás v kurzu Figma MasterClass
1:07
1. Základní informace (11)
E1 – Shrnutí: Co všechno se v kurzu naučíte
6:20
E2 – Co je Figma a jakou licenci potřebuji
5:09
E3 – Figma redesign
4:45
E4 – Co je FigJam
4:14
E5 – Figma Slides
6:15
E6 – Figma Buzz, Sites a Make
5:09
E7 – Figma to Webflow
3:42
E8 – Browser vs. Desktop aplikace
8:20
E9 – Registrace do Figmy
5:53
E10 – Figma Dashboard
3:30
E11 – Templates and Tools (Figma Community)
8:36
2. Tým a projekty (11)
E1 – Shrnutí: Co se v kapitole naučíte
0:55
E2 – Light Mode a Dark Mode
0:51
E3 – Co je to tým, projekt, design soubor
3:32
E4 – Oblíbené a připnuté soubory
2:42
E5 – Co jsou to drafty a jak se chovají
3:12
E6 – Jak přidat do týmu / souboru / projektu člena + nastavení
10:24
E7 – Password protected links + Advanced nastavení
4:06
E8 – Nastavení Free týmu
3:39
E9 – Správa uživatelů ve Free verzi
1:46
E10 – Admin v placené verzi Figmy
7:21
E11 – Role ve Figmě
5:41
3. Základy (15)
E1 – Shrnutí: Co se v kapitole naučíte
0:33
E2 – Figma UI
3:16
E3 – Dev Mode *pouze v placeném tarifu Figmy
4:40
E4 – Jak se pohybovat ve Figmě
8:44
E5 – Přejmenování a přesun souborů
8:34
E6 – Bottom panel
5:03
E7 – Figma AI funkce *pouze v placeném tarifu Figmy
11:20
E8 – Historie a verzování
7:14
E9 – Vyhledávání
6:40
E10 – Pages
6:18
E11 – Layers
8:28
E12 – Groups
5:04
E13 – Assets
5:55
E14 – Thumbnail design souboru
7:50
E15 – Úprava Canvasu pro efektivnější práci
3:03
4. Nástroje (29)
E1 – Shrnutí: Co se v kapitole naučíte
1:00
E2 – Pravý sidebar základní informace
3:36
E3 – Úprava panelu pro efektivnější práci
2:22
E4 – Zarovnání, pozice
3:56
E5 – Constraints
6:31
E6 – Velikost elementu a Clip content
3:53
E7 – Rotation (dříve Transforms)
3:53
E8 – Opacity
1:57
E09 – Border radius
4:06
E10 – Fill (výplň elementu)
7:01
E11 – Stroke
8:34
E12 – Effects
9:14
E13 – Move, Hand Tool a Scale
4:45
E14 – Frame
10:27
E15 – Grid systém
10:58
E16 – Section
6:50
E17 – Slice
1:46
E18 – Rectangle
3:07
E19 – Line a Arrow
3:08
E20 – Elipsa
2:30
E21 – Polygon
2:04
E22 – Star
1:47
E23 – Image (obrázek) a jeho úpravy
9:41
E24 – Video *pouze v placeném tarifu Figmy
6:02
E25 – Pen – Tvorba vektorů
3:27
E26 – Naučte se vektory pomocí minihry
3:06
E27 – Pencil
2:23
E28 – Masky
4:27
E29 – Boolean groups
4:45
5. Typografie (8)
E1 – Shrnutí: Co se v kapitole naučíte
0:46
E2 – Chybějící fonty
4:48
E3 – Textové pole
3:01
E4 – Základní nastavení typografie (Texty)
4:24
E5 – Basics • Aligment a Decorations
5:05
E6 – Basics • Zbytek nastavení
6:45
E7 – Pokročilé nastavení typografie (Texty)
4:37
E8 – Variable Fonts
3:13
6. Auto-layouts (11)
E1 – Shrnutí: Co se v kapitole naučíte
2:40
E2 – Co je to Auto-layout
7:29
E3 – Jak vytvořit Auto-layout
4:44
E4 – Resizing možnosti + padding a gap
9:02
E5 – Aligment
3:46
E6 – Advanced options
6:02
E7 – Wrap
3:57
E8 – Auto-spacing
4:03
E9 – Absolute position
5:37
E10 – Grid úvod
2:57
E11 – Grid nastavení a možnosti
8:22
7. Komponenty (Components) (19)
E1 – Shrnutí: Co se v kapitole naučíte
0:59
E2 – Co je to component a jeho výhody
3:43
E3 – Jak vytvořit component
1:09
E4 – Master vs. Instance
3:03
E5 – Co je možné upravovat v Instanci
6:30
E6 – Detach Instance? No Thanks
4:20
E7 – Vnořené componenty
5:53
E8 – Component properties
5:19
E9 – Jak správně pojmenovat properties
8:59
E10 – Jak správně přistupovat k tvorbě component s properties
3:17
E11 – Component properties • Swap
9:31
FE12 – Component properties • Toggle
3:36
E13 – Component properties • Content
2:54
E14 – Component properties • Variant
7:03
E15 – Jak pracovat s Nested Properties
4:38
FE16 – Finalizace component properties
6:38
E17 – Lokální componenty vs. Team Libraries *pouze v placeném tarifu Figmy
10:03
E18 – Veřejné design systémy
5:00
E19 – MinMax Width a Height
3:23
8. Figma styly (6)
E1 – Shrnutí: Co se v kapitole naučíte
1:15
E2 – Co je to styl a kdy ho použít
3:05
E3 – Styly barev a výhody oproti Variables
5:18
E4 – Styly textů
7:20
E5 – Styly efektů
2:48
E6 – Styly gridů
2:43
9. Figma Variables (13)
E1 – Shrnutí: Co se v kapitole naučíte
2:21
E2 – Design systém inspirace
6:17
E3 – Flappy Bird
3:03
E4 – Představení Figma Variables
9:29
E5 – Typy Variables
0:50
E6 – Variable Boolean
4:13
E7 – Variable Color
6:01
fE8 – Variable Number
7:20
E9 – Variable String
8:23
E10 – Co momentálně není ve Variables
7:17
E11 – Kolekce a Groupy
8:55
E12 – Alias Variables
8:22
E13 – Omezení použití Variables
4:54
10. Prototyping a Figma Mirror App (Mobilní aplikace) (13)
E1 – Shrnutí: Co všechno se v kapitole naučíte
0:52
E2 – Co je to prototyp
2:19
E3 – Jak prototyp spustit na desktopu + Přepínání flows
4:51
E4 – Co je to Figma mobile app
7:50
E5 – Mirror funkce
5:38
E6 – Jak vytvořit prototyp
4:19
E7 – Triggers
8:08
E8 – Action
7:40
E9 – Action – Overlay
8:57
E10 – Animations
16:01
E11 – Smart Animations
9:13
E12 – Tipy a triky na tvorbu flows
6:33
E13 – Jak se připravit na testování s klientem nebo managementem
9:04
11. Exportování z Figmy (8)
E1 – Shrnutí: Co se v kapitole naučíte
0:39
E2 – Co a jak umí Figma exportovat
4:56
E3 – Export do PNG a JPG
4:55
E4 – Export do SVG
5:00
E5 – Export do PDF
1:34
E6 – Export textu
4:46
E7 – Exporty pro retina displaye
7:21
E8 – Jak připravit rychlý export ikon / bannerů pro vývojáře
9:08
12. Feedback a komentování designu (9)
E1 – Shrnutí: Co se v kapitole naučíte
0:58
E2 – Jak přidat komentář
5:32
E3 – Komentáře v oblasti
4:17
E4 – Jak správně odpovídat na komentář
3:39
E5 – Jak brát komentář jako vyřešený
3:34
E6 – Odkazování ve Figmě
4:10
E8 – Best practices: Nastavení filtrace a notifikací pro designery, vývojáře a projektové manažery
10:40
E7 – Funkce Embed
5:31
E9 – Funkce Spotlight
6:19
Závěr (1)
🥳 Gratuluji k dokončení Figma MasterClass!
0:58
Lektor online kurzu
Šimon Jůn
UX / Product designer
Onlinu, UX & Product designu se věnuji od roku 2017. Za tu dobu jsem pomohl desítkám velkým i menším firmám – růst, dosahovat lepších výsledků, optimalizovat weby & e-shopy a plnit cíle.
Momentálně působím v PPC Bee. Specializuji se na e-commerce a SaaS. Navrhuji celé projekty, produkty, weby nebo aplikace. Mezi mé klienty patří např. BIBLOO, UrbanStore, Masarykova univerzita nebo Meditorial.
Největší smysl ale vidím v tom předávat své know-how. Proto se o něj dělím na svém blogu, školím a vydávám digitální produkty a kurzy, které pomáhají lidem.
Kurzem už prošly firmy jako: Fortuna, Fragile, Masarykova univerzita nebo ABRA.
👉 www.simonjun.cz
4,9
Hodnocení
1
Kurz
Hodnocení studentů
Hodnocení od studentů zapsaných v kurzu na Skillmea.
4,9 z 5
· 13 hodnocení
František H.
5
kurz 👍! len jediná pripomienka Figma v 2026 je už iná ako v kurze...
Jiří Z.
5
Jako web developer jsem se chtěl naučit lépe pracovat s Figmou z pohledu designera. Nejen se v ní orientovat, ale hlavně pochopit designový proces, osvojit si praktické postupy a umět včas vyhodnotit, jestli je dodaná grafika kvalitní a připravená pro vývoj. Chtěl jsem zkrátka vědět, na co si dát pozor a kdy je lepší vrátit návrh k přepracování, než se do něj pustím já nebo někdo z týmu. Kurz předčil moje očekávání. Je neuvěřitelně propracovaný, detailní a jde opravdu do hloubky. Občas je těch detailů až tolik, že by člověk uvítal o něco svižnější tempo, ale právě v tom je zároveň jeho největší síla. Za roky jsem si pořídil spoustu kurzů zaměřených na programování i další oblasti, ale upřímně si nevzpomínám na žádný, který by byl takhle kvalitně zpracovaný. Je vidět obrovské množství práce, zkušeností a důrazu na detail, které do něj autor vložil. A upřímně? Myslím si, že by si tenhle kurz měli projít i někteří seniorní web designéři, se kterými jsem měl možnost spolupracovat. Označení „senior“ totiž automaticky neznamená, že člověk umí připravit kvalitní a dobře strukturovaný Figma projekt, se kterým se dá rozumně pracovat při vývoji. Některé projekty, které se mi dostaly do rukou, byly z pohledu předání do vývoje naprosto otřesné. A právě proto by podobný kurz mohl být přínosem i pro lidi, kteří už mají za sebou roky praxe. Za mě jeden z nejpropracovanějších kurzů, jaké jsem si za poslední roky koupil. Rozhodně doporučuji každému, kdo chce Figmu opravdu pochopit, a nejen se naučit, kam v ní kliknout.
Jaroslav S.
4
všetko super ale chýbala mi tam vlastná tvorba prototypov pre lepšie pochopenie. Bolo by fajn si to tam priamo vytvorit od začiatku a s tým aj pracovať.
Michaela U.
5
Perfektný kurz, skvelý výklad... :-) Ďakujem.
