Уроки Figma Auto Layout. Полное руководство по автолейаут. [Фигма уроки]

Как устроен автолейаут. Как пользоваться привязками. Как сделать резиновые табы, кнопки, списки с буллитами.
ВАЖНОЕ:
Моя фигма-страница
figma.com/@vandesign
Файл Aut Layout Fun
www.figma.com/...
НЕ МЕНЕЕ ВАЖНОЕ:
Книга «Руководство по Figma»
/ figma-guide
Фигма.хелп
figma.help
🧰 Уроки Figma на русском.
Фигма - это бесплатная онлайн программа для дизайна web и UI. Приложения для Windows, Mac OS, Android (Material design) и iOS. Программу можно скачать на сайте www.figma.com. Торрент не нужен! ))
• Как сделать в Фигме свой первый сайт.
• Как использовать сетки и направляющие в вашем проекте.
• Что такое компоненты и фреймы в Фигме.
• Самые интересные плагины (plugins) Фигмы.
• Горячие клавиши для Windows и Mac OS.
• Анимация, шрифты (Google Fonts) и иконки.
• Как создать свои UI Kit и шаблоны (templates).
• Сравнение с Sketch и Adobe XD.
Потихоньку всё сложится в курс по дизайну в Figma.
-----
👍 Поддержать канал: / zendesigner

[@ЮлияСысуева-я4ф]

Первый раз мне музыка помогает, а не мешает)) Задает ритм, так и хочется приступить к практике)) Круто!!!

[@zen-designer]

kzbin.info/www/bejne/p4uXp5ytapp9mLM

[@NOBODY754]

@@zen-designer музон огонь! Благодарим!

[@NihonKi]

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

[@user-dv2vz7ki1n]

Таких бы преподов в эти горе-школы, которые учат веб-дизайну, превращая творческие задачи в супер-нудный процесс. А тут и четко, и по делу, и дикция приятная. Спасибо.

[@GDS992]

Так приятно и ностальгично было услышать слово "раскукоживать" )

[@Pavel-Bogatyi]

Все ваши труды настолько толковы, что ютубовская нотификация обретает смысл. Грасияс, сеньор!;)

[@zen-designer]

Спасибо! Так победим )

[@mykolagolovko6473]

Огонь! Информативно, актуально, с чувством юмора. Такого, сейчас мало, одни дизайнеры-мотиваторы, блин. 1 000 000 подписчиков Тебе.

[@zen-designer]

Mykola Golovko спасибо!

[@jamalmarakesh]

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

[@zen-designer]

Спасибо ) Но лучше прожимать глядя ))

[@jamalmarakesh]

@@zen-designer как раз закончил просмотр. Что я могу сказать... Прожал, однозначно, не зря)

[@risenblood]

В который раз убеждаюсь какой же ты умный мужик!

[@zen-designer]

Просто сообразительный 😂 И это старые советы. Многое изменилось

[@risenblood]

@@zen-designer основные направления смыслов алгоритмов все ещё работают) для укрепления знаний самое то 👍

[@eugenesamusenko4525]

Самая неординарная и поэтому самая запоминающаяся подача материала! Спасибо! :)

[@zen-designer]

Рад что полезно.

[@ВалентинаПанькина-ю8п]

Потрясающее видео! Все понятно, много пользы, за 1 видео столько рассказать - это круто))) Спасибо большое)

[@katrinaplace]

Благодаря вашему видео я разобралась и даже полюбила Алик ;) Спасибо за видос!

[@gleb_sexy]

Спасибо за упоминание и за очень подробный разбор! Отличная работа!

[@zen-designer]

Мы же банда! )

[@СергейКондулуков-з9ч]

Автору большое спасибо. Всё ясно и понятно. Таких бы преподов в институт цены им бы не было.

[@ЕвгенийКостюшин-ь5п]

Огромное спасибо, Виктор! Супер объясняете! Главное - мелочи, которые никто не объясняет! Удачи Вам в работе и во всем!

[@zen-designer]

Спасибо. Не забудь свежий выпуск посмотреть. kzbin.info/www/bejne/e56lmoycjquVb80

[@ЕвгенийКостюшин-ь5п]

@@zen-designer Спасибо! Уже лайкнул)

[@hysart]

Огонь! Кайфонул при практике этих уроков нереально! Спасибо!

[@da.america]

Супер-подача! Приятно смотреть и слушать. Спасибо большое!

[@design_and_point]

Шикардос! Спасибо за супер информативность, без H2O и еще с юмором) Однозначно лайк и подписка.

[@talukov]

Спасибо большое! Так замечательно объясняете! А музыкальное сопровождение и звуковое - выше всяческих похвал!))

[@freeman-strong2789]

Спасибо, очень помог ваш ролик разобраться с Аликами 😉

[@Spirit741979]

Шикарный видос. Подача великолепна! Сам писал внутреннюю вики-статью для сотрудников по прототипам Фигмы и знаю как непросто сделать понятный текст о всех этих типах, видах, зависимостях, вложенностях и т.п. структурах. У вас, Виктор, прекрасно это вышло. Прикручу ссылку на это видео к статье.

[@zen-designer]

Сергей Спиридонов ой спасибо!

[@dilavarzavkiev5419]

Подача материала просто на высочайшем уровне, сидел и орал весь урок. Просто потрясающе, как говорится We need more!!!

[@NikolayLebedev-e4w]

лайк авансом, до просмотра )

[@zen-designer]

надеюсь оно того стоит )

[@МаксимМагадеев-л9ю]

@@zen-designer Стоит, спасибо за старания, полезный урок.

[@alionabohomol9076]

Большое спасибо за Ваши уроки!

[@АлександрЭрендженов-в2ь]

Мне понравилось и объяснение (лаконично и доступно), так и звуковой фон. Мне как представителю монгольских народов импонирует музыка с горловым пением. Да и буддийский Дзен в начале тоже наша тема)

[@МарияЗастрожина]

Спасибо! Классный туториал, подписалась❤

[@АлексейВасько-ф9л]

Виктор, спасибо большое) Мегаполезно и очень просто)

[@agibalova24]

Очень крутой урок!!! спасибо за файлик!!!

[@s3ry0ja]

лучшему граф редактору лучшего обучальщика!

[@zen-designer]

😂 лучшей проге для UI. Граф редактор это конечно не про Фигма 😌

[@Spirit741979]

@@zen-designer как сказать, шейпы просты и прекрасны, одна закраска областей чего стоит

[@zen-designer]

@@Spirit741979 Я люблю Фигму ) Но граф редактор это всё же что-то другое. Ну для меня.

[@smm3858]

Вот это подача!!! Просто вау

[@mashamykhailovskaya2037]

замечательно полезный туториал. Спасибо за ваш труд!

[@РазвлекШ]

Вот это правильная подача, супер, спасибо. Хрен найдешь такое где)

[@donbao]

Спасибо за полезную информацию!

[@alexeyzenkin1309]

Дядь Вить, может тебе еще какие-нибудь, рубрики запилить? У тебя подача лучше чем у наших дикторов, без бэээ.,мээ

[@zen-designer]

Alexey Zenkin ☺️ собираюсь по Adobe запилить что-нибудь.

[@Spirit741979]

@@zen-designer какому адоби? XD или по классике: люстра, фш, индиз?

[@zen-designer]

Сергей Спиридонов с XD не подружился, бог миловал 🙄 хочу по старшим адбам. Например по плагинам Astute для Illustrator.

[@anastasiaan4950]

Что за кайф! Спасибо, все понятно))

[@ЛидияСоколова-я4ж]

Спасибо! Крутой, полезный контент!

[@intro_true]

😄😄😄очень интересное видео получилось! Классно рассказываете🤙

[@dorispaws9938]

я как будто смотрю обзор на "беременна в 16" ))))) это очень весело, главное информация впитывается моментально! ты крутой, успехов

[@zen-designer]

😂

[@SergMexovoy]

Список с булитами огонь!

[@zen-designer]

Благодарочка

[@Passificspring]

обожаю твой формат подачи )

[@annakarika3817]

Подскажите, пожалуйста, не могу компонент line привязать к габаритам алека, как вы это делаете на 12:06. Нет такой возможности даже. В чем может быть ошибка?

[@РамзанБерсанукаев-г3ш]

спасибо Виктор.

[@ireneyung1226]

Отличный контент!

[@zen-designer]

Благодарю!

[@veronikarubilina363]

Виктор, огромное вам спасибо!

[@AibekAbdyldaevv]

Спасибо большое! Очень помогли!!!

[@НаташаЛагодзя]

Круто, спасибо!

[@shved5208]

Годно! Есть еще один пистон :) В списках размер буллета можно задать 0.0001px и тогда фигма сделает нам золотой 0

[@zen-designer]

На мой взгляд опасно такие штуки использовать на боевых проектах. Но любопытный пистон ☺️

[@NoseNose65]

Очень познавательно! Крутые пистоны! Категорически респектирую 👍🔥

[@zen-designer]

Александр Носач мотивирующая оценка ☺️ спасибо

[@vladshinkin]

Лучший видос)

[@ОльгаТравникова-с9ш]

Отличное пояснение, спасибо!

[@korn1enko794]

Пушка, бомба)))

[@александрсоколов-в3х]

благодарю большое большое)

[@zen-designer]

на здоровье! )

[@georgetimoschenko936]

лучшие видео

[@zen-designer]

Спасибо!

[@alexashikhmin1304]

Очень хорошая подача

[@veekotova7719]

спасибо!

[@alexmase]

Костыли наше всё)) Фронтендеры не обласкают за такое. А вообще немного обидно. Вроде бы завезли фичу, но не до конца. В любом случае лайк и спасибо автору! Ждём-с нативных решений.

[@thethqoqx5438]

Можно фрейму задавать размер 0 вместо 1. Я так делаю для всяких дивайдеров. Ставлю им высоту 0, и они никак не влияют на размерность АЛ, но при этом все видно как надо. Для этого в W или H нужно ввести 0.001, фигма сама округлит до нуля.

[@zen-designer]

Свирепый Насрулло спасибо! Не знал про этот хак с 0.001

[@streix5791]

Спасибо за тутор, ибо я не знал как глав диз делал Алика)).

[@karrtivruki]

Живи вечно!))

[@zen-designer]

Окей )

[@Illofillion]

Офигеть! Пошёл собирать голову обратно....

[@zen-designer]

Не бойся, если после сборки останутся лишние детали 😂

[@АндрейСабельников-л5с]

Бомба!

[@ikosovskiy]

класс

[@web--chestavik9881]

Алика раскукожил и вуаляшечки 👍

[@MrSmith42]

Super

[@talukov]

Скажите пожалуйста, почему у меня не получается операция на 16:05 мин - где "Сдвинем звезду куда надо". Если я двигаю мастер комп звезды, звезда возле текста не реагирует никак, но если вытащить мастер звезду из контейнера компонента - то сдвигается и звезда возле текста, но исчезает и никак ее не найти. А у вас почему то звездочка появляется рядом с текстом и двигается. Но ведь вы не вытаскивали звезду из мастер компонента, да и смысла нет ее вытаскивать... Как же так неуловимо у вас получилось? Clip content проверяла - все как у вас)

[@FreevalDos]

Гуру✌️

[@enenotowitch628]

Спасибо!

[@raspisal]

Красавчик ваще

[@zen-designer]

Буду так держать )

[@777mirvsem]

объясните зачем менять на vertical чтобы растянуть кнопку по ширине если можно добавить внутренние отступы слева и справа вутри кнопки? В чем разница?

[@julias1352]

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

[@zen-designer]

У каждой программы свои сильные стороны. Иначе была бы одна. )

[@user-galimov]

лайк и подписка мужик, было бы круто, если бы ты дал обзор более сложным аликам :)

[@zen-designer]

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

[@user-galimov]

@@zen-designer будем ждать

[@taro_angel_planet9885]

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

[@taro_angel_planet9885]

это получается такая же структура гиперлинка с сылкой но плюс иконка

[@zen-designer]

сложно на пальцах ) Найдите меня в телеграм -- посмотрю файл

[@Feorzminus]

Виктор, все конечно хорошо, но 1 пиксель это костыль. Я решал это по другому, делал алик "горизонтальный", и внутри него алик "вертикальный", и уже с последним шаманил нужные мне размеры.

[@zen-designer]

Хотелось бы посмотреть на решение. Интересно.

[@NOBODY754]

Музон клёвый ::)

[@amelianceskymusic]

3:26 можно бесконечно слушать

[@zen-designer]

))

[@tetiannapopovych]

Здравствуйте, может, вопрос глупый, но очень хочу спросить. На видео 12:12 Вы говорите "сделаем инстанс ссылки", но по факту вытягиваете не инстанс, а уже детач инстанс одним кликом. Подскажите, плиз, как Вы сделали такой трюк в один, а не два клика? Второй вопрос - обязательно ли детачить инстанс в этом случае? И последний, но не менее важный - я все шаги продублировала у себя и у меня такая строка из булетов тянется, если ткст ооочень длинный. Это они пофиксили, получается?

[@zen-designer]

Если я правильно понял - потянуть с альтом

[@maxzarubin2353]

Ждал этого очень давно, особенно шикарен автолейаут в компонентах, но без огромных косяков конечно же не обошлось... особенно большой костяк это невозможность задавать стороны и промежутки по отдельности... текст в кнопках всегда сидит криво и хочется изменить одну сторону на один пиксель... из-за новой системы с растягиванием по краям убрал панель constrains, и это безумно неудобно тк теперь нельзя задавать прилипание со всех 4-х сторон.

[@antischulz]

Thank's man!

[@tetiannapopovych]

❤️❤️❤️

[@zen-designer]

😍😍😍

[@АлияСадыкова-н9п]

Всем здоровья! Как зажать в фигме на windows?

[@Кристина-ш5х3ю]

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

[@zen-designer]

Я буду

[@Сказкиизлесадетскиелюбимыеауди]

Галики и Валики :DD

[@anton_youtube_1]

Виктор, спасибо за видео, очень полезно! А можно ли комбинировать компоненты с функцией Auto Layout? Допустим нужно сделать 6-ть пунктов меню в шапке. Возможно понадобится менять цвет текста. Пишу первый пунк меню, создаю из него компонент, копирую и меняю текст. На этом этапе фрейм не выравнивается автоматически под текст, и начинает "залезать" на следующий пунк меню. Как это решить?

[@zen-designer]

Делать из текста алик а потом уже компонент

[@AnnaLitvinuk]

Пытаюсь перейти со Sketch, а тут все выглядит нерадостно. Тоже костыль на костыле. Только к новым костылям для перехода привыкать нужно. Вот и вся разница... За урок большое спасибо, помогает быстро разобраться.

[@zen-designer]

Anne L сам переходил со Sketch. Мне фигмокостыли показались намного удобнее 😂

[@AnnaLitvinuk]

@@zen-designer Sketch выкатили аналог auto layout совсем недавно. И он уже умеет, например, расставлять элементы в любой позиции относительно друг друга. Может, при вас этого еще не было.

[@zen-designer]

Anne L не было. Но это не меняет ситуацию со стилями и символами / компонентами.

[@Goldfinche]

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

[@zen-designer]

если строка текста одна - выровнять автолейаут в настройках. Если несколько -заключить стрелку в дополнительный алик и сделать отступ сверху

[@MrSaintano]

Спасибо за лайфхак с буллетами! У меня другой вопрос: когда таскаешь объект поверх сложного "алика", то он норовит автоматически в нём разместиться. Это иногда удобно, но чаще - нет. Не могу найти шорткат, чтобы отменить эту "медвежью услугу"... Есть вообще такое?

[@zen-designer]

Нужно зажать пробел прежде чем тащить.

[@MrSaintano]

@@zen-designer Это гениально! Спасибо большое!

[@kooks2003]

Виктор, как сделать кнопку с аликом, которая будет компонентом, у которой подложка будет тоже компонентом? Объясню. Есть родительская кнопка с аликом и куча дочерних кнопок. Мы решаем изменить форму всех кнопок. А как сделать это одним махом? Спасибо!

[@zen-designer]

типа такого www.figma.com/file/NU3wHE1jogPgWkNJM7xK90/button?node-id=0%3A1

[@kooks2003]

​@@zen-designer Спасибо! Я по-ходу заморочился. На самом деле форма/цвет/стиль дочерних кнопок будет меняться и так )

[@zoferi.v236]

как отменить мастер компонент? команда ctrl+alt+b не работает... и вообще в контекстном меню пропала такая команда

[@zen-designer]

Мастер нельзя разобрать. Можно сделать с него инстанс, разобрать (detach) и мастер удалить.

[@АртурМелешко-м5в]

рука мастера

[@AlexanderMinaevFast]

А где пропорциональное масштабирование объектов при увеличении ширины артборда?

[@urasharaev5227]

Это все интересно, но как разработчик поймет эти костыли?

[@zen-designer]

Всегда можно оговорить тонкости. Или не использовать спорные решения.

[@alyu6351]

Инстансы компонентов теперь не выглядят как инстансы?

[@zen-designer]

Нет, если они алики

[@alyu6351]

@@zen-designer а такой вопрос: удалил старый мастер, создал новый, НО с таким же названием. Есть ли такой плагин который может перепривязать инстансы удаленного компонента к новому?

[@zen-designer]

Al Yu есть вот такой платный www.figma.com/c/plugin/767721682134156281/Master

[@zen-designer]

Al Yu а вообще есть чат в телеге. Там оперативнее могут помочь с любыми вопросами. t.me/figmachat

[@alyu6351]

@@zen-designer ага, спасибо

[@man-factory]

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

[@sergeyleonov2920]

А компоненты?

[@mouintainsinukraine8]

Нада била музон громчє врубіть))

[@orionpro79]

обычные правила из css ( гриды и флексы ) превратили в инструмент в фигме , всё же для веба это всё и делалось. Наверное дизайнерам всё это сложно, для фронта это всё обыденно.

[@zen-designer]

Честно говоря не понял в чём посыл твоего сообщения 😁 мне сложно

[@orionpro79]

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

[@zen-designer]

@@orionpro79 думаю тебе не везло с дизайнерами

[@orionpro79]

@@zen-designer по разному. Но да, дичи я насмотрелся), хорошо, что есть такие видео, как делаешь ты (и подобные) и я надеюсь, что их будут смотреть будущие хорошие дизайнеры и плохие перестанут встречаться на моём пути!))

[@zen-designer]

@@orionpro79 да будет так! ☺️

[@condemime1]

музыка и звуки... пздц конечно.

[@CL-hl7xs]

Я бы назвал Алит

[@nikel4015]

мастер не может быть внутри мастера ))) жирные вставки звуковые )))

[@argent5721]

Недостаток Figma в отсутствии русского языка.

[@tyotamouse]

Звуковые эффекты отвратительны

[@zen-designer]

Спасибо за мнение