======================================================================
📘 НАЗВАНИЕ ФАЙЛА: gayd_figma_auto_layout_50_i_variables_s_nulya_avtovydacha_guide.txt
======================================================================

=== КРАТКАЯ ВЕРСИЯ (ДЛЯ БЫСТРОГО СТАРТА) ===

1. Выделите элементы и нажмите Shift+A – создастся Auto Layout. Настройте Direction (Vertical/Horizontal/Wrap), Gap, Padding.
2. Для каждого дочернего элемента выберите режим: Fixed (фиксированный), Hug Contents (по содержимому) или Fill Container (заполнить контейнер). Золотое правило: экран Fixed, карточка Fill, текст Fill, кнопка Hug.
3. Создайте Variables: откройте Local variables (иконка в правой панели). Создайте Color (bg-primary, text-primary) и Number (spacing, radius).
4. Добавьте режимы (Modes) для тёмной и светлой темы. Присвойте значения переменным.
5. Примените переменные к свойствам объектов (Fill, Stroke, Corner radius, Padding).
6. Переключение темы: выделите главный фрейм, в панели Layer нажмите Change variable mode и выберите нужный режим.
7. При ошибках: если текст вылезает – установите Fill Container и Auto height. Для свободного позиционирования внутри Auto Layout включите Absolute Position.

---------------------------------------------------

=== ПОДРОБНАЯ ВЕРСИЯ (ПОШАГОВАЯ ИНСТРУКЦИЯ ДЛЯ НОВИЧКОВ) ===

Цель: освоить Auto Layout и Variables в Figma для создания адаптивных интерфейсов с автоматической сменой темы.

ШАГ 1. ОСНОВЫ AUTO LAYOUT
- Выделите несколько объектов (например, кнопку с иконкой и текстом). Нажмите Shift+A – они будут помещены во фрейм с Auto Layout.
- В панели свойств справа настройте:
  • Direction: Vertical (вертикально, колонка), Horizontal (горизонтально, строка), Wrap (перенос строк – как flex-wrap, полезно для тегов).
  • Gap between items: расстояние между элементами. Можно задать фиксированное число (например, 16px) или оставить Auto (равномерное распределение).
  • Padding: внутренние отступы фрейма (сверху/снизу, слева/справа).
- Вы можете добавлять и удалять элементы внутри Auto Layout, они будут автоматически перестраиваться.

ШАГ 2. РЕЖИМЫ РАЗМЕРА (RESIZING)
- Внутри каждого дочернего элемента есть три иконки в панели свойств (в разделе Layout):
  1. Fixed – элемент имеет фиксированные ширину и высоту.
  2. Hug Contents – размер контейнера определяется содержимым (кнопка с текстом подстроится под текст).
  3. Fill Container – элемент растягивается на всё доступное пространство родителя (например, текстовый блок в карточке).
- Золотое правило адаптивного дизайна:
  • Самый внешний фрейм (экран) – Fixed (задайте нужный размер).
  • Карточка внутри – Fill Container по ширине, Hug по высоте (если содержимое меняется).
  • Текст внутри карточки – Fill Container по ширине, Hug по высоте (Auto height).
  • Кнопка – Hug Contents (подстраивается под текст).

ШАГ 3. СОЗДАНИЕ ПЕРЕМЕННЫХ (VARIABLES)
- Кликните на пустое место холста, чтобы не было выделения. В правой панели найдите иконку «Local variables» (выглядит как ползунки) и нажмите на неё.
- Нажмите «Create variable» и выберите тип:
  • Color – для цветов.
  • Number – для числовых значений (отступы, радиусы, размеры).
  • String – для текстовых значений (названия, лейблы).
  • Boolean – для включения/отключения.
- Создайте несколько переменных:
  • Color: bg-primary (фоновый цвет), text-primary (цвет текста), accent-color.
  • Number: spacing-sm (8px), spacing-md (16px), radius-card (12px).
- Названия переменных рекомендуется писать на английском в стиле kebab-case или camelCase.

ШАГ 4. РЕЖИМЫ (MODES) ДЛЯ ТЁМНОЙ И СВЕТЛОЙ ТЕМЫ
- В окне Variables нажмите кнопку «New Mode» (плюсик в заголовке таблицы). По умолчанию уже есть один режим (Mode 1). Переименуйте его в Light.
- Создайте второй режим и назовите Dark.
- Теперь для каждой переменной-цвета заполните значения для Light и Dark. Например:
  • bg-primary: в Light = #FFFFFF, в Dark = #121212.
  • text-primary: в Light = #111111, в Dark = #EEEEEE.

ШАГ 5. ПРИМЕНЕНИЕ ПЕРЕМЕННЫХ К ОБЪЕКТАМ
- Выделите любой фрейм. В панели свойств найдите свойство Fill (заливка). Нажмите на иконку библиотеки стилей (квадратик с точкой) рядом с цветом и выберите из списка созданную переменную (например, bg-primary).
- Аналогично примените переменные к Stroke, Corner radius, Padding и другим числовым свойствам.
- Чтобы переключить всю страницу на тёмную тему: выделите главный фрейм (или родительский компонент). В панели свойств в разделе «Layer» найдите значок переключения режима (Change variable mode) – это две иконки: солнце/луна. Нажмите и выберите Dark. Все объекты, использующие переменные, мгновенно перекрасятся.

ШАГ 6. ПРАКТИЧЕСКАЯ СБОРКА АДАПТИВНОЙ КАРТОЧКИ ТОВАРА
- Создайте прямоугольник для изображения: задайте ему Fill Container по ширине и фиксированную высоту (200px).
- Добавьте заголовок (Fill Container, Hug высота), описание (Fill Container, Hug высота), цену (Hug).
- Оберните все эти элементы в вертикальный Auto Layout (Shift+A), установите Gap = 8px, Padding = 16px.
- Добавьте кнопку «Купить» (Auto Layout, Hug Contents, заливка accent-color).
- Оберните всё это в ещё один Auto Layout (родительский), задайте ему Corner radius через переменную radius-card, обводку и тень.
- Теперь потяните за правый край родительского фрейма – все элементы плавно растянутся, текст останется читаемым благодаря Hug/Fill.

ТИПИЧНЫЕ ОШИБКИ
- «Текст вылезает за границы»: убедитесь, что текстовый слой имеет режим Fill Container и включена опция Auto height (в свойствах текста).
- «Не могу переместить элемент внутри Auto Layout»: включите для него Absolute Position (иконка крестика в правом верхнем углу панели свойств) – тогда элемент выйдет из потока и его можно позиционировать свободно.

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

💡 Если возникнут вопросы – напишите в чат заказа, я с радостью помогу!

======================================================================