Дизайн мобильного онбординга в Figma: туториал | Auto Layout, сетки и прототипирование
riamu design
0:00 / 0:00
Дизайн мобильного онбординга в Figma: туториал | Auto Layout, сетки и прототипирование
69 просмотров · 8 дн. назад
riamu design
7 подписчиков
69 просмотров · 8 дн. назад
Узнайте, как шаг за шагом разработать симпатичный и лаконичный интерфейс для мобильной версии приложения в Figma, используя 4-колоночную сетку макета, Auto Layout и прототипирование. Мы также добавим очаровательные облака в акварельном стиле и интерактивные кнопки, чтобы оживить наш дизайн! 🌿☁️💜
📂 РЕСУРСЫ И ССЫЛКИ:
🎬 Предыдущий урок
• how to create a Watercolor Halloween Pumpk...
• How to Create an Interactive FAQ Accordion...
• Creating a Responsive Product Card in Figm...
• How to create a responsive header in figma...
• Figma Instance Swap & Boolean Properties i...
• How to Create a Checkbox in Figma-Step by ...
• 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...
⏱️ ВРЕМЕННЫЕ МЕТКИ:
00:00 – Вступление
00:20 – Создание сетки макета из 4 колонок
01:30 – Настройка автоматической компоновки и интервалов
04:00 – Добавление акварельных облаков
04:29 – Добавление нового экрана
05:56 – Соединение экранов с Прототипирование
06:14 – Предварительный просмотр финального процесса адаптации
💡 ЧТО ВЫ УЗНАЕТЕ:
✅ Как создать 4-колоночную сетку макета для мобильного дизайна
✅ Как организовать контент с помощью Auto Layout
✅ Как настроить интервалы, отступы и радиус скругления углов
✅ Как добавить облака в стиле акварели в ваш дизайн
✅ Как создать интерактивные элементы для кнопок «Далее», «Пропустить» и «Начать»
🌷 ДАВАЙТЕ ОБЩАТЬСЯ!
🔔 Подпишитесь, чтобы получать больше милых и простых в освоении уроков по Figma и UI-дизайну!
/ @riamudesign
Dribbble:
https://dribbble.com/zahraabbaszade
LinkedIn:
/ zahra-abbaszade-uidesigner
💬 Есть вопросы или идеи для следующего урока? Напишите в комментариях!
#Figma #FigmaTutorial #OnboardingDesign #FigmaPrototyping #AutoLayout #UIDesign #MobileAppDesign #FigmaForBeginner #MobileUIDesign