Curs live online
Figma: esențialele pentru Web și App Design
Florin Dincă
UX/UI Designer @ Welhome Invest16 iunie
30 iulie
Pune fundația carierei tale în UI/UX construind primul proiect complet de portofoliu în FIGMA.
Acest curs este conceput ca un program complet de formare în UI/UX design, care ghidează participanții de la bazele interfeței până la realizarea unui proiect gata de adăugat în portofoliul profesional. Structurat pe 14 sesiuni practice, cursul acoperă atât partea de design vizual (layout, tipografie, culori, componente), cât și procese esențiale de UX (research, user flows, prototipare), integrând în același timp funcționalități avansate precum Design Systems, AI în Figma și publicarea de website-uri.
Se adresează începătorilor și celor de nivel mediu din domenii precum design, marketing, product sau development, care vor să învețe nu doar să folosească Figma, ci să creeze produse digitale complexe.
Abordarea cursului este end-to-end: participanții nu învață doar tool-ul, ci întregul proces de design, realizând, până la finalul cursului, un proiect complet (de la idee la prototip și lansare live) – un landing page cu versiune web și app.
Înscrie-te
16 iunie
30 iulie
LECTOR
Florin Dincă
UX/UI Designer @ Welhome InvestA trecut de la rolul de Graphic Design Intern la UI/UX Designer și a gestionat proiecte de design pentru branding, marketing și produse digitale
A lucrat ca UI/UX Designer pe o aplicație SaaS și pe produsul Buildy, unde a structurat interfețe și a colaborat cu development
A realizat website-ul Welhome.ro și portofoliul sner.page, ocupându-se de arhitectura informației, layout și experiența utilizatorului
A livrat materiale vizuale pentru Sibiu Jazz Festival 2025 și FFCR, adaptând designul pentru contexte culturale și campanii de comunicare
Acest curs este potrivit pentru:
UI/UX designer începător Știi deja bazele Figma, dar vrei să-ți îmbunătățești workflow-ul și să-ți faci proiectele prezentabile profesional. Îți vei consolida skillurile de layout, componente, design system, prototipare, responsive design și dev handoff, lucrând la un landing page web și app/mobile gata de portofoliu.
Graphic Designer Stăpânești deja compoziția vizuală, tipografia și brandingul, dar vrei să treci de la materiale statice la produse digitale interactive, ca upskilling în carieră. Vei învață să îți traduci skillurile vizuale în interfețe funcționale.
Marketeri Vrei să înțelegi mai bine cum se construiesc landing page-urile, campaniile vizuale și experiențele digitale care susțin obiective reale de business. Vei învață să lucrezi practic în Figma, să gândești ierarhia vizuală, structura site-urilor, UX, prototiparea și să faci materiale de marketing mai atractive.
Career Switchers Vrei să faci tranziția înspre UI/UX design și ai nevoie de o fundație clară, practică și aplicată într-un software esențial. În acest curs, înveți procesul complet de design și construiești primul proiect serios de portofoliu, pentru reconversie profesională.
Program
Lecția 1 - Introducere în Ecosistemul Figma
- Ce este Figma
- Ce putem face cu fiecare tool din Figma - Design, FigJam, Slides, Buzz, Site și Make
- Organizarea fișierelor și a proiectelor
- Familiarizarea cu interfața de Design: Toolbar, Layers Panel, Pages, Assets și Design Panel (Properties)
- Shortcut-uri esențiale
- Redenumirea, gruparea, alinierea și spațierea obiectelor
- Frame-uri, grupuri și secțiuni
Lecția 2 - Tool-uri de creație
- Tool-urile principale de creație: Text, Paths, Shapes, Pen & Pencil Tools
- Vector vs Raster: De ce UI design este pur vectorial
- Alegerea fonturilor și prelucrarea lor
- Adăugarea și editarea imaginilor
- Operațiuni Booleene - Union, Subtract, Intersect, Exclude
- Proprietăți: Stroke, Fill, Effects & Blending Modes
- Masking
- Figma Community: găsește resurse și plugin-uri utile
Lecția 3 - Design flexibil cu Auto-Layout
- Ce înseamnă Responsive UI
- Activare Auto-Layout, setări direcție (Vertical/Horizontal/Wrap) și spațiere
- Înțelegerea dimensiunilor: Hug, Fill și Fixed
- Utilizarea Absolute Positioning pentru elemente suprapuse
Lecția 4 - Componente și Variante
- Componentă Master vs. Instanțe
- Crearea și organizarea variantelor
- Utilizarea proprietăților de componentă (Boolean pentru vizibilitate, Instance Swap pentru iconițe, Text pentru editare rapidă)
- Suprascrierea și detașarea componentelor
Lecția 5 - Tipografie și Ierarhie Vizuală
- Cum ghidăm ochiul prin pagină (H1, H2, Body, Caption)
- Tipuri de fonturi, când le utilizăm și ce ne transmit ele
- Instalarea fonturilor și crearea stilurilor de text globale
- Scară tipografică (Type Scale) și bune practici pentru web (line-height, letter-spacing)
Lecția 6 - Culori, Variabile și Accesibilitate
- Cum alegem culorile pentru proiectul nostru
- Ce sunt paletele de culori (Primary, Neutral, Semantic)
- Definirea culorilor prin variabile pentru scalabilitate
- Implementarea Dark Theme folosind variabile
- Verificarea contrastului folosind standardele WCAG - utilizând plugin-uri
Lecția 7 - Design Systems și Librării
- Ce sunt și cum folosim Design Systems
- Analiza sistemelor Material Design sau Carbon pentru inspirație
- Cum construiești un Design System custom
- Organizarea componentelor
- Cum transformăm elementele într-o librărie publicabilă
Lecția 8 - UX Research, Wireframing și Layout Grids
- Ce înseamnă UX Design? Diferența între UX și UI
- Cercetarea experienței utilizatorului (UX Research)
- User Personnas & User Journeys
- Diferența dintre Low-Fidelity (schiță) și High-Fidelity (vizual final)
- Coloane, rigle și spațiere
- Secțiunile esențiale: Header, Hero, Features, Testimonials, Footer
Lecția 9 - Responsive Design și Constrângeri
- Breakpoints: Standarde pentru desktop, tabletă și mobil
- Constraints: Cum se "prind" obiectele de marginile frame-ului
- Adaptarea elementelor (ex: meniul orizontal devine hamburger pe mobil)
Lecția 10 - Tehnici de Prototipare Interactivă
- Interacțiuni: Legarea frame-urilor, setarea trigger-elor (On click, While hovering)
- Smart Animate: Crearea animațiilor fluide între stări
- Crearea caruselelor de imagini orizontale
Lecția 11 - AI în Figma și Dev-Handoff
- Figma Make: Utilizarea inteligenței artificiale pentru a genera rapid layout-uri
- Utilizarea funcțiilor AI pentru modificarea imaginilor
- Funcțiile AI de text: Replace content, Translate, Shorten, Rewrite
- Dev Mode: Cum inspectează programatorii designul (CSS, export de asset-uri)
- Plugins: Automatizarea populării cu date reale (Content Reel, Unsplash)
Lecția 12 - Figma Slides: Storytelling de Design
- Ce este Storytelling-ul de Design
- Componentele Cheie ale Storytelling-ului în Design
- Interacțiuni: Interfața Figma Slides și utilizarea template-urilor
- Cum să prezinți un proiect (Problemă - Research - Design - Soluție)
- Integrarea prototipurilor live direct în slide-uri
Lecția 13 - Materiale de Marketing & Figma Sites (Publicare Live)
- Cum creăm Bannere & Materiale de Marketing în Figma
- Web Publishing: Conversia designului în site funcțional cu Figma Sites
- Setări SEO, Favicon și testarea pe dispozitive reale
- Când folosim Figma Sites vs. Webflow sau dezvoltare custom
Lecția 14 - Review Final și Portofoliu
- Mockups: Crearea de vizualuri de impact pentru portofoliu
- Sesiune finală despre carieră și cum să te menții la curent cu tool-urile
MAI MULT
DUPĂ CURS VEI AVEA:
Construiești un proiect UI/UX complet (web sau mobile), de la research și wireframe până la prototip interactiv și site publicat live.
Creezi un design system organizat, cu componente, variante și stiluri folosite consecvent în tot proiectul.
Structurezi user flows și wireframe-uri pe grid, care arată cum navighează utilizatorul prin produs.
Dezvolți un prototip interactiv cu animații și micro-interacțiuni, pregătit pentru testare și prezentare.
Pregătești fișierul pentru development folosind Dev Mode, cu asset-uri exportate și specificații ușor de folosit de echipele tech.
Construiești materiale de marketing și îți prezinți proiectul folosind Figma Slides și site-ul publicat.
Figma
16 iunie
30 iulie
ÎNREGISTREAZĂ-TE AICI
Pentru detalii despre curs și taxa de participare, înregistrează-te aici!
Pentru cunoștințe noi — SKVOT. Pentru mai multe informații despre curs și taxa de participare, te rugăm să te înregistrezi.