Упознавање са интерфејсом

1. Отвори www.figma.com
2. Креирај налог (или користи Google account)
3. Кликни на "New design file"
4. Преименуј file у "Moj prvi dizajn"

Шта видиш:

• Централну радну површину (canvas)
• Toolbar на врху
• Layers panel (лево)
• Design panel (десно)

Toolbar - Основне алатке

Алатке за селекцију:

• V - Move tool (стрелица) - основна алатка за селекцију
• K - Scale tool - за скалирање објеката

Алатке за цртање:

• R - Rectangle (правоугаоник)
• O - Ellipse (круг/елипса)
• L - Line (линија)
• P - Pen tool (за векторе)

Алатке за садржај:

• T - Text tool (текст)
• F - Frame tool (оквир/контејнер)
• Shift + A - Auto Layout

Остало:

• H - Hand tool (померање canvas-а)
• Ctrl + / - Коментари

ВЕЖБА 1: Испробај све алатке

1. Нацртај правоугаоник (R)
2. Нацртај круг (O)
3. Додај текст (T)
4. Премести све објекте (V)

Layers Panel

Шта је Layers panel:

• Приказује све објекте на canvas-у
• Хијерархијска структура (родитељ-дете)
• Организација елемената

Основне акције:

• Преименуј слојеве (double-click на име)
• Груписање (Ctrl + G)
• Сакриј/прикажи слој (икона ока)
• Закључај слој (икона катанца)

ВЕЖБА 2: Организација

1. Креирај 5 различитих облика
2. Преименуј их (npr. "Kvadrat", "Dugme", "Naslov")
3. Групиши их (селектуј све па Ctrl + G)
4. Преименуј групу у "Elementi"

Design Panel

Position & Size:

• X, Y - позиција на canvas-у
• W, H - ширина и висина
• Икона катанца - закључај пропорције

Fill (Boja):

• Solid (једнобојна)
• Linear gradient (линеарни градијент)
• Radial gradient (радијални градијент)
• Image (слика)

Stroke (Ivica/Border):

• Дебљина линије
• Боја
• Врста (solid, dashed)

Effects:

• Drop shadow (сенка)
• Inner shadow
• Blur (замућење)

Corner Radius:

• Заобљени углови (нпр. за дугмад)

ВЕЖБА 3: Стилизовање

1. Креирај правоугаоник
2. Промени боју (Fill) у #4A90E2
3. Додај border (Stroke) 2px, боја #2E5C8A
4. Заобли углове на 8px
5. Додај drop shadow (X:0, Y:4, Blur:8, боја црна 20% opacity)