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

Поділитися
Вставка
  • Опубліковано 5 січ 2025

КОМЕНТАРІ • 110

  • @study_kvo
    @study_kvo  Рік тому +2

    - Исходники для практики: 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
    @nda2781 Рік тому +6

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

    • @study_kvo
      @study_kvo  Рік тому

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

  • @AbdullaXayitov-n5s
    @AbdullaXayitov-n5s Місяць тому +2

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

    • @study_kvo
      @study_kvo  Місяць тому

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

  • @ralunaD
    @ralunaD Місяць тому +1

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

    • @study_kvo
      @study_kvo  Місяць тому

      🫶🫶 спасибо

  • @konov.kol07
    @konov.kol07 Рік тому +6

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

  • @KetrinLazareva-t2w
    @KetrinLazareva-t2w Місяць тому +1

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

    • @study_kvo
      @study_kvo  Місяць тому

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

  • @Тётя-б8р
    @Тётя-б8р 6 місяців тому +3

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

    • @study_kvo
      @study_kvo  6 місяців тому

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

  • @ultrapolyarnoevtorzhenie
    @ultrapolyarnoevtorzhenie Рік тому +2

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

  • @ЛенаИсаева-щ4ъ
    @ЛенаИсаева-щ4ъ Рік тому +3

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

  • @ffgirl7550
    @ffgirl7550 Рік тому +3

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

    • @study_kvo
      @study_kvo  Рік тому +1

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

  • @leralymar
    @leralymar Рік тому +3

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

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

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

  • @elenachudakova9578
    @elenachudakova9578 Рік тому +3

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

  • @KKS_44
    @KKS_44 Рік тому +2

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

    • @study_kvo
      @study_kvo  Рік тому

      ❤️❤️

    • @vasya8441
      @vasya8441 Рік тому

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

  • @vasya8441
    @vasya8441 Рік тому +2

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

  • @smolstory67
    @smolstory67 Рік тому +1

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

    • @study_kvo
      @study_kvo  Рік тому

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

  • @pinkpanther2349
    @pinkpanther2349 7 місяців тому +1

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

  • @olgakotova8943
    @olgakotova8943 Рік тому +2

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

  • @Татьяна-ю1р2м
    @Татьяна-ю1р2м Рік тому +2

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

  • @KarVetka777
    @KarVetka777 5 місяців тому

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

  • @germantrumpet
    @germantrumpet 7 місяців тому +1

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

  • @umar_jan_9
    @umar_jan_9 Рік тому +2

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

  • @ayattelzhanov9888
    @ayattelzhanov9888 5 місяців тому +1

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

    • @study_kvo
      @study_kvo  5 місяців тому +1

      🤝🤝 кайф

  • @annako4749
    @annako4749 Рік тому +2

    По красоте ❤

  • @yuri.moiseyev
    @yuri.moiseyev 5 місяців тому

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

  • @bad_tranquility
    @bad_tranquility 8 місяців тому

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

  • @AnastasiiaYurlova
    @AnastasiiaYurlova Рік тому +1

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

  • @Kylikovpavel
    @Kylikovpavel 10 місяців тому

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

  • @just_animal
    @just_animal Рік тому +4

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

    • @study_kvo
      @study_kvo  Рік тому +3

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

    • @СветланаСветикова-е2м
      @СветланаСветикова-е2м 9 місяців тому

      @@study_kvo спасибо!

  • @СалаватКазин
    @СалаватКазин 5 місяців тому +1

    СПАСИБО

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

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

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

    Спасибо ❤

  • @experiment643
    @experiment643 Рік тому +1

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

  • @СветланаСветикова-е2м
    @СветланаСветикова-е2м 9 місяців тому +1

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

  • @alexeybychkov_
    @alexeybychkov_ Рік тому +4

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

    • @study_kvo
      @study_kvo  Рік тому

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

  • @imperiastudio454
    @imperiastudio454 Рік тому +1

    очень круто

  • @AchtungBaby_87
    @AchtungBaby_87 Рік тому +2

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

    • @study_kvo
      @study_kvo  Рік тому +3

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

  • @slayzz7967
    @slayzz7967 8 місяців тому

    спасибо дядя

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

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

  • @Мамулечка-ф7ц
    @Мамулечка-ф7ц 6 днів тому

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

  • @ilyaschokin6645
    @ilyaschokin6645 Рік тому

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

  • @pikaboo855
    @pikaboo855 10 місяців тому +1

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

    • @study_kvo
      @study_kvo  10 місяців тому +1

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

    • @pikaboo855
      @pikaboo855 10 місяців тому

      @@study_kvo 🥰🥰🥰

  • @maximdzh
    @maximdzh Рік тому

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

  • @-ip9vp
    @-ip9vp 8 місяців тому

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

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

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

    • @ultrapolyarnoevtorzhenie
      @ultrapolyarnoevtorzhenie Рік тому

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

    • @Kat_Video
      @Kat_Video 9 місяців тому

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

  • @mang0type
    @mang0type Рік тому

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

  • @pirozhoque
    @pirozhoque Рік тому +2

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

    • @study_kvo
      @study_kvo  Рік тому

      Уже на канале, в двух частях:
      - ua-cam.com/video/R2PEllFHqqM/v-deo.html
      - ua-cam.com/video/vXe3LvlIdQQ/v-deo.html

  • @georgkirukhin7121
    @georgkirukhin7121 4 місяці тому +1

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

    • @study_kvo
      @study_kvo  4 місяці тому

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

  • @Mi-jn6le
    @Mi-jn6le Місяць тому

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

    • @study_kvo
      @study_kvo  Місяць тому

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

    • @Mi-jn6le
      @Mi-jn6le Місяць тому

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

  • @coppercrypter
    @coppercrypter Рік тому +1

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

  • @antonimantondrobot9459
    @antonimantondrobot9459 8 місяців тому

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

    • @study_kvo
      @study_kvo  7 місяців тому

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

    • @study_kvo
      @study_kvo  7 місяців тому

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

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

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

  • @матеша-м2ч
    @матеша-м2ч Рік тому

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

    • @study_kvo
      @study_kvo  Рік тому

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

  • @NazarKoshla
    @NazarKoshla Рік тому

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

    • @study_kvo
      @study_kvo  Рік тому

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

  • @dariakwon7233
    @dariakwon7233 7 місяців тому

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

    • @anastasiyarumyantceva7324
      @anastasiyarumyantceva7324 5 місяців тому

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

  • @ИринаРоговая-н8л
    @ИринаРоговая-н8л 11 місяців тому

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

    • @study_kvo
      @study_kvo  11 місяців тому

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

  • @sQuo-
    @sQuo- 15 днів тому

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

    • @study_kvo
      @study_kvo  14 днів тому +1

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

  • @Диана-т1б2э
    @Диана-т1б2э Рік тому

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

    • @study_kvo
      @study_kvo  Рік тому

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

  • @EvgSav
    @EvgSav 10 місяців тому

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

    • @study_kvo
      @study_kvo  10 місяців тому

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

  • @alyonqshishina3386
    @alyonqshishina3386 Рік тому

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

  • @aimtimtimtim
    @aimtimtimtim Рік тому

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

    • @study_kvo
      @study_kvo  Рік тому

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

    • @aimtimtimtim
      @aimtimtimtim Рік тому

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

    • @aimtimtimtim
      @aimtimtimtim Рік тому

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

    • @study_kvo
      @study_kvo  Рік тому

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

    • @aimtimtimtim
      @aimtimtimtim Рік тому +1

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

  • @profzvezdochkin8938
    @profzvezdochkin8938 6 місяців тому

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

  • @nadejdamalih7680
    @nadejdamalih7680 2 місяці тому

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