Иди на текст

Auto Layout

Auto Layout је одлика који омогућава да елементи аутоматски прилагођавају своју величину и позицију.

Зашто је то битно:

  • Брже прављење responsive дизајна
  • Аутоматски размаци између елемената
  • Елементи се "понашају" као у правом коду
  • Много лакше мењање садржаја без ручног померања

Где се користи:

  • Дугмад (текст се мења, дугме се прилагођава)
  • Навигације и менији
  • Картице производа
  • Форме
  • Практично све!

Како укључити Auto Layout:

  • Селектуј елементе → Shift + A
  • Или: десни клик → "Add Auto Layout"

ВЕЖБА 1: Дугме са Auto Layout-ом

Корак 1: Креирај текст

  1. Притисни T (Text)
  2. Напиши "Купи сада"
  3. Подеси: Font size 16px, Weight Semi-Bold, Color #FFFFFF

Корак 2: Додај позадину

  1. Селектуј текст
  2. Притисни Shift + A (Auto Layout)
  3. Фигма аутоматски креира Frame око текста са Auto Layout-ом!

Корак 3: Подеси spacing (padding)

  1. Са селектованим Auto Layout frame-ом, погледај десни panel
  2. Видећеш иконе за spacing:
  3. Хоризонтални padding (лево-десно)
  4. Вертикални padding (горе-доле)
  5. Подеси:
  6. Хоризонтални: 24px
  7. Вертикални: 12px

Корак 4: Стилизуј

  1. Fill: #4A90E2 (плава)
  2. Corner radius: 8px
  3. Drop shadow: X:0, Y:2, Blur:4, #000000 15%

Корак 5: Тестирај Auto Layout

  1. Селектуј текст унутар дугмета
  2. Промени текст у "Купи сада за €49.99"
  3. 🎉 Дугме се аутоматски проширило!
  4. Промени назад у "Купи"
  5. 🎉 Дугме се скупило!

ВЕЖБА 2: Навигација са Auto Layout-ом

  1. Напиши текст "Почетна"
  2. Font: 14px, Weight Medium, Color #1A1A1A
  3. Додај Auto Layout (Shift + A)
  4. Padding: Хоризонтални 16px, Вертикални 8px
  5. Corner radius: 6px
  6. Fill: #F0F0F0

Корак 2: Дуплирај linkove

  1. Дуплирај (Ctrl + D) 4 пута
  2. Промени текстове: "Производи", "О нама", "Контакт", "Блог"

Корак 3: Направи навигацију

  1. Селектуј свих 5 linkова
  2. Притисни Shift + A (Auto Layout)
  3. Сада имаш навигацију!
  1. Селектуј навигацију (parent frame)
  2. У Design panel-у нађи "Gap" (размак између деце)
  3. Подеси Gap на 8px
  4. Сви linkови имају конзистентан размак!

Корак 5: Промени direction

  1. У Auto Layout settings-има види икону за Direction
  2. Кликни да промениш из хоризонталне у вертикалну
  3. Врати назад у хоризонталну

Корак 6: Alignment

  1. Тестирај alignment опције (left, center, right)
  2. Тестирај vertical alignment (top, center, bottom)

ВЕЖБА 3: Картица производа са угнежђеним Auto Layout-ом

Структура:

Card (Auto Layout - vertical)
├── Image
└── Content (Auto Layout - vertical)
    ├── Title
    ├── Description
    └── Footer (Auto Layout - horizontal)
        ├── Price
        └── Button

Корак 1: Креирај слику

  1. Притисни R (Rectangle)
  2. Направи 280 x 200 px
  3. Fill: #E0E0E0 (placeholder за слику)
  4. Напиши текст "280x200" у средини (центрирај)

Корак 2: Креирај текстуални део

  1. Испод слике направи:
  2. Title: "Бежичне слушалице" (18px, Bold, #1A1A1A)
  3. Description: "Висок квалитет звука" (14px, Regular, #666666)
  1. Направи текст: "€89.99" (20px, Bold, #1A1A1A)
  2. Направи дугме (као у Вежби 1):
  3. Текст: "Додај у корпу"
  4. Padding: 16px х 10px
  5. Fill: #4A90E2
  6. Corner radius: 6px

Корак 4: Селектуј цену и дугме → Shift + A

  1. Ово креира Footer са хоризонталним Auto Layout-ом
  2. Подеси:
  3. Gap: 16px
  4. Alignment: Space between (да цена иде лево, дугме десно)
  5. Padding: 0 (нема нам потребан padding овде)
  1. Креира Content са вертикалним Auto Layout-ом
  2. Подеси:
  3. Gap: 8px
  4. Padding: 20px (са свих страна)
  5. Fill: #FFFFFF

Корак 6: Селектуј Image и Content → Shift + A

  1. Креира Card са вертикалним Auto Layout-ом
  2. Подеси:
  3. Gap: 0 (слика иде директно на Content)
  4. Padding: 0
  5. Fill: #FFFFFF
  6. Corner radius: 12px
  7. Drop shadow: X:0, Y:4, Blur:12, #000000 8%

Корак 7: Фиксирај ширину картице

  1. Селектуј Card
  2. У Design panel-у види Width
  3. Кликни на три тачкице поред Width
  4. Изабери "Fixed width"
  5. Постави на 280px

Корак 8: Тестирај responsive понашање!

  1. Промени текст наслова у нешто краће/дуже
  2. Картица остаје исте ширине, али висина се прилагођава!
  3. Промени цену
  4. Промени текст дугмета

Auto Layout Properties

Кључне опције Auto Layout-а:

1. Direction (Правац)

  • Horizontal (→) - елементи један поред другог
  • Vertical (↓) - елементи један испод другог

2. Gap (Размак)

  • Размак између child елемената
  • Може бити различит (нпр. 8px horizontal, 12px vertical)

3. Padding

  • Унутрашњи размак од ивица frame-а
  • Може бити:
  • Једнак са свих страна
  • Различит по страницама (top, right, bottom, left)
  • Хоризонтални и вертикални

4. Alignment

  • Хоризонтални: Left, Center, Right, Space between
  • Вертикални: Top, Center, Bottom

5. Resizing (Понашање при resize-у)

  • Hug contents - прилагођава се садржају
  • Fixed - фиксна величина
  • Fill container - попуњава родитељ