Уроки Figma Auto Layout. Полное руководство по автолейаут. [Фигма уроки]
HTML-код
- Опубликовано: 15 фев 2020
- Как устроен автолейаут. Как пользоваться привязками. Как сделать резиновые табы, кнопки, списки с буллитами.
ВАЖНОЕ:
Моя фигма-страница
figma.com/@vandesign
Файл Aut Layout Fun
www.figma.com/c/file/80756843...
НЕ МЕНЕЕ ВАЖНОЕ:
Книга «Руководство по 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
![Уроки Figma. Как подготовить файл для печати в CMYK 300 dpi [Фигма уроки]](http://i.ytimg.com/vi/70fD3LUIoSA/mqdefault.jpg)
![Уроки Figma. Как подготовить файл для печати в CMYK 300 dpi [Фигма уроки]](/img/tr.png)
![Уроки Figma Auto Layout: Telegram Messenger [Фигма уроки]](/img/1.gif)
Таких бы преподов в эти горе-школы, которые учат веб-дизайну, превращая творческие задачи в супер-нудный процесс. А тут и четко, и по делу, и дикция приятная. Спасибо.
Так приятно и ностальгично было услышать слово "раскукоживать" )
Первый раз мне музыка помогает, а не мешает)) Задает ритм, так и хочется приступить к практике)) Круто!!!
ruclips.net/video/qZ4viw55JbQ/видео.html
@@zen-designer музон огонь! Благодарим!
Все ваши труды настолько толковы, что ютубовская нотификация обретает смысл. Грасияс, сеньор!;)
Спасибо! Так победим )
Я человек простой: вижу новый видосик Виктора про Фирму - прожимаю лайкосик не глядя. Если бы ни его видео, то до сих пор большинство дизайнеров блуждали б во тьме неведения и мраке незнания.
Спасибо ) Но лучше прожимать глядя ))
@@zen-designer как раз закончил просмотр. Что я могу сказать... Прожал, однозначно, не зря)
Огонь! Информативно, актуально, с чувством юмора. Такого, сейчас мало, одни дизайнеры-мотиваторы, блин.
1 000 000 подписчиков Тебе.
Mykola Golovko спасибо!
Самая неординарная и поэтому самая запоминающаяся подача материала! Спасибо! :)
Рад что полезно.
Супер-подача! Приятно смотреть и слушать. Спасибо большое!
Огонь! Кайфонул при практике этих уроков нереально! Спасибо!
Шикардос! Спасибо за супер информативность, без H2O и еще с юмором)
Однозначно лайк и подписка.
Потрясающее видео! Все понятно, много пользы, за 1 видео столько рассказать - это круто))) Спасибо большое)
Спасибо большое! Так замечательно объясняете! А музыкальное сопровождение и звуковое - выше всяческих похвал!))
Подача материала просто на высочайшем уровне, сидел и орал весь урок. Просто потрясающе, как говорится We need more!!!
В который раз убеждаюсь какой же ты умный мужик!
Просто сообразительный 😂 И это старые советы. Многое изменилось
@@zen-designer основные направления смыслов алгоритмов все ещё работают) для укрепления знаний самое то 👍
Большое спасибо за Ваши уроки!
Благодаря вашему видео я разобралась и даже полюбила Алик ;) Спасибо за видос!
Спасибо за упоминание и за очень подробный разбор! Отличная работа!
Мы же банда! )
Виктор, спасибо большое) Мегаполезно и очень просто)
Автору большое спасибо. Всё ясно и понятно. Таких бы преподов в институт цены им бы не было.
замечательно полезный туториал. Спасибо за ваш труд!
Спасибо! Классный туториал, подписалась❤
😄😄😄очень интересное видео получилось!
Классно рассказываете🤙
Очень крутой урок!!! спасибо за файлик!!!
Спасибо за полезную информацию!
обожаю твой формат подачи )
Что за кайф! Спасибо, все понятно))
Виктор, огромное вам спасибо!
Отличное пояснение, спасибо!
Огромное спасибо, Виктор! Супер объясняете! Главное - мелочи, которые никто не объясняет! Удачи Вам в работе и во всем!
Спасибо. Не забудь свежий выпуск посмотреть. ruclips.net/video/EmBiYfYFb9k/видео.html
@@zen-designer Спасибо! Уже лайкнул)
Вот это подача!!! Просто вау
Спасибо! Крутой, полезный контент!
Очень познавательно! Крутые пистоны! Категорически респектирую 👍🔥
Александр Носач мотивирующая оценка ☺️ спасибо
Шикарный видос. Подача великолепна! Сам писал внутреннюю вики-статью для сотрудников по прототипам Фигмы и знаю как непросто сделать понятный текст о всех этих типах, видах, зависимостях, вложенностях и т.п. структурах. У вас, Виктор, прекрасно это вышло. Прикручу ссылку на это видео к статье.
Сергей Спиридонов ой спасибо!
Круто, спасибо!
Спасибо большое! Очень помогли!!!
Пушка, бомба)))
спасибо Виктор.
Мне понравилось и объяснение (лаконично и доступно), так и звуковой фон. Мне как представителю монгольских народов импонирует музыка с горловым пением. Да и буддийский Дзен в начале тоже наша тема)
Отличный контент!
Благодарю!
Вот это правильная подача, супер, спасибо. Хрен найдешь такое где)
Лучший видос)
лайк авансом, до просмотра )
надеюсь оно того стоит )
@@zen-designer Стоит, спасибо за старания, полезный урок.
Бомба!
Очень хорошая подача
благодарю большое большое)
на здоровье! )
Спасибо!
Список с булитами огонь!
Благодарочка
я как будто смотрю обзор на "беременна в 16" ))))) это очень весело, главное информация впитывается моментально! ты крутой, успехов
😂
спасибо!
Дядь Вить, может тебе еще какие-нибудь, рубрики запилить? У тебя подача лучше чем у наших дикторов, без бэээ.,мээ
Alexey Zenkin ☺️ собираюсь по Adobe запилить что-нибудь.
@@zen-designer какому адоби? XD или по классике: люстра, фш, индиз?
Сергей Спиридонов с XD не подружился, бог миловал 🙄 хочу по старшим адбам. Например по плагинам Astute для Illustrator.
@@zen-designer чем не нравится xd? По мне он быстрее и удобнее
Костыли наше всё)) Фронтендеры не обласкают за такое. А вообще немного обидно. Вроде бы завезли фичу, но не до конца.
В любом случае лайк и спасибо автору! Ждём-с нативных решений.
лучшие видео
Спасибо!
Годно!
Есть еще один пистон :)
В списках размер буллета можно задать 0.0001px и тогда фигма сделает нам золотой 0
На мой взгляд опасно такие штуки использовать на боевых проектах. Но любопытный пистон ☺️
Super
Thank's man!
Подскажите, пожалуйста, не могу компонент line привязать к габаритам алека, как вы это делаете на 12:06. Нет такой возможности даже. В чем может быть ошибка?
лучшему граф редактору лучшего обучальщика!
😂 лучшей проге для UI. Граф редактор это конечно не про Фигма 😌
@@zen-designer как сказать, шейпы просты и прекрасны, одна закраска областей чего стоит
@@Spirit741979 Я люблю Фигму ) Но граф редактор это всё же что-то другое. Ну для меня.
класс
Красавчик ваще
Буду так держать )
Спасибо за тутор, ибо я не знал как глав диз делал Алика)).
Живи вечно!))
Окей )
Гуру✌️
объясните зачем менять на vertical чтобы растянуть кнопку по ширине если можно добавить внутренние отступы слева и справа вутри кнопки? В чем разница?
Офигеть! Пошёл собирать голову обратно....
Не бойся, если после сборки останутся лишние детали 😂
Скажите пожалуйста, почему у меня не получается операция на 16:05 мин - где "Сдвинем звезду куда надо". Если я двигаю мастер комп звезды, звезда возле текста не реагирует никак, но если вытащить мастер звезду из контейнера компонента - то сдвигается и звезда возле текста, но исчезает и никак ее не найти. А у вас почему то звездочка появляется рядом с текстом и двигается. Но ведь вы не вытаскивали звезду из мастер компонента, да и смысла нет ее вытаскивать... Как же так неуловимо у вас получилось? Clip content проверяла - все как у вас)
лайк и подписка мужик, было бы круто, если бы ты дал обзор более сложным аликам :)
Вот скоро выйдет обновление автолейаутов и тогда возможно..
@@zen-designer будем ждать
Виктор, спасибо за видео, очень полезно! А можно ли комбинировать компоненты с функцией Auto Layout? Допустим нужно сделать 6-ть пунктов меню в шапке. Возможно понадобится менять цвет текста. Пишу первый пунк меню, создаю из него компонент, копирую и меняю текст. На этом этапе фрейм не выравнивается автоматически под текст, и начинает "залезать" на следующий пунк меню. Как это решить?
Делать из текста алик а потом уже компонент
Ждал этого очень давно, особенно шикарен автолейаут в компонентах, но без огромных косяков конечно же не обошлось... особенно большой костяк это невозможность задавать стороны и промежутки по отдельности... текст в кнопках всегда сидит криво и хочется изменить одну сторону на один пиксель... из-за новой системы с растягиванием по краям убрал панель constrains, и это безумно неудобно тк теперь нельзя задавать прилипание со всех 4-х сторон.
Можно фрейму задавать размер 0 вместо 1. Я так делаю для всяких дивайдеров. Ставлю им высоту 0, и они никак не влияют на размерность АЛ, но при этом все видно как надо. Для этого в W или H нужно ввести 0.001, фигма сама округлит до нуля.
Свирепый Насрулло спасибо! Не знал про этот хак с 0.001
Алика раскукожил и вуаляшечки 👍
❤️❤️❤️
😍😍😍
Здравствуйте, может, вопрос глупый, но очень хочу спросить. На видео 12:12 Вы говорите "сделаем инстанс ссылки", но по факту вытягиваете не инстанс, а уже детач инстанс одним кликом. Подскажите, плиз, как Вы сделали такой трюк в один, а не два клика?
Второй вопрос - обязательно ли детачить инстанс в этом случае? И последний, но не менее важный - я все шаги продублировала у себя и у меня такая строка из булетов тянется, если ткст ооочень длинный. Это они пофиксили, получается?
Если я правильно понял - потянуть с альтом
Музон клёвый ::)
а как сделать автолейаут для иконки, лейбла(подписи) и подчеркивания? я попробовала у меня не получилось. а надо чтоб тянулся лейаут, и от мастера объекта размер в стиле не убегал. это критично важно
это получается такая же структура гиперлинка с сылкой но плюс иконка
сложно на пальцах ) Найдите меня в телеграм -- посмотрю файл
Всем здоровья! Как зажать в фигме на windows?
подскажите, когда делаю текст и срелку с автолейаут, то стрелка подскакивает по верхнему краю текста и нет возможности ее переместить, что не так?
если строка текста одна - выровнять автолейаут в настройках. Если несколько -заключить стрелку в дополнительный алик и сделать отступ сверху
честно, я малось прифигела от сложности создания буллетов в фигме! В Скетче это делается в 2 клика, без всех этих костылей
У каждой программы свои сильные стороны. Иначе была бы одна. )
Виктор, как сделать кнопку с аликом, которая будет компонентом, у которой подложка будет тоже компонентом? Объясню. Есть родительская кнопка с аликом и куча дочерних кнопок. Мы решаем изменить форму всех кнопок. А как сделать это одним махом? Спасибо!
типа такого www.figma.com/file/NU3wHE1jogPgWkNJM7xK90/button?node-id=0%3A1
@@zen-designer Спасибо! Я по-ходу заморочился. На самом деле форма/цвет/стиль дочерних кнопок будет меняться и так )
3:26 можно бесконечно слушать
))
Спасибо за лайфхак с буллетами! У меня другой вопрос: когда таскаешь объект поверх сложного "алика", то он норовит автоматически в нём разместиться. Это иногда удобно, но чаще - нет. Не могу найти шорткат, чтобы отменить эту "медвежью услугу"... Есть вообще такое?
Нужно зажать пробел прежде чем тащить.
@@zen-designer Это гениально! Спасибо большое!
Галики и Валики :DD
как отменить мастер компонент? команда ctrl+alt+b не работает... и вообще в контекстном меню пропала такая команда
Мастер нельзя разобрать. Можно сделать с него инстанс, разобрать (detach) и мастер удалить.
Виктор, все конечно хорошо, но 1 пиксель это костыль. Я решал это по другому, делал алик "горизонтальный", и внутри него алик "вертикальный", и уже с последним шаманил нужные мне размеры.
Хотелось бы посмотреть на решение. Интересно.
Вот просто интересно - чтобы создать маркированный список, который в дизайне используется пару раз, многие будут наворачивать автолейаут, компонент, фрейм?)
Я буду
А где пропорциональное масштабирование объектов при увеличении ширины артборда?
А компоненты?
рука мастера
Пытаюсь перейти со Sketch, а тут все выглядит нерадостно. Тоже костыль на костыле. Только к новым костылям для перехода привыкать нужно. Вот и вся разница... За урок большое спасибо, помогает быстро разобраться.
Anne L сам переходил со Sketch. Мне фигмокостыли показались намного удобнее 😂
@@zen-designer Sketch выкатили аналог auto layout совсем недавно. И он уже умеет, например, расставлять элементы в любой позиции относительно друг друга. Может, при вас этого еще не было.
Anne L не было. Но это не меняет ситуацию со стилями и символами / компонентами.
Инстансы компонентов теперь не выглядят как инстансы?
Нет, если они алики
@@zen-designer а такой вопрос:
удалил старый мастер, создал новый, НО с таким же названием. Есть ли такой плагин который может перепривязать инстансы удаленного компонента к новому?
Al Yu есть вот такой платный www.figma.com/c/plugin/767721682134156281/Master
Al Yu а вообще есть чат в телеге. Там оперативнее могут помочь с любыми вопросами. t.me/figmachat
@@zen-designer ага, спасибо
Это все интересно, но как разработчик поймет эти костыли?
Всегда можно оговорить тонкости. Или не использовать спорные решения.
Я бы назвал Алит
Нада била музон громчє врубіть))
о.. знакомый аватар. автолаяуты не умеют еще многогого. наверное нельзя внутри прикалывать текст к стороне...+ второе слово поднести... так чтобы держалось по сетке... итд
обычные правила из css ( гриды и флексы ) превратили в инструмент в фигме , всё же для веба это всё и делалось. Наверное дизайнерам всё это сложно, для фронта это всё обыденно.
Честно говоря не понял в чём посыл твоего сообщения 😁 мне сложно
@@zen-designer да просто .. дизайнеры наверное думают, что это им все эти фишки и инструменты делают, а на самом деле, сделано всё для веб разрабов, исходя из уже существующих технологий, которые я описал выше (такие как гриды и флексы). Всё для того, чтобы веб дизайнеры не клепали какой то дичи, которую никак не внедришь без танцев с бубном.
@@orionpro79 думаю тебе не везло с дизайнерами
@@zen-designer по разному. Но да, дичи я насмотрелся), хорошо, что есть такие видео, как делаешь ты (и подобные) и я надеюсь, что их будут смотреть будущие хорошие дизайнеры и плохие перестанут встречаться на моём пути!))
@@orionpro79 да будет так! ☺️
музыка и звуки... пздц конечно.
Звуковые эффекты отвратительны
Спасибо за мнение
мастер не может быть внутри мастера ))) жирные вставки звуковые )))
Недостаток Figma в отсутствии русского языка.