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

[@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

[@nda2781]

очень круто) мне кажется это основные нюансы, которые возникают при работе с автолейаутами. Для меня урок - это не рассказывать что это за штука и для чего она служит, как делают это большинство людей, льют бессмысленную воду в которой можно самому разобраться методом тыка и не смотреть 20ти минутные ролики. А вот показать на примерах, что встречается в практике - именно в этом заключается ценность таких видео)) Если бы я записывал гайд - то я бы записал его именно так как вы. Прекрасно что есть люди которые мыслят подобным образом,а не выливают еще один тысячный ролик на ютуб о том, что же такое автолейаут. У таких людей не грех учиться, которые рассказывают о вещах через призму своих проб и ошибок своим языком. Именно в этом заключается компетентность автора, спасибо.

[@study_kvo]

Спасибо большое ❤️🫶

[@AbdullaXayitov-n5s]

я получил пользу от видео, так как оно хорошо объяснено мы наблюдаем из Узбекистана

[@study_kvo]

🫶🫶 рад, что полезно

[@konov.kol07]

Это то что мне сейчас нужно! Столько видео пересмотрел а основы практические никто не объясняет как на самом деле! так что респект !

[@study_kvo]

🙌🙌

[@ralunaD]

Очень круто объясняете. понятно, доступно без воды. Пролистала все ваши видео, некоторые уже посмотрела. столько полезного и интересного. В планах посмотреть всеееееее. Спасибо за крутой контент👍

[@study_kvo]

🫶🫶 спасибо

[@KetrinLazareva-t2w]

Спасибо за ваше видео, это помогло мне понять лучше что такое auto layout , вы так хорошо объясняете , все понятно и без воды

[@study_kvo]

Супер! Рад, что полезно 🫶

[@ultrapolyarnoevtorzhenie]

Максимально полезный канал без воды! Спасибо огромное!

[@Тётя-б8р]

офигенное видео. До этого была практика в auto layout-е, но мне понадобилось куча часов, чтобы разобраться в том, что очень понятным языком рассказывается в этом видео. Круто.

[@study_kvo]

Огонь ✊ Рад, что помог)

[@elenachudakova9578]

Уроки просто офигические! Большое спасибо! И бесплатные марафоны классные! Только вы так быстро говорите, мой мозг не успевает)))

[@study_kvo]

😁🙌

[@ffgirl7550]

это просто лучший канал по веб-дизайну, который мне только приходилось просматривать!!! очень полезно, без воды, быстро, чётко и понятно БОЛЬШОЕ СПАСИБО 🥳🥳🥳

[@study_kvo]

Спасибо ❤️❤️❤️

[@МарияДолженкова-о9б]

Системно, профессионально и интересно поданная информация, огромная благодарность❤

[@study_kvo]

Спасибо ❤️

[@leralymar]

Спасибо огромное за видео! Очень полезно, особенно про Space between.

[@ЛенаИсаева-щ4ъ]

Очень классно! Жду продолжения!

[@KKS_44]

Вот стоило месяцок другим занимался и подзабыл! Благодаря тебе, кое-какие моменты вспомнил! Спасибо❤!

[@study_kvo]

❤️❤️

[@vasya8441]

я тоже забываю если не пользуюсь) но благодаря ютубу можно быстро вспомнить

[@smolstory67]

Спасибо вам огромное за такой супер урок❤ Ваши видео - это просто находка. Именно этого и не хватало. Прошла обучение у других, но у вас всё очень ясно и доступно. Спасибо ❤

[@study_kvo]

Спасибо большое 🙌🙌

[@olgakotova8943]

Спасибо за урок, очень просто и доступно у тебя получилось объяснить непростую тему ❤

[@ayattelzhanov9888]

Лять, как же четко объясняешь. Спасибо. А то видео других авторов приходится ускорять, чтобы не уснуть

[@study_kvo]

🤝🤝 кайф

[@vasya8441]

Урок великолепный, фигма это магия.

[@Татьяна-ю1р2м]

Спасибо за полезный контент!!!🤩

[@umar_jan_9]

Дико полезно 😍 Спасибо большое!

[@study_kvo]

🙌🙌

[@germantrumpet]

Супер! Огромная благодарность!

[@KarVetka777]

Благодарочка! Очень понятно и легко стало

[@bad_tranquility]

Спасибо огромное, что помогли разобраться!

[@study_kvo]

✊

[@annako4749]

По красоте ❤

[@study_kvo]

❤️❤️

[@pinkpanther2349]

Спасибо большое! 👍🔥👍

[@AchtungBaby_87]

А можно продолжение урока, когда например много autolayoutов в ряд, например теже карточки товаров. Как потом лучше делать адаптив. Понятно что fill + hug, но хотелось бы прям на примерах разных увидеть) Какие то плагины используешь для этого? Спасибо за офигенский контент!

[@study_kvo]

Во второй части разберём 🙌🙌

[@yuri.moiseyev]

лучшее обяснение!

[@AnastasiiaYurlova]

Супер полезное видео! 👍

[@study_kvo]

🫶🫶

[@Kylikovpavel]

Благодарю автора 🤝

[@study_kvo]

🤝

[@alexeybychkov_]

когда там уже 100 000? 😀

[@study_kvo]

Без сотки сто 😁

[@СалаватКазин]

СПАСИБО

[@ЛюбаКотунова-г1ж]

Очень полезное видео, спасибо🤩 А когда уже будет 2 часть по auto layout?😇

[@pikaboo855]

Хотелось бы еще разборов по autolayot сложных видов 🙃🙂

[@study_kvo]

Следующее видео будет как раз на эту тему 😌

[@pikaboo855]

@@study_kvo 🥰🥰🥰

[@ТатьянаРоманенко-ц7я]

Спасибо ❤

[@СветланаСветикова-е2м]

круто! спасибо!

[@study_kvo]

💪

[@ilyaschokin6645]

Спасибо, очень нужное

[@experiment643]

Очень полезно😊

[@imperiastudio454]

очень круто

[@just_animal]

Всем привет! Может кто-то знает, по какой причине у меня в фигме нет распределения для элементов Space Between?

[@study_kvo]

Он переехал, сделайте двойной клик по квадрату с голубыми прямоугольниками в секции AutoLayout

[@СветланаСветикова-е2м]

@@study_kvo спасибо!

[@ЭллаЯнтурина-н4л]

я плохо понимаю разницу между группой, фреймом, секцией. Давайте разбираться

[@mang0type]

Спасибо вам большое за такое понятное, короткое и грамотное преподнесение информации😭😭😭❤❤❤ я так мучалась с этим пониманием разницы между "Hug","Fixed","Fill", мне столько раз объясняли и показывали наглядно как, что, куда и зачем, но смысл дошёл только после вашего урока😭😭😭 Храни вас Боженька, здоровья и прочих приятных вам плюшек😄❤ p.s. куда делся видео-урок с применением стилей в компонентах?👀 p.p.s. будет ли какой разбор или обучающее видео по применению токенов и "Local Variables" в фигме?👀👀

[@slayzz7967]

спасибо дядя

[@Мамулечка-ф7ц]

Круто, забавно, что ничего нового они не придумали а закодили html flex. Интересно экспортируются ли свойства в css

[@pirozhoque]

Можно пожалуйста такой же видос по компонентам?

[@study_kvo]

Уже на канале, в двух частях: - kzbin.info/www/bejne/iGOzdp-ie62kp68 - kzbin.info/www/bejne/rInIZH-soa6Xh7M

[@АннаКожемякина-п6о]

Подскажите ,после обновы фигмы возможно,не смогла выставить картинке абсолютное позиционирование чтоб внести в карточку с ауто-лейатом,этого значка просто нигде нет (( Спасибо за уроки 😎

[@ultrapolyarnoevtorzhenie]

там в авто-лейауте под стрелочками теперь есть иконка по типу разделителя верха и низа, вот там нужно будет поменять на значение "авто"

[@Kat_Video]

@@ultrapolyarnoevtorzhenie спасибо за комментарий, я уже все обыскала) получается нужно картинку в автолояут сделать?

[@coppercrypter]

сделай видео про адаптивность сайтов

[@АлинаМешкова-г1ж]

Кайф! Спасибо! А подскажите ещё раз как плагин с иконками называется? Не рассмотрела, а на слух не нашла

[@study_kvo]

Плагин Iconsax 🙌

[@ВикторСмоляк-д2в]

Доброго дня! Отличное видео! Если можно, подскажите, у меня нет в фигме space between, его можно как то найти? И второй вопрос Auto-layou - в коде - это Flex элемент?

[@nailasadullin2220]

два раза на синию иконку нажми

[@georgkirukhin7121]

Спасибо ,очень хороший урок.Пожалуйста,если можно плагин написать не поняла как называется

[@study_kvo]

Вы про Iconsax? К сожалению, его больше нет. Но есть другие плагины с иконками: Feather icons и Iconify

[@maximdzh]

Здравствуйте, как разбить страницы приложения на логические слои?

[@antonimantondrobot9459]

Спасибо за видео! Почему-то Iconsax не находит в плагинах. А на оф сайте просто ссылка на проект фигмы с набором иконок. Что-то изменилось у них? но это не самое страшное )) почему-то у меня нет Space Between в списке расширенных настроек автолейаута, что могло пойти не так?

[@study_kvo]

Iconsax перестал существовать как плагин. Можно воспользоваться Iconify или файлом с иконками из Community: www.figma.com/community/file/1291274097213974914/iconsax-6-000-icons-6-styles

[@study_kvo]

Сейчас для активации Space between можно сделать двойной клик по синим прямоугольникам в секции Auto Layout

[@-ip9vp]

где можно скачать само техническое задание?

[@NazarKoshla]

Сан а Ти ити делаэш прототип сайта перед початком Чи сразу на кидаєш варіанти

[@study_kvo]

Всё зависит от ситуации)

[@матеша-м2ч]

Здравствуйте сейчас фигме spacing mode у меня нет

[@study_kvo]

После редизайна функции спрятали. Нажмите в секции Auto layout на голубой прямоугольник дважды и включится нужный режим ☺️

[@Mi-jn6le]

Подскажите, где найти фукцию Space beetween. В моей версии Фигма этой фукции нет

[@study_kvo]

Кликните на стрелку рядом с отступом между элементами и там будет пункт Auto - теперь Space between там)

[@Mi-jn6le]

@@study_kvo Везде просмотрела. Его просто не вижу в меню. Или я что то делаю не так

[@dariakwon7233]

Привет, в меню авто лейаут нет пункта "Спейс битвин" почему-то, что-то делаю не так, хелп

[@anastasiyarumyantceva7324]

Вы нашли ответ на этот вопрос? У меня тоже нет такого пункта

[@alyonqshishina3386]

ситуация сюр. учусь в академии графического дизайна. и так вышло что у нас сейчас Figma, но учитель, конечно, интересный. спрашиваю у него. как же сделать расстояние внутренних фреймов одинаковым. он оставил голосовое на 3 минуты что это не возможно. через 2 минуты показываю что сделала это по вашему гайду и он мне говорит что слово на скрине, который я скидывала, с маленькой буквы началось))) на самом деле хочется плакать из-за этого. я за такое обучение деньги плачу...

[@study_kvo]

Уххх, жесть 🫣

[@sQuo-]

я правильно понимаю, что это для десктопной версии. то есть для мобильной надо рисовать отдельно и со своими настройками по автолейауту?! я не совсем понимаю как это работает, то есть когда чел зайдет с моб. версии будет подставляться мобильная вёрстка, ну это понятно?! грубо говоря если сайт собран на том же битриксе будет 2 версии страницы, десктоп и мобильная?! сколько роликов не смотрел по фигме, мне не попадалось объяснение по структуре. СПАСИБО!

[@study_kvo]

Все верно. Мобильную версию сайта дизайним отдельно и параметры Auto layout там меняем при необходимости

[@ИринаРоговая-н8л]

Всем здравствуйте, подскажите пожалуйста, у меня у одной сайты не грузятся

[@study_kvo]

Попробуйте сейчас, сайт немного вздремнул) design-figma.ru/md/youtube_files

[@Диана-т1б2э]

У меня нет кнопки Space between...

[@study_kvo]

Нажмите дважды на квадрате, где идёт управление положением объекта внутри AutoLayout

[@aimtimtimtim]

iconsax сейчас не работает чтоли

[@study_kvo]

Да, пока прикрыли. Можно использовать Iconify вместо него

[@aimtimtimtim]

спасибо щас чекну @@study_kvo

[@aimtimtimtim]

Блин это не тио совсем, у сакса иконки четкие @@study_kvo

[@study_kvo]

Не спорю, плагин был хорош. Можно на их сайте брать иконки: iconsax.io/

[@aimtimtimtim]

О сайт сайт есть, спасибо@@study_kvo

[@EvgSav]

Сейчас в этом режиме нельзя изменить текст((

[@study_kvo]

А в каком именно режиме?

[@profzvezdochkin8938]

Ты брат Шайтера Андрея???😊

[@nadejdamalih7680]

здорово но вы так быстро говорите

[@nailasadullin2220]

разве должно быть абсолютное позиционирование в карточке? я думаю нет