Адаптивные привязки в Фигме (Figma лайфхаки). Бесплатные нескучные уроки
HTML-код
- Опубликовано: 26 янв 2021
- #alexeybychkov #ityoutubersru #webdesign
Как настраивать адаптивные привязки в Фигме, чтобы расстояние между элементами было фиксированным
Наши чатики в дискорде - / discord
Обучение - alexeybychkov.study/
💰❤️ Поддержать канал:
/ @alexeybychkov_
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 36 лет, женат на прекрасном человеке и у нас две прекрасные дочки. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 17 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov.com/about/
17 лет опыта - alexeybychkov.com/experience/
Пишу - alexeybychkov.com/blog/
Дизайню - alexeybychkov.com/cases/
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
![Уроки Figma Auto Layout. Полное руководство по автолейаут. [Фигма уроки]](http://i.ytimg.com/vi/R4Wq-YVWEvc/mqdefault.jpg)
Спасибо вам все, что смотрите) и лайкаете) ❤️
Доступ к закрытом чату: советы, лайфхаки, ответы на вопросы, ранний доступ к видео и тд:
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - www.patreon.com/alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: instagram.com/alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: facebook.com/dsgn.tips/
👉 Твитор: twitter.com/_alexeybychkov
Спасибо. Алексей, что Вы делаете свою работу! Лучшие и доступные уроки в самой актуальной программе для веб дизайна!
@@lublukota5782 Всегда пожалуйста)
Это даже не просто лайфхак... Это "хрен-сам-когда-догадаешься" :) Благодарю, Алексей!
Можно и так назвать))
Круто, не знал, что адаптивить можно с помощью сетки :)
Мы еще столько про фигму не знаем)) наверное)
@@alexeybychkov_ а откуда узнал этот лайф хак?
@@romanegorov6597 да уже и не вспомню. Еще когда записывал ролик про сетки для курса по фигме года полтора назад пользовался)
@@alexeybychkov_ ну пушка!)
И откуда, Алексей, ты все знаешь? столько классных и полезных фишек!!! аааагонь!
так каждый день в фигме столько времени провожу, вот и узнается все
Классно у тебя мозги устроены) такие штуки всегда радуют
да вроде такие же как у всех))
@@alexeybychkov_ не скромничай! )
Кажется, я поняла, как можно заадаптивить несколько фотографий в АЛ😏 Как хорошо, что есть твои уроки))
круто! 😊
Спасибо за лайфхак!!! Реально вечно мучаюсь с этими привязками, а тут такая красота - все проблемы решаются)
всегда пожалуйста)
@@llelya Я при необходимости только
Как же ты круто всё объясняешь, Алексей!))) Смотрю и не могу нарадоваться, уже 1 год за тобой наблюдаю, и почти всему научился благодаря твоему каналу - супер (Ты "золотая жила" в мире ютуба)))) Спасибо тебе огромное)
Ну класс) Спасибо, что смотришь)
@@alexeybychkov_ Да, и кстати говоря уже 3-й проект делаю, твои ролики конечно прям выручают, особенно стрим сегодняшний - ТОП, наконец-то помог мне понять, как правильно работать с контейнерами и автолаяутом. Благодарю!)
@@nikolaymedovkin4718 Супер) Спасибо, что смотришь) и комментишь!
Действительно, на догадку года б ушли. Спасибо очень полезно!
Пожалуйста)
Полезная фишка, спасибо! Пользоваться сеткой внутри фрейма как части сайта недавно узнал что полезно. Но вот использовать ее таким образом не знал что можно. В целом тема для меня довольно не простая. Стало понятнее. Лайк
Супер) Рад, что пригодилось)
Я знаю в какой домашке мне должен был пригодиться этот лайфхак 😀 Спасибо💪
😀
Классная фишка! Видел это у Теплова, но, как то мимо прошло. Теперь, когда всё понятно, просто огонь! Спасибо.
Супер) пожалуйста
Привет, Алексей. Спасибо большое за такую годноту. Очень клевый лайфхак
И тебе привет) Пожалуйста)
Всё гениальное - просто :) Вот только самостоятельно до этого "просто" я бы добиралась очень и очень долго, методом многочисленных проб и ошибок... Спасибо за проторенную тропинку, по которой начинающие дизайнеры, вроде меня, могут идти и развиваться в ускоренном темпе! Определённо ЛАЙК
Спасибо за просмотр!
Ого! Алексей, как ты до такого додумываешься, это же гениально! Мне кажется, надо программу просто вдоль и поперёк знать, чтобы до таких необычных идей доходить) А главное - работает же👍
когда каждый день что-то делаешь, многое узнаешь
блин, как на заказ ролик просто, как раз делала карточку товара и думала, как бы пофиксить это, спасибо огромное!
Бывают совпадения))
@@llelya я понимаю, что можно и без них, но с ними какой то особый кайф для перфекциониста) и адаптивить проще, и когда тычу раз помучаешься с привязками, это войдёт в рутину и без них уже будет как то странно все делать, ну у меня по крайней мере так
Хороший лайфхак, не знала, что можно так делать. Спасибо большое)!
🚀🚀🚀
Какой же офигенный ЛХ с применением еще одной сетки для адаптива! то, что нужно было)))
супер)
Капец как это полезно! И самое что интересное, как вообще можно было самому догадаться до этого!))
Спасибо, Алексей!
Всегда пожалуйста)
Ох, помню когда делал дашборд, этот лайфхак меня прям удивил, да и сейчас удивляет)
молодец, что сделал!
Ты очень клёвый) прям позитив когда слушаю. Кайф!
Супер) Рад, что нравится!
Спасибо за совет! Жду новые темы.
пожалуйста)
Спасибище огромное! Оказывается, все ТАК просто! Сама б ни за что не додумалась)
Пожалуйста)
Ого, спасибо за такой лайфхак,надо записать его к себе в заметки)) Очень полезно 🤗🔥
спасибо за просмотр)
суперполезно, спасибо!!!!! смотрю каждый день по пару часов, учусь)))
круто) рад, что нравится!
Алексей, спасибо за годный контент!
всегда пожалуйста)
Ухтышка, очень полезный лайфхак. Благодарю! 🥰
супер!
Воистину - лайфхак!
Спасибо, Леха.
Я тоже недавно так натренировался с этими привязками...
Кстати, я нарыл способ с обводками иконок. У тебя был ролик.
Как подгонять обводки. Ты делал в Иллюстраторе.
Обводка+иконка Outline Stroke > Union Selection > Flatten Selection
Вроде работает.)
ну класс) У меня вот не всегда в фигме корректно переводятся контуры в заливки у иконок(
Афигенный лайфхак! Большое спасибо за такую годноту)
супер, пожалуйста!
Классный урок, а я никак до конца не разберусь с этими привязками(
Практика и все получится!
@@llelya Классный план))
Спасибо)
Классно! сделала так, когда повторяла этот дашик из твоего другого видео. Получилось!
ну класс!
Когда бы я сама до этого додумалась - через очень большое количество времени! Сказать что было полезно - ничего не сказать! Спасибо за крутой контент
рад, что полезно
Круто и драйвово, спасибо Лёша
супер
Спасибо за нескучный бесплатный урок, было полезно посмотреть
Пожалуйста))
Не без боли, но в августе я их осознала и победила, сейчас применяю и радуюсь
отличные новости!
Хотелось бы ещё видео про компоненты. Все про них знают, но не знают как пользоваться. (Это я про себя)
так вот в пятницу стрим про них будет)
Очень крутой и полезный видос!
ну класс)
Заценил еще с видоса про дашборд) Не знаю как другим, но мне тот час зашел как 10 минут)
Ну класс) еще бы звук нормальный и совсем хорошо было бы)
@@llelya пампам
Супер, класс, а то что коротыш, так тоже очень круто, точно есть время посмотреть годноту)) спасибо за то ,что ты такой классный))
Всегда пожалуйста 🚀❤️
MAGIC! Спасибо за лайф-хак, просто лучший!
пожалуйста))
Круто, полезно.
Тренируюсь на своем "портфолио" - с каждым новым уроком ломаю и переделываю с использованием новой фишки. Все, пошла снова ломать))
ну класс!
Классный лайфхак. Пока смотрела, освежила воспоминания с созданием дашбордов с твоего канала. 👍
супер!
Класс!! Спасибочки 🤗
пожалуйста!
Крутой экспресс лайфхак) Спасибо!
Ну класс)
Отличное видео, огромное вам спасибо! У нас вся группа учится по вашим видео)))
ого, круто) А где это это у вас?))
Крцтой лайфхак! Побольше бы таких!
спасибо за просмотр)
класс!) все гениальное просто
Именно так)
@@llelya хахахах есть такое дело 😁
Суперский контент! БожиЙ!
Спасибо))
Спасибо, крутой лайфхак)
Ну класс, спасибо за просмотр!
Благодаря тебе узнал! Спасибо)))🤩
пожалуйста!
Спасибо- это было очень полезно для меня! Фил Хуг!🤩🤩
пожалуйста!
Не знала, очень полезный лайфак👌
рад, что пригодилось)
Спасибо большое!
Пожалуйста)
очень полезный ролик!
суперр, спасибо за просмотр!
Вы просто бог спасибо что вы есть
Ого)
Что-то новенькое!)
ну класс)
Очень интересный урок 👍
ну класс)
крутой и неочевидный лайфхак. спасибо и лайк)
спасибо юза просмотр!
Очень интересный прием!
спасибо за просмотр)
Ого, вот так неожиданность))
🙃
Черт возьми, я бы просто нажал shift+a, а тут так можно))
😅 слишком просто)) круто же когда есть варианты)
Мне кажется, что Фигме пора делать тебя своим амбассадором на русскоговорящем пространстве, ведь никто лучше не объясняет и не показывает столько полезных фишек!
😊
очень интересная особенность!
согласен)
это жесть! сама бы никогда не догадалась!
Спасибо за просмотр)
О, прикольно!) не знал, что так можно (самая распространённая реакция на твои ролики 🤣)
Хотя мне кажется, что автолейаут подходит конкретно для такого графика больше, потому что если добавляешь новый столбец, приходится в сетку лезть, менять кол-во столбцов. Это секунды времени, но всё же)))
если выносных элементов нет вроде лейбла, то автолейаутом совсем просто сделать, но неинтересно))
@@alexeybychkov_ неинтересно, это точно xD И видос был бы скучный)))) Я твой приём уже использовал в текущем проекте и прям круто! Спасибо ;-)
Лайфхак супер!
ну класс)
лайк даже до просмотра!
Супер) Спасибо!
Прикольно. Я решал эту проблему вложенными фреймами.
На самом деле можно и через АЛ, если каждый элемент поставить на Fill по X, получится тоже самое. Но так не интересно. Слишком просто)) А в данном случае придется еще и оборачивать дополнительно столбик с лейблом сверху в еще один фрейм и его настраивать. Но тоже скучно)) Круче что-то новенькое использовать)
@@alexeybychkov_
Я согласен. Этот способ гораздо удобней. Нет лишнего мусора в слоях и проще настраивать.
Но в Figma так и не решили проблему чередующихся блоков с пропорциональным масштабированием элементов и с растягиванием по краям. Происходит перекрытие или образование свободного пространства. Не знаю причины. Почему просто не сделать возможность обвернуть данные блоки в один специальный фрейм без настроек с автоматической привязкой всех вертикальных границ вложенных фреймов.
@@user-sv6dy8pk2q Со временем думаю реализуют и перестроение блоков в адаптиве)
Безумно полезно.
рад, что так! :) Спасибо за просмотр!
Еще можно такое повторить с помощью auto-layout с параметрами fill container
можно, но скучно)
Приколдесно)
ну класс)
дякую! дуже корисно
спасибо за просмотр)
Полезная информация
ну класс)
Спасибо
пожалуйста!
Неочевидно да. Теперь я понял, что сетка играет роль в адаптивах. Т.к. привязка сами по себе не всегда до конца ясны в механизме работы
спасибо за просмотр)
Афигеть! Всегда автолейауиами такое делал 😅
Спасибо за просмотр)
Восторг
супер)
0:31 Леша, а предположим (чисто гипотетически😏), что есть несколько карточек в ряд, которые надо заадаптивить. Как я поняла, в адаптивах расстояние между элементами должно быть всегда одинаковым, а количество столбцов может меняться. Допустим, у меня на главной 5 карточек в ряд. В адаптиве 1000 я же могу сделать только 4 карточки, а 5 просто не показывать? А то она перенесется вниз и будет некрасиво там висеть в одиночестве) Или лучше просто сделать ширину столбцов поменьше, но показать все 5 карточек в ряд?🤔
да все так, уменьшаешь количество карточек. На 320 чаще всего вообще 1 остается
@@alexeybychkov_ спасибо большое🤗
@@alexeybychkov_ и остальное в слайдер?
Классно, как же вы такое нашли....случайно или как?
Уже и не вспомню, пользовался еще когда записывал про сетки для курса по Фигме года полтора назад
Здравствуйте, Алексей!
Спасибо за лайфхак.
У меня другой вопрос. Скажите пожалуйста, вы используете зеленый фон чтобы вставить себя в видео прозачным фоном.
Заранее благодарю за ответ.
Привет. Да, использую зеленый хромокей
@@alexeybychkov_ Спасибо большое за ответ. Я просто подумал, может вышла какая то софтина, которая без хромокея убирает фон.
Спасибо. Коллеги, подскажите, а как для сетки из 12 колонок задать нужный размер в пх, например в 1280? Фрейм сделал 1920, а контент хочу в 1280 например
Вот как настраивать сетки ruclips.net/video/QCcw_Xx4wLo/видео.html
Как то странно фигма работает, чтобы адаптивилось нужно добавить СЕТКУ, что за бред, никогда бы сам не догадался, спасибо Алекс
Спасибо за просмотр)
О, я тоже хочу что бы мне что-то написали под комментарием=)
Это всегда пожалуйста)
@@alexeybychkov_ За фишку спасибо, не знал, хотя что-то такое где-то слышал что к сетке привязка идет... ну и за комментарий... и даже лайк😊
супер)
Появился вопросик, если в одном фрейме будет штук 10 новых мини-фреймов с графиками, это никого не удивит (например верстальщика) ?
нет, у них у самих дивы внутри дивов внутри дивов :D
точно))
Хороший ролик.
Только у Яндекса нет адаптива, у них жестко под каждое разрешение прописано и надо обновлять страницу каждый раз чтобы увидеть изменения. Хотя для примера и так сойдет.
так я же страницу не обновлял в ролике. Просто тягал и все адаптивилось
🔥🔥🔥🔥
🥳
Так, а как сделать чтобы как на примере было: в зависимости от размера страницы когда мы ее растягиваем менялось количество ячеек в строке? В фигме или в прототипе я имею ввиду, а не при верстке уже.
если я понял то, что понял, то так сделать пока нельзя)
у верстальщика есть возможность это реализовать? он это будет делать через флекс(если да, то ведь иожно было сделать через автолейаут?) если не через флекс, то как?
ждем верстальщиков в чате)
Что произойдёт если добавить или убрать столбик? На автолейаутах можно собрать более универсальное решение.
можно, но не интересно
Лайк! сама никогда б в жизни не догадалась, а подскажет кто-нибудь пожалуйста, почему при применении констрейнтов пикселяться текст и элементы? пол дня мучаюсь, не могу найти проблему. Заранее спасибо!
привязка к пиксельной сетке наверное выключена
@@alexeybychkov_ не-а, snap to pixel grid в режиме on, то просто уже Фигма бесилась из-за лояутов😅 спасибо Вам ! Вы мой личный Боженька дизайна 🤩
Крутой коротыш - плюс еще один лайфхак в копилку
Супер
Охуеть!
все так плохо?))
@@alexeybychkov_ никогда бы не подумал, что сетка может влиять на поведение контента
@@Vodoved ааа, так ведь контент в верстке как раз и ставят по сетке, чтобы она влияла на ширину контента)
@@alexeybychkov_ я думал она чисто визуально только помогает его располагать)
Я в шоке......
терпи))