======================================================================
📘 TITLE: 📐 ГАЙД: FIGMA AUTO LAYOUT И VARIABLES С НУЛЯ 📐 | АВТОВЫДАЧА
📂 CATEGORY: Adobe
📄 FILENAME: gayd_figma_auto_layout_50_i_variables_s_nulya_avtovydacha_guide.txt
======================================================================

📐 ПОЛНЫЙ ГАЙД: МАСТЕРСТВО AUTO LAYOUT И ДИЗАЙН-ТОКЕНЫ (VARIABLES) В FIGMA 📐

🔹 ВВЕДЕНИЕ И СОВРЕМЕННЫЙ ДИЗАЙН-ПАЙПЛАЙН:
Auto Layout и Variables (Переменные) в Figma полностью сближают проектирование интерфейсов с реальной версткой на CSS (Flexbox / CSS Variables). Дизайнер перестает двигать пиксели руками: адаптивные компоненты автоматически подстраиваются под длину текста, размер экрана любого смартфона или десктопа, а смена темы оформления (Dark/Light mode) и мультиязычность происходят в 1 клик через переключение режимов (Modes).

🔹 ШАГ 1: АНАТОМИЯ AUTO LAYOUT (SHIFT + A)
1. Выделите любые элементы (текст + иконку) и нажмите `Shift + A`.
2. Ключевые параметры панели Auto Layout:
   • `Direction (Направление)`:
     - `Vertical (↓)` — элементы выстраиваются в колонку.
     - `Horizontal (→)` — элементы выстраиваются в строку.
     - `Wrap (↵)` — перенос строк (как в CSS flex-wrap). Идеально для тегов, категорий и галерей.
   • `Gap between items (Расстояние между элементами)`: фиксированное число (например, `16px`) или `Auto` (Space-between).
   • `Padding (Внутренние отступы)`: раздельная настройка Left/Right и Top/Bottom.

🔹 ШАГ 2: РЕЖИМЫ РАЗМЕРА (RESIZING BEHAVIORS) — ГЛАВНЫЙ СЕКРЕТ АДАПТИВНОСТИ
Каждый вложенный элемент внутри Auto Layout может вести себя тремя способами:
1. `Fixed Width / Height (Фиксированный)`: точный неизменный размер в пикселях.
2. `Hug Contents (Обнять содержимое)`: родительский контейнер сжимается/расширяется строго по размеру дочерних элементов (кнопки, плашки).
3. `Fill Container (Заполнить контейнер)`: элемент растягивается на 100% ширины родительского фрейма (текстовые блоки, инпуты, баннеры).
*Золотое правило адаптива:* Главный экран = Fixed; Карточка внутри = Fill Container; Текст внутри карточки = Fill Container; Кнопка = Hug Contents.

🔹 ШАГ 3: ВНЕДРЕНИЕ VARIABLES (ПЕРЕМЕННЫХ И ДИЗАЙН-ТОКЕНОВ)
Variables позволяют хранить цвета, числа (отступы, скругления), строки и булевы значения централизованно.

1. Создание коллекции переменных:
   • Кликните на свободное место холста -> в правой панели нажмите `Local variables (Иконка ползунков)`.
   • Нажмите `Create variable` -> выберите тип:
     - `Color (Цвет)`: создайте `bg-primary`, `text-primary`, `accent-color`.
     - `Number (Число)`: создайте токены отступов `spacing-sm (8px)`, `spacing-md (16px)`, `radius-card (12px)`.
2. Создание темной и светлой темы (Modes):
   • В окне Variables нажмите `+ (New Mode)` в шапке таблицы.
   • Переименуйте колонку 1 в `Light`, колонку 2 в `Dark`.
   • Задайте цвета: для `bg-primary` в Light задайте `#FFFFFF`, а в Dark задайте `#121212`.
3. Применение переменных:
   • Выделите фрейм -> в свойствах Fill нажмите на иконку библиотеки стилей -> выберите созданную переменную `bg-primary`.
   • Чтобы переключить всю страницу в Dark Mode: выделите главный фрейм -> на правой панели в секции `Layer` нажмите значок переключения режима (Change variable mode) -> выберите `Dark`. Весь дизайн мгновенно перекрасится!

🔹 ШАГ 4: СБОРКА АДАПТИВНОЙ КАРТОЧКИ ТОВАРА ЗА 3 МИНУТЫ
1. Создайте контейнер под картинку: прямоугольник `Fill Container`, высота 200px.
2. Добавьте заголовок (Fill container) + описание (Fill container) + цену (Hug).
3. Оберните их в вертикальный Auto Layout с Gap = 8px.
4. Добавьте кнопку «Купить» (Auto Layout, Hug contents, цвет заливки `accent-color`).
5. Выделите всю карточку: задайте Stroke, Corner Radius через переменную `radius-card` и внутренние паддинги 16px.
6. Потяните карточку за правый край: все элементы плавно растягиваются и адаптируются без единой поломки!

🔹 ТОНКАЯ НАСТРОЙКА И ПРЕОДОЛЕНИЕ ТИПИЧНЫХ ОШИБОК:
1. «Текст вылезает за границы фрейма при изменении ширины»: Убедитесь, что у текстового слоя стоит режим `Fill Container`, а в настройках текста включен `Auto height`.
2. «Элемент не позиционируется свободно внутри Auto Layout»: Включите для него опцию `Absolute Position` (иконка перекрестия в правом верхнем углу панели свойств).

🔹 ПРО-СОВЕТЫ:
• Используйте `Min Width` и `Max Width` в свойствах размера, чтобы верстка карточек не сжималась меньше 320px и не растягивалась шире 600px на ультрашироких мониторах.

💡 Если у вас возникнут любые вопросы по выполнению шагов из этого гайда — напишите в чат заказа, я с радостью подскажу!
