Figma Auto Layout (обновление Ноябрь 2020)

Вчера Фигма обновила функционал Auto Layout, и это отличный повод разобрать новый функционал на примере реальных интерфейсных задач.
00:00 создание списка с помощью Auto Layout
06:26 выравнивание элементов внутри Auto Layuot
09:25 пример с аватарками, заходящими друг на друга
10:55 делаем адаптивную карточку
28:00 изучаем официальный туториал от Фигмы
35:40 адаптивная навигация
Подписывайтесь на соцсети:
/ disarto.digital
www.behance.net/Dexo
dribbble.com/Dexo

Пікірлер: 63

  • @MsStam777
    @MsStam7773 жыл бұрын

    Храни тебя господь!

  • @aidynbelassarov2149

    @aidynbelassarov2149

    3 жыл бұрын

    Лол

  • @maksym5089
    @maksym50893 жыл бұрын

    Ты лучший! спасибо за то что ты сделал , смотрю твои видео и не понимаю, почему так мало просмотров

  • @axar1off

    @axar1off

    3 жыл бұрын

    Потому что не всем в мире это интересно :) Это же не видео про котиков

  • @helga3542
    @helga35422 жыл бұрын

    Спасибо за ценные уроки)! Вас приятно слушать и Вы все очень понятно объясняете) Хороший учитель и прекрасный специалист)

  • @denygo2424
    @denygo24243 жыл бұрын

    Вместо запятой можно просто пробелами отбивать паддинги)) Видос - огонь. Спасибо) Можно не объединять компоненты в АЛ для индивидуального отступа, а сделать везде спейсинг -- 0 и задать паддинги каждому компоненту внутри карточки))

  • @sonyarummer2592
    @sonyarummer25923 жыл бұрын

    Очень интересно посмотреть на создание таблиц и графиков с помощью Auto Layout. Видео чудесное, теперь хочу посмотреть все на канале, спасибо!

  • @bigowl960
    @bigowl9603 жыл бұрын

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

  • @julia.ohorodnik
    @julia.ohorodnik3 жыл бұрын

    Дуже рада, що натрапила на цей канал) дуже класно все обяснюєш👍☺️

  • @holy_doll
    @holy_doll3 жыл бұрын

    Спасибо, очень полезно, стала более понятна механика работы с новой системой Auto Layout, с удовольствием бы посмотрела примеры с таблицами и графиками

  • @iammariewood
    @iammariewood3 жыл бұрын

    Спасибо большое! Я впервые изучаю auto layout и ваше видео невероятно помогло)

  • @koliakoshun4121
    @koliakoshun41213 жыл бұрын

    Спасибо за очень крутые видео инструкции по фигме. Очень интересно было бы посмотреть как делать таблицы. Это всегда боль, особенно при верстке с адаптивным фронтом.

  • @lianasamvelian160
    @lianasamvelian1602 жыл бұрын

    Спасибо Вам большое) очень люблю ваши видео!

  • @innakolisnyk4522
    @innakolisnyk45223 жыл бұрын

    Молодець. Талановитий дизайнер і speaker! Так тримати!

  • @aslan_akhmedov
    @aslan_akhmedov3 жыл бұрын

    Еще не посмотрел видео, а уже поставил лайк! Обязательно посмотрю.

  • @user-zh2cv3rp3r
    @user-zh2cv3rp3r3 жыл бұрын

    Великая благодарность!)

  • @navi6098
    @navi60983 жыл бұрын

    Классно, отличная работа. Нужная и полезная! Просьба! Было бы отлично показывать какие горячие клавиши используете. Спасибо!

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Снизу слева показываются все клавиши, которые я нажимаю 🙂

  • @rinaarutiunian
    @rinaarutiunian3 жыл бұрын

    Спасибо! Очень интересно было бы посмотреть про использование автолейаутов в графиках

  • @mykhailolytvynenko7883
    @mykhailolytvynenko78833 жыл бұрын

    Отличное видео ! Было бы интересно увидеть адаптивную таблицу со строчными элементами текст + иконки.

  • @arinaszczerbicka8269
    @arinaszczerbicka82693 жыл бұрын

    спасибо за видео=) настороение после ваших видео замечательное!=)

  • @rushroller
    @rushroller3 жыл бұрын

    Отлично! Это лучший урок по AL!

  • @narivari1234
    @narivari12343 жыл бұрын

    Как же я ждала это видео))

  • @julialazovskaya4189
    @julialazovskaya41893 жыл бұрын

    Спасибо за отличный обзор! Кстати, выравнивание объектов с разными отступами вроде и раньше можно было менять через Tidy Up и далее через окно

  • @arcobalena789
    @arcobalena7892 жыл бұрын

    Огромное спасибо Максим!

  • @user-ps6xz7xl8w
    @user-ps6xz7xl8w3 жыл бұрын

    Запишите пожалуйста ролик, если не сложно по векторным рисункам в Figma, как правильно рисовать, как правильно пользоваться карандашом и ручкой, какие есть нюансы и моменты. В одном из роликов Вы в быстрой перемотке показывали как рисуете, хотелось бы такое увидеть с объяснением Большое спасибо за ролики, все супер!)

  • @yanabez_
    @yanabez_3 жыл бұрын

    Спасибо, понятное объяснение)

  • @mykolagolovko6473
    @mykolagolovko64733 жыл бұрын

    Огонь! Спасибо за урок!

  • @juliasamchuk1953
    @juliasamchuk19533 жыл бұрын

    Спасибо! Полезное и понятное видео.

  • @bongo1570
    @bongo15703 жыл бұрын

    Спасибо за видос! Очень полезно

  • @yiu_ai
    @yiu_ai3 жыл бұрын

    Красавчик, очень полезно, спасибо!

  • @user-qf6rh4gv7v
    @user-qf6rh4gv7v2 жыл бұрын

    Супер обновление!

  • @user-md7ff4zz2n
    @user-md7ff4zz2n3 жыл бұрын

    Спасибо, помог разобраться

  • @alionabohomol9076
    @alionabohomol90763 жыл бұрын

    Спасибо Вам большое!

  • @openspacelive
    @openspacelive3 жыл бұрын

    Спасибо, друг!

  • @aidynbelassarov2149
    @aidynbelassarov21493 жыл бұрын

    Красавчик! Спасибо 🙏

  • @user-wv2nc1qr6d
    @user-wv2nc1qr6d3 жыл бұрын

    Спасибо, все четко

  • @krik48rus
    @krik48rus3 жыл бұрын

    Благослови тебя бог

  • @SanSan-gk4pz
    @SanSan-gk4pz3 жыл бұрын

    Супер разбор, спасибо! Было бы круто увидеть разбор с графиками и таблицами)

  • @mkstlz
    @mkstlz2 жыл бұрын

    Спасибо!!!

  • @DigitalismSchool
    @DigitalismSchool3 жыл бұрын

    Спасибо)

  • @zelenoglazaja
    @zelenoglazaja3 жыл бұрын

    Лучший))

  • @kristinaananian8581
    @kristinaananian85813 жыл бұрын

    Спасибо}}

  • @dance548
    @dance5483 жыл бұрын

    Спасибо за разяснение! Как всегда все четко и даже понятнее, чем в офф туториале самой фигмы) Однако хотелось бы послушать тебя про функционал Hug Contents. Если честно, то я не до конца понимаю, чем он принципиально отличается от Fixed Height / Weight, где его можно применить и почему он доступен только для текста?

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Hug content доступен не только для текста) В этом режиме размер фрейма подстраивается под размер содержимого, в то время как fixed width/height задается пользователем произвольным образом.

  • @Raisa_Alieva
    @Raisa_Alieva3 жыл бұрын

    Спасибо теперь стало более понятно. Когда курс?

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Ориентировочно в конце января 🙂

  • @user-galimov
    @user-galimov3 жыл бұрын

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

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Типографическая система всегда зависит от проекта. Т.е. она всегда разная) В целом подход близок к тому, что описано в Google Material (material.io/design/typography/the-type-system.html#type-scale). Это тема для отдельного видео, не формат комментария)

  • @user-galimov

    @user-galimov

    3 жыл бұрын

    @@disarto.digital все понял, спасибо. Я вот использую их гайдлайны в своем проекте, смотрю допустим на приложения других крупных компаний, и кажется будто они добавляют отсебятины, которая выглядит круче чем в гайдлайнах. Если вдруг будет у тебя интерес по этой теме, то думаю каждый зритель останется неравнодушным)

  • @chrisiseipt
    @chrisiseipt3 жыл бұрын

    Максим, откуда у тебя эта красота на 1:33 ?))))

  • @jackdoe1312
    @jackdoe13123 жыл бұрын

    Может быть, в один прекрасный дизайнерский день, у фигмы будут примочки, как в авокод. И мне не придется менять почту каждые 14 дней😅

  • @litvin23

    @litvin23

    3 жыл бұрын

    О чём речь?

  • @rimmachobanian02
    @rimmachobanian023 жыл бұрын

    Ребятки, эти обновления касаются только самой программы Фигмы или к его онлайн версии тоже относится ? Спасибо;)

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Онлайн-версия ничем не отличается от десктопного клиента. Все обновления касаются обеих версий.

  • @ihoryarchuk9127
    @ihoryarchuk91273 жыл бұрын

    +1 в подписки

  • @user-hm4xm1gk9p
    @user-hm4xm1gk9p3 жыл бұрын

    Максим, привет! на 14:04 ты оборачиваешь текст в группу, а потом добавляешь автолэйаут. В этом есть какой то смысл? не проще ли сразу обернуть текст в автолэйаут? какие плюсы оборачивать сначала оборачивать текст в группу? Спасибо!

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Я обораючиваю текст в группу, и только затем в auto layout, когда мне не нужны внутренние отступы. Если сразу обернуть в Auto Layout, Фигма создает паддинги по 10px, смещая при этом слой на 10px вниз и вправо, что часто очень неудобно.

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Если делать через группу, то паддинги остаются 0px.

  • @zhennyeah
    @zhennyeah3 жыл бұрын

    Отправьте ссылку фигма на этот макет пожалуйста. Хочу самостоятельно попрактиковатся. Фигма обновилась но такого туториала не было

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Вот туториал от Фигмы www.figma.com/community/file/784448220678228461, а вот ссылка на файл из видео www.figma.com/file/4ksBjtTnTdNvW5pC1H2xKB/Auto-Layout-Update-Nov-2020-public?node-id=1%3A2

  • @user-hv6to9tb8h
    @user-hv6to9tb8h3 жыл бұрын

    Подскажи пожалуйста, где можно взять такие иконки?

  • @visit51
    @visit513 жыл бұрын

    как так можно копировать у меня при создании копии она находится над оригиналом