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
Храни тебя господь!
@aidynbelassarov2149
3 жыл бұрын
Лол
Ты лучший! спасибо за то что ты сделал , смотрю твои видео и не понимаю, почему так мало просмотров
@axar1off
3 жыл бұрын
Потому что не всем в мире это интересно :) Это же не видео про котиков
Спасибо за ценные уроки)! Вас приятно слушать и Вы все очень понятно объясняете) Хороший учитель и прекрасный специалист)
Вместо запятой можно просто пробелами отбивать паддинги)) Видос - огонь. Спасибо) Можно не объединять компоненты в АЛ для индивидуального отступа, а сделать везде спейсинг -- 0 и задать паддинги каждому компоненту внутри карточки))
Очень интересно посмотреть на создание таблиц и графиков с помощью Auto Layout. Видео чудесное, теперь хочу посмотреть все на канале, спасибо!
Спасибо за разбор. Только столкнулся с апдейтом тулзы и очень рад найти толковое пояснение. Вы спасли мне несколько часов х)
Дуже рада, що натрапила на цей канал) дуже класно все обяснюєш👍☺️
Спасибо, очень полезно, стала более понятна механика работы с новой системой Auto Layout, с удовольствием бы посмотрела примеры с таблицами и графиками
Спасибо большое! Я впервые изучаю auto layout и ваше видео невероятно помогло)
Спасибо за очень крутые видео инструкции по фигме. Очень интересно было бы посмотреть как делать таблицы. Это всегда боль, особенно при верстке с адаптивным фронтом.
Спасибо Вам большое) очень люблю ваши видео!
Молодець. Талановитий дизайнер і speaker! Так тримати!
Еще не посмотрел видео, а уже поставил лайк! Обязательно посмотрю.
Великая благодарность!)
Классно, отличная работа. Нужная и полезная! Просьба! Было бы отлично показывать какие горячие клавиши используете. Спасибо!
@disarto.digital
3 жыл бұрын
Снизу слева показываются все клавиши, которые я нажимаю 🙂
Спасибо! Очень интересно было бы посмотреть про использование автолейаутов в графиках
Отличное видео ! Было бы интересно увидеть адаптивную таблицу со строчными элементами текст + иконки.
спасибо за видео=) настороение после ваших видео замечательное!=)
Отлично! Это лучший урок по AL!
Как же я ждала это видео))
Спасибо за отличный обзор! Кстати, выравнивание объектов с разными отступами вроде и раньше можно было менять через Tidy Up и далее через окно
Огромное спасибо Максим!
Запишите пожалуйста ролик, если не сложно по векторным рисункам в Figma, как правильно рисовать, как правильно пользоваться карандашом и ручкой, какие есть нюансы и моменты. В одном из роликов Вы в быстрой перемотке показывали как рисуете, хотелось бы такое увидеть с объяснением Большое спасибо за ролики, все супер!)
Спасибо, понятное объяснение)
Огонь! Спасибо за урок!
Спасибо! Полезное и понятное видео.
Спасибо за видос! Очень полезно
Красавчик, очень полезно, спасибо!
Супер обновление!
Спасибо, помог разобраться
Спасибо Вам большое!
Спасибо, друг!
Красавчик! Спасибо 🙏
Спасибо, все четко
Благослови тебя бог
Супер разбор, спасибо! Было бы круто увидеть разбор с графиками и таблицами)
Спасибо!!!
Спасибо)
Лучший))
Спасибо}}
Спасибо за разяснение! Как всегда все четко и даже понятнее, чем в офф туториале самой фигмы) Однако хотелось бы послушать тебя про функционал Hug Contents. Если честно, то я не до конца понимаю, чем он принципиально отличается от Fixed Height / Weight, где его можно применить и почему он доступен только для текста?
@disarto.digital
3 жыл бұрын
Hug content доступен не только для текста) В этом режиме размер фрейма подстраивается под размер содержимого, в то время как fixed width/height задается пользователем произвольным образом.
Спасибо теперь стало более понятно. Когда курс?
@disarto.digital
3 жыл бұрын
Ориентировочно в конце января 🙂
Привет) спасибо за видос) Есть вопрос, какие ты стили используешь в свой типографике? Очень гармонично смотрятся на твоих проектах. Понимаю зависит от шрифта, но все равно интересно)
@disarto.digital
3 жыл бұрын
Типографическая система всегда зависит от проекта. Т.е. она всегда разная) В целом подход близок к тому, что описано в Google Material (material.io/design/typography/the-type-system.html#type-scale). Это тема для отдельного видео, не формат комментария)
@user-galimov
3 жыл бұрын
@@disarto.digital все понял, спасибо. Я вот использую их гайдлайны в своем проекте, смотрю допустим на приложения других крупных компаний, и кажется будто они добавляют отсебятины, которая выглядит круче чем в гайдлайнах. Если вдруг будет у тебя интерес по этой теме, то думаю каждый зритель останется неравнодушным)
Максим, откуда у тебя эта красота на 1:33 ?))))
Может быть, в один прекрасный дизайнерский день, у фигмы будут примочки, как в авокод. И мне не придется менять почту каждые 14 дней😅
@litvin23
3 жыл бұрын
О чём речь?
Ребятки, эти обновления касаются только самой программы Фигмы или к его онлайн версии тоже относится ? Спасибо;)
@disarto.digital
3 жыл бұрын
Онлайн-версия ничем не отличается от десктопного клиента. Все обновления касаются обеих версий.
+1 в подписки
Максим, привет! на 14:04 ты оборачиваешь текст в группу, а потом добавляешь автолэйаут. В этом есть какой то смысл? не проще ли сразу обернуть текст в автолэйаут? какие плюсы оборачивать сначала оборачивать текст в группу? Спасибо!
@disarto.digital
3 жыл бұрын
Я обораючиваю текст в группу, и только затем в auto layout, когда мне не нужны внутренние отступы. Если сразу обернуть в Auto Layout, Фигма создает паддинги по 10px, смещая при этом слой на 10px вниз и вправо, что часто очень неудобно.
@disarto.digital
3 жыл бұрын
Если делать через группу, то паддинги остаются 0px.
Отправьте ссылку фигма на этот макет пожалуйста. Хочу самостоятельно попрактиковатся. Фигма обновилась но такого туториала не было
@disarto.digital
3 жыл бұрын
Вот туториал от Фигмы www.figma.com/community/file/784448220678228461, а вот ссылка на файл из видео www.figma.com/file/4ksBjtTnTdNvW5pC1H2xKB/Auto-Layout-Update-Nov-2020-public?node-id=1%3A2
Подскажи пожалуйста, где можно взять такие иконки?
как так можно копировать у меня при создании копии она находится над оригиналом