Автолейауты, компоненты и варианты в фигме 2023-2024| Как работать в фигме быстро

Автолейауты в фигме сложная тема, но посвяти этой теме 27 минут и ты всё поймешь. Задаешься вопросом как научиться правильно строить компоненты? Плёвое дело, всего 27 минут
Как разобраться в автолейаутах и сократить время разработки в несколько раз? Для чего нужны варианты и как их создать? Можно ли делать дизайн без компонентов? Разбираемся в этом видео.
Найди меня здесь
Портфолио behance.com/makeevafl

[@nayutaikani]

наконец-то поняла все! никто другой не смог так понятно объяснить как вы. Бесконечная благодарность ❤

[@tauerwaz9352]

Лучший обзор, до вашего обзора для меня автолаяут был адом, я просто лучше бы сделал амиллион групп , исправила бы отступы сама по 10 тыся раз чем бралаьс за автоляут) но после вашего обзора я поняла в чем прелесть спасибо большое! Легко понятно!

[@marytv2579]

подписываюсь под словами)), Катя, спасибо Вам! Отлично объясняете, доходчиво! Удачи Вам

[@user-kn2se2xg9o]

Полностью согласна)))))

[@angelamilavskaya4402]

Много видео посмотрела на эти "страшные" темы и это первое в котором я все поняла, все три темы, спасибо за простые пояснения без лишних выпендрежных слов.

[@user-ic9gr1wj5k]

Спасибо большое! Это самое подробное, нормальное и четкое видеообъяснение, которое я искала! Благодаря Вам у меня не осталось вопросов!❤️❤️❤️❤️

[@user-rt1dt8qz4l]

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

[@yanavolkova2027]

С Comic Sans действительно очень креативно вышло :D

[@julia_zlykh]

Это самое охереннное видео по автолейаутам и компонентам!!!! Катя, ты супер🥹❤️

[@azuna96]

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

[@user-on5dr2xb7u]

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

[@user-lg1wp1pk2z]

Самый понятный разбор autolayout!

[@vvtory6915]

Спасибо большое за такой полезный урок!!Все ясно и понятно без какой-то воды и сложности Рада, что попала на ваше видео

[@flagrantiart]

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

[@ivanvodonaev3957]

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

[@misspo2013]

очень классное полезное видео) спасибо, Катя!

[@user-xx2rr5xn2t]

Всё просто и понятно, я рада что нашла тебя, огромное спасибо!

[@marysabell4573]

Первое видео по Фигме, которое я поняла 😄 Спасибо огромное

[@chloeautumn9320]

Огромное человеческое спасибо, очень доступно🙏🏻

[@sapperus]

Спасибо, классно объяснили на практике и без воды, ещё и бонус в виде component set ❤

[@natakarachevtseva9800]

Огромное спасибо Вам, Катя. Очень понятно и ярко

[@dashayu2973]

Я наконец-то разобралась во всем этом, спасибо!!! Очень крутой урок 🥰

[@ekaterinagarmash5163]

Очень благодарна вам этот обзор!!))) вы изменили мою жизнь к лучшему))

[@user-yr4yu8fr9c]

Спасибо огроменное! Вы первая кто понятно объяснил🥰🥰🥰

[@user-pd9ln6bo7m]

Спасибо! Максимально понятно и исчерпывающе. 😍

[@shtormmen7171]

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

[@valeriaptiich3898]

Спасибо за краткообзор! круто и просто :) Но было бы еще полезно рассказать о том, как ломать компонент / как изменить например иконку в дочернем компоненте, или закругления, или отстуцп другой, ибо родитель не дает этого сделать Это была моя вечная головная боль!)

[@Son_Of_Gamaz]

Спасибо. Всё чётко, ясно, и без воды. А то смотрю часовые ролики на те же темы, но ничего не понятно. Подписка.

[@minisomimi7486]

Спасибо большое вам)) все хорошо чётко объяснили, лучший обзор

[@serpenty3942]

Блиииииин а все было просто оказывается... благодарю вас, Екатерина!

[@gwenstacy5841]

Ооо богиии, ты идеально объясняешь 💐💐💐

[@katerynakozlenko]

Боже, спасибо вам большое!!! Как же все понятно!

[@olegrepin9944]

Балин! Кайф. Все вроде бы капитанкое, все знаю. Но на последних минутах Катя, спасибо тебе, ты рассказала про абсолютное позиционирование в автолейаутах! Это просто огнище! Слежу за релизами фигмы, но эту фичу как-то пропустил. Раньше по старинке загонял все в обычный фрейм внутри автолэйаута и указывал ему ширину 0,001 (известный баг/фича в фигме с помощью которого можно было решать кейсы абсолютного позиционирования элементов). Теперь все намного проще!

[@user-hh9rw2dw7r]

Катя, спасибо Вам огромное. Я далеко не один десяток видое пересмотрела, но ВЫ САМАЯ КРУТАЯ!!!

[@makeevafl]

Всегда пожалуйста 🧡

[@dekiri8058]

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

[@user-nh7kt5yy2r]

Катя, спасибо большое, легко, быстро и понятно

[@User_nix5242wqr]

Очень Очень нравится ваша подача информации 👍👍👍💐 Я новичок и мне всё это важно и интересно! Лайк и подписка однозначно 🔥

[@Kirr_kringe]

вы богиня объяснений! спасибо за помощь

[@justkerry31]

Офигенное видео, спасибо! 🔥

[@Korolevich_Elisey]

Спасибище!!! очень во время я Вас нашел!! ❤

[@user-up8xs7ji8q]

Все подробно!!! Спасибо тебе большое за это видео!!

[@user-gd2hv8dd7f]

Спасибо, мне очень понравилось как ты объяснила 🤌

[@chriscogan6131]

Это гениально! Все очень понятно и полезно

[@tanyabratsy654]

Очень доступно и понятно! Спасибо Вам!

[@user-gv6or9ci5r]

Супер объяснения, спасибо вам 🤗 Вот правда девочки умеют рассказывать🤗

[@babtistbarry2739]

Ну наконец-то я понял суть,спасибо тебе добрый человек!

[@diman_daron]

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

[@katerynakozlenko]

Не помню когда проводила пол часа времени настолько полезно!!!!)))

[@Margo_Margooo]

Класс! Лучшее видео на эту тему! Спасибо! Понять эти принципы и легко можно верстать на Webflow) ну почти)))

[@WebWhiteJoomla]

Вау, спасибо большое! Очень полезный ролик

[@cozywrld996]

спасибо, отличное видео!

[@asmr7051]

Спасибо! Отличный урок!

[@Yurii_Abrokov]

Yes. Как круто, что я тебя нашел.💝💝💝 Love

[@user-dt4gr4eo3s]

Спасибо за ваше видео, вы меня вдохновляете. Рассказывайте весело и непринужденно, поэтому не создается чувства, что это будет очень сложно проделать. Вас очень приятно смотреть!

[@makeevafl]

Вам спасибо за такой чудесный комментарий! 💖

[@user-wb2ke9xn4k]

Правда крутой обзор,ты классная)

[@TanyaLevich]

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

[@sairukai180389]

Катя, как препод говорю, ты действительно УМЕЕШЬ доносить информацию, и преподавать, да ещё и в такой лёгкой форме и с юмором, супер! Спасибо тебе большое, теперь я, наконец, понял все. Даже после курсов не все уловил, а тут бам❤

[@makeevafl]

Всегда пожалуйста 💞💅

[@olgakhabarina3655]

Спасибо!

[@Kat_Video]

Очень интересно! Спасибо!

[@natashashesterkina8913]

это лучшее видео в ютубе

[@electrocat9493]

Один авто лэйаут вкладываем в другой. Я так долго искал ответ и нашел у Вас. Спасибо ))

[@AidosIzgali]

Спасибо большое! Прохожу курс UX/Uİ дизайна, но ваше объяснение лучше❤

[@makeevafl]

А у кого проходите если не секрет?

[@user-pk9ku1xq1x]

Я не делаю сайты) я график, но осваиваю фигму для работы с веб баннерами и, вообще, клевая программа! Классные гифки рисую и легче и быстрее чем в фотошопе и эффекте и многие вещи в этой проге напоминают мне индизайн) вы крутейше рассказываете) прям, для тупиков

[@user-io2tw8zl2u]

какой крутой урок! 😍хотелось бы еще понять как правильно настроить автолэйаут чтобы он адаптировался под разные экраны

[@WareXProvider]

Да, принципы Windows Forms и прочих древних интерфейсов до сих пор хорошо работают :)

[@ironmaiden7691]

дякую величезне ! Дуже доступно розповіли

[@nectaralin]

Вы такая класснаааая

[@akulik000]

о боже спасибо! наконец-то я поняла что это такое и как оно работает

[@user-qc7ny4xs4g]

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

[@trafikuyu]

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

[@makeevafl]

Жаль что всего лишь иногда. Тогда стоит посмотреть видео про таро для дизайнеров 😂

[@Alekseev_Oleg]

Блин, классно я как раз задаюсь вопросом auto layout и приходит твоё видео(а я искал и ничего полезного не нашёл)! Совпадение? Не думаю!🎉 😅Огонь! 💥

[@xsdarknes]

Спасибо кратко и ясно

[@daynight3168]

Спасибо, Катя

[@janepi1275]

comic sans 😂😂😂😂 очень хорошо объясняете, спасибо вам❤

[@user-uh4ws7eo2y]

А где ссылка на фигму, которую в конце видео обещали?) хотелось бы потыкать все это в фигме

[@lesya_14097]

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

[@hanna_mir1129]

Катяяяя лучшая!!!!

[@annayana1786]

thank you so so muchh

[@designerlisavtsovv]

Глаза красивые))

[@user-ji8mn9ji8n]

А подскажите пожалуйста, как сделать так, чтобы если описание товара в одной карточке 1 строка, а в другой три строки - то в итоге чтобы все не прыгало и карточка оставалась одного размера? Или название где-то короткое, а где-то на 2 строки. Заранее спасибо )😍

[@metamorphose9393]

Получился макет, спасибо

[@sapperus]

13:37 когда клиент попросил "поиграться со шрифтами".

[@newme.8944]

По центру, лева, справа ...стрелочки 1. Вертикально 2. Горизинтально

[@user-dl7yh5us1t]

Катя, спасибо за видео! А выложишь файлик потыкать? :)

[@user-of8ti7lr3p]

Спасибо! А где можно посмотреть этот файл в Фигме? В описании не вижу(

[@diluiz9147]

Спасибо, очень круто! Лайк Подписка КОЛОКОЛ

[@OdessaGuyOfficial]

прикольно

[@kseniyapetrova6187]

Здравствуйте, а что такое ю ай кид?

[@vegankotletka6468]

2:00 - это буквально я, когда поняла лояуты

[@LAST_VACATION_WAS_THE_SAME]

Видео очень крутое, но есть один вопрос: почему ты упорно игнорируешь «Й» в слове «автолейаут»? 😅

[@dproduction7981]

Некоторые люди говорят: ютуб шотс вместо шоРтс 🙃

[@victoriaafonina5316]

@@dproduction7981 кому-то ближе британский вариант английского, а кому-то - американский. установленной нормы произношения этого слова в русском языке нет.

[@andreykovshov166]

@@victoriaafonina5316 причем тут вариант произношения, когда по правилам произносится «отолэйат», ну или в упрощенном русском «автолэйаут»)

[@andreykovshov166]

@@dproduction7981 и это правильно, r не произносится, либо произносится очень мягко, почти неслышно )

[@victoriaafonina5316]

​@@andreykovshov166 Называемые вами "правила" существуют только для британского английского? Что такое "упрощенный русский"? Укажите, пожалуйста, литературу, которую вы использовали при раздаче советов о произношении. P.S. Ваш комментарий на мой ответ нарушает законы логики, ибо я высказалась совсем не про "auto layout".

[@anastasiya5388]

Шикарное видео, огромное спасибо! Есть вопрос: делаем интерфейсы для мобильной игры в Figma, частенько использую автолэйауты и варианты, однако разработчики зачастую ругаются - мол, не удобно, когда для того чтобы посмотреть позиционирование элемента нужно "спускаться" в другие уровни. Не знаю, что им ответить на это. Кто сталкивался с подобным?

[@makeevafl]

У каждого разраба свои загоны. У меня верстальщики наоборот просят только в них работать

[@Midi25]

6:15 "Модуль 5 значит у нас тут будет 15" поясните что за модуль, почему 5, почему кратно 15?

[@romasadovnik3456]

Ну комон! Space between крайне популярный параметр... В остальном - отлично разобран материал!

[@makeevafl]

Год назад не выкупила прикол со спейс битвин. Теперь без него вообще никуда

[@ekaterinabrenner847]

Друзья, подскажите, пожалуйста, почему при создании layout (например, если я объединяю заголовок + текст, или заголовок + текст + кнопка) отключаются опции выравнивания, которые наверху?? Тыкаю-тыкаю, они иногда активны, но чаще горят серым! Что мне нужно сделать иначе?

[@makeevafl]

Такой способ выравнивания будет не доступен при автолейауте. Надо смотреть чуть ниже, там будет привязка (ищи большой квадрат)

[@ivanvodonaev3957]

Катя еще раз спасибо. Скажи пожалуйста: а зачем ты в конце работы с автоэлаутом сделала для него обложку? Я просто поменял цвет, он непрозрачный и все норм. В чем приемущество, я не понял... Если не сильно затруднит, буду благодарен твоему ответу.

[@makeevafl]

Если подскажешь тайминг, то подскажу

[@ivanvodonaev3957]

@@makeevafl 10:02

[@makeevafl]

Посмотрела. Никакой разницы нет. Можно делать заливку и прям там настроить отступ. Можно делать сразу в фрейме, если так проще ориентироваться. Но в целом, ваш вариант тоже правильный)

[@ivanvodonaev3957]

@@makeevafl Большое спасибо)

[@tom1tomskij]

спасибо за видео! Никак не могу найти ответ на свой вопрос, говорят, это в автолейауте где-то, может, вы подскажете? Как сделать текст большого объёма столбцами внутри одного контейнера?

[@makeevafl]

Никак не сделать

[@makeevafl]

Только два отдельных контейнера

[@tom1tomskij]

спасибо.

[@anastasiyausovik4156]

Добрый вечер) Не могу найти ссылки на файл, не могли бы поделиться если он еще остался?)

[@Didelab]

Спасибо девушка красивая)

[@lesya_14097]

можно подробнее что такое ю ай кит?

[@JustDoiT-py7hp]

Кайф новичка выглядит как обзор Кати Макеевой!!)Спасибо!

[@ansloypok1153]

лучшая

[@dmytr9742]

Что произошло после того, как вы создали компонент? Затем продублировали компонент, а как все те карточки потом оказались в помпонентах под названием автолеяут?