Как создать адаптивный хедер в Figma: Auto layout и эффект наведения

В этом уроке мы создадим компонент заголовка в Figma с нуля! Мы изучим Auto Layout, свойства текста и варианты, чтобы создать интерактивное навигационное меню с плавными эффектами при наведении курсора. Вы также узнаете, как использовать 12-колоночную сетку макета, организовать кнопки навигации и превратить заголовок в многоразовый компонент для создания единообразного дизайна веб-сайта. 📂 РЕСУРСЫ И ССЫЛКИ: 🎬 Предыдущие уроки – Создание компонента кнопки в Figma    • How to Create a Button Component in Figma–...      • Hug vs Fill vs Fixed in Figma's Auto Layout      • How to Create a Cute Toggle Switch in Figm...      • How to Create a Checkbox in Figma-Step by ...   ⏱️ ВРЕМЕННЫЕ МЕТКИ: 00:00 – Вступление 00:26 – Создание навигационной кнопки с помощью Auto Layout 01:10 – Добавление свойств текста 01:25 – Создание вариантов кнопки и эффекта наведения курсора Эффекты 02:40 – Прототипирование кнопок 02:53 – Настройка рамки для настольных компьютеров и 12-колоночной сетки 03:10 – Создание навигационного меню 03:34 – Добавление логотипа и применение Auto Layout 05:18 – Создание компонента заголовка 05:52 – Адаптивный дизайн заголовка 06:22 – Добавление еще одной кнопки/иконки в заголовок 07:44 – Конечный результат 💡 ЧТО ВЫ УЗНАЕТЕ: ✅ Как создавать навигационные кнопки с помощью Auto Layout ✅ Как использовать свойства текста для настройки меток кнопок ✅ Создание вариантов по умолчанию и при наведении курсора с интерактивными эффектами ✅ Настройка 12-колоночной сетки для веб-дизайна ✅ Организация элементов навигации с помощью Auto Layout ✅ Превращение заголовка вашего сайта в компонент 🔔 Подпишитесь, чтобы получать больше милых и простых в использовании примеров дизайна Figma и UI для начинающих Уроки!    / @riamudesign   💬 Есть вопросы или идеи для следующего урока? Оставьте комментарий ниже! #Figma #FigmaTutorial #UIDesign #WebsiteHeader #AutoLayout #FigmaComponents #FigmaVariants #WebDesign #FigmaForBeginners #Textproperties