Всё об Auto Layout в Figma

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 พ.ย. 2024
  • Рассказываем, как используют Auto Layout в Figma опытные дизайнеры квалификации Senior.
    Инструмент Auto Layout в Figma позволяет указывать отступы и выравнивать соседние модули автоматически.
    💪 Тренажер - www.figma.com/...
    Композиция 2.0 теория и практика: nauka-dsgn.ru/...
    UX/UI анимация: nauka-dsgn.ru/...
    Наука интерфейсов: nauka-dsgn.ru/...
    Наш Инстаграм - insatgram.com/n...
    Наш Телеграм - t.me/naukadsgn

ความคิดเห็น • 74

  • @ЭвелинаБольшенко
    @ЭвелинаБольшенко 7 หลายเดือนก่อน +3

    Очень понятный урок !!! Я столько пересмотрела уже видео на эту тему и так счастлива, что наконец-то нашла то, что искала ! Спасибо!!!

  • @GeorgePiton
    @GeorgePiton 7 วันที่ผ่านมา

    Спасибо, мужики! Отдельное спасибо за тренажер!

  • @ElenkaZP
    @ElenkaZP ปีที่แล้ว +15

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

    • @GoVeOriginal
      @GoVeOriginal 3 หลายเดือนก่อน

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

  • @axelusa
    @axelusa 6 หลายเดือนก่อน +2

    Мне кажется это самое понятное видео по Автолейаутам на русскоязычном ютубе, спасибо вам!!!

  • @AlexanderLobachev
    @AlexanderLobachev 11 หลายเดือนก่อน +3

    Очень крутой урок, даже для себя узнал много нового, хоть и знаком с автолейаутами, благодарен!

  • @Inogdaprosto
    @Inogdaprosto 9 หลายเดือนก่อน +1

    Пробел чтобы не вылетал элемент из группы! Спасибо за волшебную кнопку😄

  • @MikaStan
    @MikaStan 8 หลายเดือนก่อน

    Отлично! 1. видео свежее, а которые до него смотрел - 2022г. а за 2 года интерфейс автол немного поменялся (напр spacing mode зачем то убрали). 2. Наиболее наглядно показаны многие вещи.
    Но все равно пока сложно кажется. Да и дядька я уже очень старый, боюсь что поздно открыл для себя это дело - но все равно очень интересно!))

  • @ЕвгенийЗагорожев
    @ЕвгенийЗагорожев 7 หลายเดือนก่อน

    Cпасибо большое, все интуитивно понятно!

  • @danielamstel8183
    @danielamstel8183 11 หลายเดือนก่อน +1

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

  • @aygulkhabutdinova
    @aygulkhabutdinova 4 หลายเดือนก่อน

    Бесподобное видео, очень полезно. Спасибо огромнейшее!

  • @bubirka23
    @bubirka23 9 หลายเดือนก่อน

    я стремлюсь к такому уровню спокойствия 🙏

  • @diman_daron
    @diman_daron 10 หลายเดือนก่อน

    Видос зачетный. Все советы крайне полезны, осталось применять на постоянке

  • @Johnsson25
    @Johnsson25 5 หลายเดือนก่อน

    Спасибо, не знал, что можно задать мин/макс ширину объекту при алике. Оч полезно, круто и приятно!

  • @ursusproject
    @ursusproject 8 หลายเดือนก่อน

    Было бы круто еще видос с тренажером сделать, ибо после 13 поплыл)
    За видео отдельный преспект😎

  • @NataliJarm
    @NataliJarm 11 หลายเดือนก่อน

    очень полезное видео. буду на тренажере тренироваться)Спасибо)

  • @ВАСИЛИЙТЕГЗА-н6ю
    @ВАСИЛИЙТЕГЗА-н6ю 11 หลายเดือนก่อน

    Отличный урок. Благодарю!

  • @nikita_shishkanov
    @nikita_shishkanov 4 หลายเดือนก่อน

    Спасибо! Балдёжная инструкция

  • @onickaselassieva6640
    @onickaselassieva6640 11 หลายเดือนก่อน

    Упражнения топ, СПАСИБОЧКИ ОГРОМНЕЙШЕЕ!!! хочется еще)

  • @JuliaRobots
    @JuliaRobots 6 หลายเดือนก่อน

    Спасибо за тренажер!

  • @ВладГурнак-о8щ
    @ВладГурнак-о8щ ปีที่แล้ว

    Мені сподобався прийом з красною точкою в кнопці я ще не знав про це але стикався з цим і думав як це вирішити дякую за відео було корисно ))

  • @KristjanArnason-f5v
    @KristjanArnason-f5v 3 หลายเดือนก่อน +58

    А как автолейаут помогает в разработке адаптивных дизайнов? я сам недавно выбирал курсы по IT, чтобы улучшить свои навыки в дизайне, рассматривал разные компании, но остановился на Skypro. Благодаря наставнику смог найти первого заказчика и теперь работаю в этой области))

    • @ВикторКрутиков-с2ж
      @ВикторКрутиков-с2ж 3 หลายเดือนก่อน +10

      Такая реклама беспалевная). Точь в точь такой же коммент под другим видео по дизайну видел.

  • @white_apricot
    @white_apricot 2 หลายเดือนก่อน +1

    Не могу найти Absolute position. После обновления многие функции переместили, по старым урокам сложнее изучать информацию((

  • @elyas3115
    @elyas3115 11 หลายเดือนก่อน

    Благодарю!

  • @HellenPavlova
    @HellenPavlova 8 หลายเดือนก่อน

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

  • @annayana1786
    @annayana1786 17 วันที่ผ่านมา

    подскажите пожалуйста! а как открыть панель, где находяться настройки внешних отступов? у меня только автолейаут есть панель, а панель фрейм закрыта :(

  • @vergaravergara8848
    @vergaravergara8848 9 หลายเดือนก่อน

    Спасибо за тренажер, вижу свои недочеты не могу выполнить 3 задания

  • @menoirdieu
    @menoirdieu ปีที่แล้ว

    Спасибо, гениально!

  • @sergeyezhov2469
    @sergeyezhov2469 ปีที่แล้ว +17

    Ну так и как же все-таки SENIOR дизайнеры используют autolayout?

    • @karmplc
      @karmplc 11 หลายเดือนก่อน +6

      судя по видео они их просто используют😂

    • @Johnsson25
      @Johnsson25 5 หลายเดือนก่อน +6

      @@karmplc Напротив, они их не используют. Они используют джунов и мидлов, которые используют автолейауты :)

    • @electron_kg
      @electron_kg 5 หลายเดือนก่อน

      Показали же ..

  • @Krylowandrey
    @Krylowandrey 2 หลายเดือนก่อน

    Авто лайаут прописывается в коде фигмы? Ну т.е. я как дизайнер настроил автолайаут в фигме, а потом как верстальщик просто скопировал сгенерированный фигмой код и вставил в css файл? Или код ручками писать придется, а в фигме я только визуально могу смотреть что и как перемещается в результате трансформации окна?

  • @Kylikovpavel
    @Kylikovpavel ปีที่แล้ว

    Благодарю. Полезно

  • @keto9423
    @keto9423 ปีที่แล้ว

    Спасибо!

  • @v.vadym_k0
    @v.vadym_k0 11 หลายเดือนก่อน

    Очень информативное видео увидел подсказки в фреймах где можно найти файл с этими подсказками?

    • @naukadsgn
      @naukadsgn  11 หลายเดือนก่อน

      Ты про тренажер?

  • @bulochka8327
    @bulochka8327 11 หลายเดือนก่อน

    самый полезный урок по автолэйаутам)

  • @wandertripelectro
    @wandertripelectro 8 หลายเดือนก่อน

    Всё полезно!

  • @VyacheslavOleynik
    @VyacheslavOleynik ปีที่แล้ว +1

    🔥🔥🔥

  • @СамандарШамуратов-ь5я
    @СамандарШамуратов-ь5я ปีที่แล้ว

    быстро и качественно

  • @user-bjigfxz
    @user-bjigfxz 7 หลายเดือนก่อน

    топ! спасибо)

  • @bruhles
    @bruhles ปีที่แล้ว

    А чем вы снимаете видео, т.е. как сделали такую большую мышь

  • @hello_neptune
    @hello_neptune 11 หลายเดือนก่อน +6

    Я автолаяут возненавидела всей душой и поняла почему.
    После просмотра видео, мне стало понятно, что некоторые криворукие дизы пихают каждый элемент в отдельный лаяут, а потом это собирают в один общий. Ну как бы группа в группе получается и так по несколько веток. И я готова сжечь на костре тех, кто так делает, потому, что после них это править у меня не хватает никаких нервов, ничего невозможно нормально подвинуть или добавить, все куда-то расползается.
    В видео все элементы в одном лаяуте, все просто и понятно как там можно двигать элементы.

  • @НатальяБаранецкая-у6ж
    @НатальяБаранецкая-у6ж 10 หลายเดือนก่อน

    а как этот тренажер включить? открывается страница с тренажером и дальше что делать? там ничего кликабельного нет

    • @НатальяБаранецкая-у6ж
      @НатальяБаранецкая-у6ж 10 หลายเดือนก่อน

      все, вопрос решен, было заблокировано всплывающее окно, теперь все открылось, будем тренироваться)))

  • @infanta518
    @infanta518 ปีที่แล้ว +1

    А мидлы так не используют autolayout?) Кажется, что даже джуны так работают при правильном контроле.

  • @paulinafilimon6406
    @paulinafilimon6406 6 หลายเดือนก่อน

    Вопрос: при создании автолейаута и последующей работы возникают дробные значение (на видосе это тоже видно). Насколько я знаю, это не есть хорошо. Но сколько я не пыталась привести всё к целым значениям, то тут то там они все равно вылезают. Что с этим делать?

    • @alexlisouski4069
      @alexlisouski4069 5 หลายเดือนก่อน

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

    • @paulinafilimon6406
      @paulinafilimon6406 5 หลายเดือนก่อน

      @@alexlisouski4069 спасибо за ответ, буду пробовать

    • @Anna_-pg5ts
      @Anna_-pg5ts 5 หลายเดือนก่อน +1

      Плагин пиксель перфект и все значения без дробей, просто нужно выбрать то что нужно и запустить. Вконце по всему макету все-равно прохожусь ибо вылезает(

  • @Fanil8
    @Fanil8 11 หลายเดือนก่อน

    А это точно все про АЛ?

  • @polinasinsjkee4537
    @polinasinsjkee4537 ปีที่แล้ว

    ❤❤❤❤

  • @КсенияКуропаткина-ф3с
    @КсенияКуропаткина-ф3с 5 หลายเดือนก่อน

    Нам преподаватель на курсах наоборот рекомендовала пользоваться автолэйаутом только тогда, когда это действительно необходимо, а не создавать бесконечные автолэйауты в аытолэйауте, якобы потом сложно будет разобраться в них и вносить правки 🤷

    • @leisangalimova8168
      @leisangalimova8168 5 หลายเดือนก่อน

      а когда это действительно необходимо ?)

  • @JamesBond-jf4ni
    @JamesBond-jf4ni 8 หลายเดือนก่อน

    Был бы крутой ролик если бы был бы детальным а не с вырезанными кусками, особенно про адаптивные блоки ккак они создавались с какими настройками а то бац смотрите а у нас уже блок собран

  • @Kzncv13
    @Kzncv13 ปีที่แล้ว

    лучше гайда уже не будет спасибо !

  • @Евгений-г9щ7у
    @Евгений-г9щ7у ปีที่แล้ว +2

    Автолейаут в фигме - это процентов 10 от возможностей в веб-верстке. Алик хорошо подходит для создание компонетов\организмов, но именно что для ЛЭЙАУТА страницы он сильно ограничен и не всегда может покрыть все потребности. Как минимум нужна привязка аликов к колоночной сетке, а не той декоративной, что есть сейчас или еще лучшее css grids, еще марджины нужны, паддинги для текстовых стилей и куча чего еще. Вот тогда можно будет говорить, что ВСЁ нужно собирать на аликах, а не работать с задачей в ограниченых рамках инструмента.

    • @waysearcher
      @waysearcher ปีที่แล้ว

      Ну 10 ты перегнул наверное... Может треть или половина, если говорить о флексах

    • @SpeedyGod
      @SpeedyGod ปีที่แล้ว

      что за херь ты несешь? Автолейаут в фигме = flexbox в html. Именно так и никак иначе. Именно конкретно этот элемент со всеми его свойствами. Все возможности html тут вообще ни при чем.

  • @Sersimik
    @Sersimik ปีที่แล้ว +1

    Про 80% ты конечно загнул.
    Если конечно такие шаблоны как у тебя в примере делать, то да.
    Если что-то делать не стандартно-сложное то получится дай бог 10% заюзать

  • @dmitryom
    @dmitryom ปีที่แล้ว +1

    Всё по полкам разобрал

    • @naukadsgn
      @naukadsgn  ปีที่แล้ว

      Спасибо! Все понятно?

    • @naukadsgn
      @naukadsgn  ปีที่แล้ว

      @@matters2518 18-19 принцип снаружи внутрь. Тебе нужно изменить размер автолейаута. 20 наоборот изнутри наружу

  • @Skorpion-13
    @Skorpion-13 ปีที่แล้ว +1

    Какая же кликбейтная обложка…

  • @Lana-gj3it
    @Lana-gj3it ปีที่แล้ว

    Огромное спасибо)

  • @Волшебныймиртворчества-с6ц
    @Волшебныймиртворчества-с6ц 8 หลายเดือนก่อน

    Автолалаут это ты?

  • @tarhun10
    @tarhun10 16 วันที่ผ่านมา

    Что такое ayto layout, как он включается, выключается... ничего не поняла. . Аффтар, не снимайте больше.

  • @Gogsan
    @Gogsan 6 หลายเดือนก่อน

    дерьмово объяснил

  • @SpeedyGod
    @SpeedyGod ปีที่แล้ว

    Автолейаут в фигме это, конкретно, flexbox в html. Т.е., достаточно узкая область html.

    • @artemromanenko6069
      @artemromanenko6069 3 หลายเดือนก่อน

      Это конкретно блочная модель браузера, которую дебильные преподы по веб-дизайну, вам упорно не объясняют, хотя это и есть разница между, на пример dtp и web. Флексы - это CSS и не "достаточно узкая", а конкретно основная, на сегодня, техника позиционирования элементов в вёрстке.