Автолейаут в Фигме. Делаем резиновый дизайн на Auto Layout
Делаем магию — форму, для которой не придётся делать адаптивные версии на планшет и мобилку. Вместо этого настроим дизайн через Auto Layout и будем менять ширину, а остальное Фигма сделает за нас.
Это второе видео про Автолейаут, в первом мы разобрали базу и основные принципы. Поэтому, если ты только начинаешь работать с AL, лучше всего начать с первого урока.
🔹 Ссылки:
– Исходники для практики: https://design-figma.ru/md/youtube_files
– Auto Layout, уровень 1: https://youtu.be/-hiWMFGNgiM
– Курс по веб-дизайну: https://sanya-kvo.ru/
– Курс по UX/UI дизайну: https://sanya-kvo.ru/uxui
– Бесплатный марафон в ТГ: https://t.me/study_kvo
– Бесплатный марафон в ВК: https://vk.com/study_kvo
– Саня Кво в Инсте: https://www.instagram.com/sanya_kvo
🔹 Навигация:
00:00:00 – Начало
00:00:21 – Два типа дизайнеров
00:00:38 – Цель уроков по автолейауту
00:01:14 – «Резиновая» форма заявки в Фигме
00:02:29 – Поле ввода на автолейауте
00:03:14 – Лайфхак с расположением текста оптически по центру
00:06:51 – Кнопка на автолейауте
00:08:29 – Собираем форму
00:10:20 – Абсолютное позиционирование на примере сердечка
00:11:23 – Добавляем магию: автоматический адаптив
00:16:51 – Адаптив для планшета
00:17:13 – Адаптив для мобилки
00:19:49 – Закрепление изученного
00:22:27 – Бесплатный практикум по дизайну
00:22:46 – Обучение в Study Kvo
#studykvo #figma #фигма
Видео Автолейаут в Фигме. Делаем резиновый дизайн на Auto Layout канала Study Kvo. Обучение веб-дизайну и UX UI
Это второе видео про Автолейаут, в первом мы разобрали базу и основные принципы. Поэтому, если ты только начинаешь работать с AL, лучше всего начать с первого урока.
🔹 Ссылки:
– Исходники для практики: https://design-figma.ru/md/youtube_files
– Auto Layout, уровень 1: https://youtu.be/-hiWMFGNgiM
– Курс по веб-дизайну: https://sanya-kvo.ru/
– Курс по UX/UI дизайну: https://sanya-kvo.ru/uxui
– Бесплатный марафон в ТГ: https://t.me/study_kvo
– Бесплатный марафон в ВК: https://vk.com/study_kvo
– Саня Кво в Инсте: https://www.instagram.com/sanya_kvo
🔹 Навигация:
00:00:00 – Начало
00:00:21 – Два типа дизайнеров
00:00:38 – Цель уроков по автолейауту
00:01:14 – «Резиновая» форма заявки в Фигме
00:02:29 – Поле ввода на автолейауте
00:03:14 – Лайфхак с расположением текста оптически по центру
00:06:51 – Кнопка на автолейауте
00:08:29 – Собираем форму
00:10:20 – Абсолютное позиционирование на примере сердечка
00:11:23 – Добавляем магию: автоматический адаптив
00:16:51 – Адаптив для планшета
00:17:13 – Адаптив для мобилки
00:19:49 – Закрепление изученного
00:22:27 – Бесплатный практикум по дизайну
00:22:46 – Обучение в Study Kvo
#studykvo #figma #фигма
Видео Автолейаут в Фигме. Делаем резиновый дизайн на Auto Layout канала Study Kvo. Обучение веб-дизайну и UX UI
Показать
Комментарии отсутствуют
Информация о видео
5 марта 2024 г. 19:15:00
00:23:18
Другие видео канала
![Зачем дизайнеры создают школы, или как появилась Study Kvo #бизнес #вебдизайн #обучениедизайну](https://i.ytimg.com/vi/9GTK8BcUExk/default.jpg)
![Как расти джуну в крупной компании и что будет, если работать в компании поменьше #дизайн #развитие](https://i.ytimg.com/vi/XjsDV4pFK6g/default.jpg)
![Что нужно учитывать при добавлении редизайна себе в портфолио? #дизайн #портфолио #фриланс](https://i.ytimg.com/vi/h-3pvtdJgtw/default.jpg)
![Обновление Figma. Scale, стили ссылки и запуск прототипов](https://i.ytimg.com/vi/1VO1u8fbhpI/default.jpg)
![Можно ли на первых порах не пользоваться стилями и компонентами? #дизайн #фигма #figma](https://i.ytimg.com/vi/80p7_mdkuS0/default.jpg)
![⭐ 10 Отборных плагинов на примерах. Плагины Figma от подписчиков](https://i.ytimg.com/vi/ao0wm0E--Iw/default.jpg)
![Smart Animate в Фигме. Делаем анимацию как в приложении Ozon](https://i.ytimg.com/vi/PaKHWpEUNQo/default.jpg)
![Фигма. Уроки Figma по веб-дизайну. Обзор интерфейса Figma / Саня Кво](https://i.ytimg.com/vi/oqZuuKfsIZI/default.jpg)
![Компоненты в Фигме. Часть 2: Variants в Figma](https://i.ytimg.com/vi/vXe3LvlIdQQ/default.jpg)
![Auto Layout в Figma. База автолейаута в Фигме на готовых примерах](https://i.ytimg.com/vi/-hiWMFGNgiM/default.jpg)
![Насмотренность для дизайнера. Как прокачать насмотренность](https://i.ytimg.com/vi/AC8f8T_WxG8/default.jpg)
![Как сделать аватарку в фотошопе. Эффект Dual tone. Уроки фотошоп. Фотошоп кво](https://i.ytimg.com/vi/kXyeqHyb9uk/default.jpg)
![Фриланс: страшно сделать первый шаг. Как избавиться?](https://i.ytimg.com/vi/IaE927CXEI0/default.jpg)
![Можно ли стать дизайнером самостоятельно? Плюсы и минусы](https://i.ytimg.com/vi/pHEU03HIHGk/default.jpg)
![Дизайн-разборка #19. Разбор дизайн-макетов подписчиков](https://i.ytimg.com/vi/qWTnVqq73RY/default.jpg)
![Как сделать сайт в Фигме. Марафон по веб дизайну Study Kvo](https://i.ytimg.com/vi/2UrowmEkhwA/default.jpg)
![Большое обновление Фигмы 2022: AutoLayout, компоненты, smart animate, обводка и многое другое](https://i.ytimg.com/vi/oVjdnFFGnlU/default.jpg)
![10 лайфхаков и секретов в Фигме, которые ускорят работу](https://i.ytimg.com/vi/C5jSCS0utoA/default.jpg)
![Компоненты в Фигме. Вложенные компоненты, свойства компонентов в Figma](https://i.ytimg.com/vi/R2PEllFHqqM/default.jpg)
![Дизайн-разборка #21. Разбор дизайн-макетов подписчиков](https://i.ytimg.com/vi/b0PPODlTPs0/default.jpg)