projekt 05 // css figma ui-ux design
ui_portfolio/
// CSS · Figma · Komponenty · Design System
Twoj design, Twoje zasady. Zmien kolory, zaokraglenia, czcionki — i obserwuj jak UI zmienia sie na zywo. Tak dziala praca UI developera.
CSS VariablesFlexboxGridAnimacjeDesign Tokens
live design playground
Zmieniaj UI na zywo
Wybierz preset, dostosuj kolory i parametry — podglad zmienia sie natychmiast. To jest CSS Variables w akcji.
komponenty — gotowy kod
Skopiuj, uzyj w projekcie
droga od figmy do kodu
Figma → Kod w 5 krokach
1
Wireframe — szkic interfejsu
Najpierw rysuj na kartce lub w Figmie. Gdzie sa przyciski, co jest naglowkiem, co stopka. Zanim napiszesz linijke CSS.
2
Design Tokens — zmienne CSS
--primary-color, --border-radius, --font-size. Zamiast pisac #00ff88 w 50 miejscach — piszesz raz jako zmienna.
3
Komponenty — bloki Lego UI
Przycisk, karta, formularz — projektujesz raz, uzywasz wszedzie. DRY: Don't Repeat Yourself.
4
Flexbox & Grid — układ strony
display:flex i display:grid rozwiazuja 90% problemow z layoutem. Naucz sie tych dwoch — reszta sama przyjdzie.
5
Responsywnosc — @media queries
@media (max-width: 768px) — Twoja strona na telefonie wyglada jak zaprojektowana specjalnie dla telefonu.
$ chcesz projektowac pro UI?
W INF.03 uczysz sie Figma + CSS + JavaScript — tworzysz pelne interfejsy od designu po dzialajacy kod.