Auto Layout в Figma. База автолейаута в Фигме на готовых примерах

  Рет қаралды 13,257

Study Kvo. Обучение веб-дизайну и UX UI

Study Kvo. Обучение веб-дизайну и UX UI

Күн бұрын

Разбираемся с Автолейаутом. В уроке не будет сухой теории, разберём чисто на практических примерах базу Auto Layout, чтобы вы могли применять эти паттерны в своём дизайне. У Auto Layout в Фигме есть целая пачка свойств и назначений, в этом уроке мы разберём самую необходимую и достаточную базу, а отдельные дебри изучим в другом уроке, который выйдет на канале позже. Так шо, не пропускай, подписывайся)
🔹 Ссылки:
- Исходники для практики: design-figma.ru/md/youtube_files
- Курс по веб-дизайну: sanya-kvo.ru/
- Курс по UX/UI дизайну: sanya-kvo.ru/uxui
- Бесплатный марафон в ТГ: t.me/study_kvo
- Бесплатный марафон в ВК: study_kvo
- Саня Кво в Инсте: / sanya_kvo
🔹 Навигация:
00:00 - Начало
00:20 - Цель урока по автолейауту
00:55 - Auto Layout на кнопках
02:47 - Режим Hug Contetns
05:00 - Режим Fixed
06:43 - Кнопка с иконкой
08:32 - Лайфхак со сдвигом иконки внутри Auto Layout
09:33 - Практика на дизайне навигации
11:33 - Как переименовать сразу несколько слоев в Фигме
15:19 - Параметр Space Between на примере дизайна навигации
17:46 - Space Between в кнопке
18:45 - Дизайн карточки товара с Автолейаутом
22:24 - Абсолютное позиционирование
24:19 - Закрепление изученного
24:38 - Бесплатный марафон по дизайну
25:07 - Обучение в Study Kvo
#studykvo #figma #фигма

Пікірлер: 86
@study_kvo
@study_kvo Жыл бұрын
- Исходники для практики: design-figma.ru/md/youtube_files - Курс по веб-дизайну: sanya-kvo.ru/ - Курс по UX/UI дизайну: sanya-kvo.ru/uxui - Бесплатный марафон в ТГ: t.me/study_kvo - Бесплатный марафон в ВК: vk.com/study_kvo - Саня Кво в Инсте: instagram.com/sanya_kvo
@konov.kol07
@konov.kol07 Жыл бұрын
Это то что мне сейчас нужно! Столько видео пересмотрел а основы практические никто не объясняет как на самом деле! так что респект !
@study_kvo
@study_kvo Жыл бұрын
🙌🙌
@germantrumpet
@germantrumpet 18 күн бұрын
Супер! Огромная благодарность!
@nda2781
@nda2781 7 ай бұрын
очень круто) мне кажется это основные нюансы, которые возникают при работе с автолейаутами. Для меня урок - это не рассказывать что это за штука и для чего она служит, как делают это большинство людей, льют бессмысленную воду в которой можно самому разобраться методом тыка и не смотреть 20ти минутные ролики. А вот показать на примерах, что встречается в практике - именно в этом заключается ценность таких видео)) Если бы я записывал гайд - то я бы записал его именно так как вы. Прекрасно что есть люди которые мыслят подобным образом,а не выливают еще один тысячный ролик на ютуб о том, что же такое автолейаут. У таких людей не грех учиться, которые рассказывают о вещах через призму своих проб и ошибок своим языком. Именно в этом заключается компетентность автора, спасибо.
@study_kvo
@study_kvo 7 ай бұрын
Спасибо большое ❤️🫶
@elenachudakova9578
@elenachudakova9578 9 ай бұрын
Уроки просто офигические! Большое спасибо! И бесплатные марафоны классные! Только вы так быстро говорите, мой мозг не успевает)))
@study_kvo
@study_kvo 9 ай бұрын
😁🙌
@ultrapolyarnoevtorzhenie
@ultrapolyarnoevtorzhenie 10 ай бұрын
Максимально полезный канал без воды! Спасибо огромное!
@ffgirl7550
@ffgirl7550 Жыл бұрын
это просто лучший канал по веб-дизайну, который мне только приходилось просматривать!!! очень полезно, без воды, быстро, чётко и понятно БОЛЬШОЕ СПАСИБО 🥳🥳🥳
@study_kvo
@study_kvo Жыл бұрын
Спасибо ❤️❤️❤️
@user-kl8qp8ks6v
@user-kl8qp8ks6v 11 ай бұрын
Системно, профессионально и интересно поданная информация, огромная благодарность❤
@study_kvo
@study_kvo 11 ай бұрын
Спасибо ❤️
@leralymar
@leralymar 10 ай бұрын
Спасибо огромное за видео! Очень полезно, особенно про Space between.
@user-ou9tz7nh6w
@user-ou9tz7nh6w Жыл бұрын
Очень классно! Жду продолжения!
@pinkpanther2349
@pinkpanther2349 17 күн бұрын
Спасибо большое! 👍🔥👍
@vasya8441
@vasya8441 Жыл бұрын
Урок великолепный, фигма это магия.
@ndancer44
@ndancer44 Жыл бұрын
Вот стоило месяцок другим занимался и подзабыл! Благодаря тебе, кое-какие моменты вспомнил! Спасибо❤!
@study_kvo
@study_kvo Жыл бұрын
❤️❤️
@vasya8441
@vasya8441 Жыл бұрын
я тоже забываю если не пользуюсь) но благодаря ютубу можно быстро вспомнить
@olgakotova8943
@olgakotova8943 Жыл бұрын
Спасибо за урок, очень просто и доступно у тебя получилось объяснить непростую тему ❤
@umar_jan_9
@umar_jan_9 Жыл бұрын
Дико полезно 😍 Спасибо большое!
@study_kvo
@study_kvo Жыл бұрын
🙌🙌
@smolstory67
@smolstory67 Жыл бұрын
Спасибо вам огромное за такой супер урок❤ Ваши видео - это просто находка. Именно этого и не хватало. Прошла обучение у других, но у вас всё очень ясно и доступно. Спасибо ❤
@study_kvo
@study_kvo Жыл бұрын
Спасибо большое 🙌🙌
@user-xs8ty9dg5s
@user-xs8ty9dg5s Жыл бұрын
Спасибо за полезный контент!!!🤩
@annako4749
@annako4749 Жыл бұрын
По красоте ❤
@study_kvo
@study_kvo Жыл бұрын
❤️❤️
@lion_coward
@lion_coward 2 ай бұрын
Спасибо огромное, что помогли разобраться!
@study_kvo
@study_kvo 2 ай бұрын
@user-dt8tk8dj8x
@user-dt8tk8dj8x Жыл бұрын
я плохо понимаю разницу между группой, фреймом, секцией. Давайте разбираться
@user-bp2dg8wk5o
@user-bp2dg8wk5o 2 ай бұрын
круто! спасибо!
@study_kvo
@study_kvo 2 ай бұрын
💪
@pikaboo855
@pikaboo855 3 ай бұрын
Хотелось бы еще разборов по autolayot сложных видов 🙃🙂
@study_kvo
@study_kvo 3 ай бұрын
Следующее видео будет как раз на эту тему 😌
@pikaboo855
@pikaboo855 3 ай бұрын
@@study_kvo 🥰🥰🥰
@AnastasiiaYurlova
@AnastasiiaYurlova Жыл бұрын
Супер полезное видео! 👍
@study_kvo
@study_kvo Жыл бұрын
🫶🫶
@alexeybychkov_
@alexeybychkov_ Жыл бұрын
когда там уже 100 000? 😀
@study_kvo
@study_kvo Жыл бұрын
Без сотки сто 😁
@user-sl7cv9kh9s
@user-sl7cv9kh9s 3 ай бұрын
Благодарю автора 🤝
@study_kvo
@study_kvo 3 ай бұрын
🤝
@experiment643
@experiment643 Жыл бұрын
Очень полезно😊
@ilyaschokin6645
@ilyaschokin6645 Жыл бұрын
Спасибо, очень нужное
@AchtungBaby-io7zl
@AchtungBaby-io7zl Жыл бұрын
А можно продолжение урока, когда например много autolayoutов в ряд, например теже карточки товаров. Как потом лучше делать адаптив. Понятно что fill + hug, но хотелось бы прям на примерах разных увидеть) Какие то плагины используешь для этого? Спасибо за офигенский контент!
@study_kvo
@study_kvo Жыл бұрын
Во второй части разберём 🙌🙌
@user-gj6gp7bj1u
@user-gj6gp7bj1u Жыл бұрын
Спасибо ❤
@imperiastudio454
@imperiastudio454 Жыл бұрын
очень круто
@user-wh7eu6tc6g
@user-wh7eu6tc6g 7 ай бұрын
Очень полезное видео, спасибо🤩 А когда уже будет 2 часть по auto layout?😇
@slayzz7967
@slayzz7967 Ай бұрын
спасибо дядя
@mang0type
@mang0type 9 ай бұрын
Спасибо вам большое за такое понятное, короткое и грамотное преподнесение информации😭😭😭❤❤❤ я так мучалась с этим пониманием разницы между "Hug","Fixed","Fill", мне столько раз объясняли и показывали наглядно как, что, куда и зачем, но смысл дошёл только после вашего урока😭😭😭 Храни вас Боженька, здоровья и прочих приятных вам плюшек😄❤ p.s. куда делся видео-урок с применением стилей в компонентах?👀 p.p.s. будет ли какой разбор или обучающее видео по применению токенов и "Local Variables" в фигме?👀👀
@user-hh3ei2ng8c
@user-hh3ei2ng8c Жыл бұрын
Кайф! Спасибо! А подскажите ещё раз как плагин с иконками называется? Не рассмотрела, а на слух не нашла
@study_kvo
@study_kvo Жыл бұрын
Плагин Iconsax 🙌
@coppercrypter
@coppercrypter Жыл бұрын
сделай видео про адаптивность сайтов
@maximdzh
@maximdzh 10 ай бұрын
Здравствуйте, как разбить страницы приложения на логические слои?
@pirozhoque
@pirozhoque Жыл бұрын
Можно пожалуйста такой же видос по компонентам?
@study_kvo
@study_kvo Жыл бұрын
Уже на канале, в двух частях: - kzfaq.info/get/bejne/iJiAeM-dq67VoYE.html - kzfaq.info/get/bejne/rL6VZq-n0a_IgYU.html
@user-ob7qp7sb3i
@user-ob7qp7sb3i 10 ай бұрын
Подскажите ,после обновы фигмы возможно,не смогла выставить картинке абсолютное позиционирование чтоб внести в карточку с ауто-лейатом,этого значка просто нигде нет (( Спасибо за уроки 😎
@ultrapolyarnoevtorzhenie
@ultrapolyarnoevtorzhenie 10 ай бұрын
там в авто-лейауте под стрелочками теперь есть иконка по типу разделителя верха и низа, вот там нужно будет поменять на значение "авто"
@Kat_Video
@Kat_Video 2 ай бұрын
@@ultrapolyarnoevtorzhenie спасибо за комментарий, я уже все обыскала) получается нужно картинку в автолояут сделать?
@dariakwon7233
@dariakwon7233 10 күн бұрын
Привет, в меню авто лейаут нет пункта "Спейс битвин" почему-то, что-то делаю не так, хелп
@-ip9vp
@-ip9vp Ай бұрын
где можно скачать само техническое задание?
@NazarKoshla
@NazarKoshla 11 ай бұрын
Сан а Ти ити делаэш прототип сайта перед початком Чи сразу на кидаєш варіанти
@study_kvo
@study_kvo 10 ай бұрын
Всё зависит от ситуации)
@antonimantondrobot9459
@antonimantondrobot9459 Ай бұрын
Спасибо за видео! Почему-то Iconsax не находит в плагинах. А на оф сайте просто ссылка на проект фигмы с набором иконок. Что-то изменилось у них? но это не самое страшное )) почему-то у меня нет Space Between в списке расширенных настроек автолейаута, что могло пойти не так?
@study_kvo
@study_kvo 25 күн бұрын
Iconsax перестал существовать как плагин. Можно воспользоваться Iconify или файлом с иконками из Community: www.figma.com/community/file/1291274097213974914/iconsax-6-000-icons-6-styles
@study_kvo
@study_kvo 25 күн бұрын
Сейчас для активации Space between можно сделать двойной клик по синим прямоугольникам в секции Auto Layout
@just_animal
@just_animal 9 ай бұрын
Всем привет! Может кто-то знает, по какой причине у меня в фигме нет распределения для элементов Space Between?
@study_kvo
@study_kvo 9 ай бұрын
Он переехал, сделайте двойной клик по квадрату с голубыми прямоугольниками в секции AutoLayout
@user-bp2dg8wk5o
@user-bp2dg8wk5o 2 ай бұрын
@@study_kvo спасибо!
@user-np5yz9gz2c
@user-np5yz9gz2c 6 ай бұрын
Здравствуйте сейчас фигме spacing mode у меня нет
@study_kvo
@study_kvo 6 ай бұрын
После редизайна функции спрятали. Нажмите в секции Auto layout на голубой прямоугольник дважды и включится нужный режим ☺️
@user-gd3vr5cz7j
@user-gd3vr5cz7j 4 ай бұрын
Всем здравствуйте, подскажите пожалуйста, у меня у одной сайты не грузятся
@study_kvo
@study_kvo 4 ай бұрын
Попробуйте сейчас, сайт немного вздремнул) design-figma.ru/md/youtube_files
@alyonqshishina3386
@alyonqshishina3386 10 ай бұрын
ситуация сюр. учусь в академии графического дизайна. и так вышло что у нас сейчас Figma, но учитель, конечно, интересный. спрашиваю у него. как же сделать расстояние внутренних фреймов одинаковым. он оставил голосовое на 3 минуты что это не возможно. через 2 минуты показываю что сделала это по вашему гайду и он мне говорит что слово на скрине, который я скидывала, с маленькой буквы началось))) на самом деле хочется плакать из-за этого. я за такое обучение деньги плачу...
@study_kvo
@study_kvo 9 ай бұрын
Уххх, жесть 🫣
@user-pe8ds3wb3v
@user-pe8ds3wb3v 11 ай бұрын
У меня нет кнопки Space between...
@study_kvo
@study_kvo 10 ай бұрын
Нажмите дважды на квадрате, где идёт управление положением объекта внутри AutoLayout
@user-gm2oc1id1c
@user-gm2oc1id1c 3 ай бұрын
Сейчас в этом режиме нельзя изменить текст((
@study_kvo
@study_kvo 3 ай бұрын
А в каком именно режиме?
@tim.wonderer
@tim.wonderer 5 ай бұрын
iconsax сейчас не работает чтоли
@study_kvo
@study_kvo 5 ай бұрын
Да, пока прикрыли. Можно использовать Iconify вместо него
@tim.wonderer
@tim.wonderer 5 ай бұрын
спасибо щас чекну @@study_kvo
@tim.wonderer
@tim.wonderer 5 ай бұрын
Блин это не тио совсем, у сакса иконки четкие @@study_kvo
@study_kvo
@study_kvo 5 ай бұрын
Не спорю, плагин был хорош. Можно на их сайте брать иконки: iconsax.io/
@tim.wonderer
@tim.wonderer 5 ай бұрын
О сайт сайт есть, спасибо@@study_kvo
10 лайфхаков и секретов в Фигме, которые ускорят работу
12:55
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 8 М.
Автолейаут в Фигме. Делаем резиновый дизайн на Auto Layout
23:18
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 3,4 М.
В ДЕТСТВЕ СТРОИШЬ ДОМ ПОД СТОЛОМ
00:17
SIDELNIKOVVV
Рет қаралды 3,9 МЛН
Each found a feeling.#Short #Officer Rabbit #angel
00:17
兔子警官
Рет қаралды 7 МЛН
Шокирующая Речь Выпускника 😳📽️@CarrolltonTexas
00:43
Глеб Рандалайнен
Рет қаралды 12 МЛН
Фигма обновила Auto Layout 🔥 Ускоряем работу х10
9:31
КруТа в дизайне ❘ Блог Крупиной Татьяны
Рет қаралды 4,5 М.
Автолейауты, компоненты и варианты в фигме 2023-2024| Как работать в фигме быстро
27:35
Катя Макеева про веб-дизайн | Академия Practicult
Рет қаралды 49 М.
MASTER Unique Layouts Using Figma Auto Layout
12:04
Arnau Ros
Рет қаралды 16 М.
Master Auto Layout in 20 minutes | 2023 Auto Layout Figma Tutorial
17:53
Откуда дизайнеру брать уверенность? [И не только дизайнеру]
13:26
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 1,5 М.
Как сделать дизайн сайта в Figma. Дизайн сайта в Фигме. Саня Кво
17:54
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 433 М.
В ДЕТСТВЕ СТРОИШЬ ДОМ ПОД СТОЛОМ
00:17
SIDELNIKOVVV
Рет қаралды 3,9 МЛН