Тёмный

Как сделать аккордеон в Figma 

Ян Агеенко - курсы графического и веб-дизайна
Просмотров 13 тыс.
50% 1

Хочешь больше полезностей о веб-дизайне и карьере в IT?
Вступай в чат Гильдии дизайнеров: t.me/designers...
Подписывайся на мой инстаграм: / yan.ageenko
Читай мою книгу: www.litres.ru/...
Слушай мою книгу в аудиоформате: www.litres.ru/...
Приходи ко мне на курсы: yan.ageenko.pro...
Мой Dribbble: dribbble.com/y...
Мой Behance: www.behance.ne...
#IT #дизайн #веб-дизайн #UX #UI #figma

Опубликовано:

 

7 май 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 45   
@julia051172
@julia051172 6 месяцев назад
Даже не знаю, как благодарить....Доступно, просто, интересно, понятно. Браво и аплодисменты. Несколько дней голову ломала над этой темой. Вы - гений! Подписалась на Вас, с удовольствием буду смотреть Ваши уроки. Спасибо огромное!!!
@yulya3072
@yulya3072 2 года назад
Просто, доступно, без лишних слов. Спасибо, жду еще уроков
@user-gh4iq2wb7h
@user-gh4iq2wb7h Месяц назад
Очень полезное видео, все получилось с 1 раза. Благодарю!
@Kristen903
@Kristen903 Месяц назад
Спасибо огромное! Наконец-то понятное видео!
@Belka1406
@Belka1406 11 месяцев назад
Я три дня пыталась сделать такой список и не получалось😢 а теперь посмотрела это видео и все вышло! Просто и понятно, спасибо! ❤
@user-uq9wo5ee7z
@user-uq9wo5ee7z 6 месяцев назад
Спасибо огромное! Меня пугала эта тема, а вы так доступно объяснили 👍👍👍 Все стало ясно, как божий день))
@xamb1i
@xamb1i Год назад
Спасибо вам большое голову мучал три часа как сделать попалось ваше видео очень помогло, хорошо то что есть гайды как это все сделать, Спасибо еще раз 😃
@freedbek7773
@freedbek7773 Год назад
спасибо огромное долго искал просто и удобно)))
@nataliyamozzhukhina4841
@nataliyamozzhukhina4841 5 месяцев назад
Спасибище!!! Супер-полезно! Кратко, чётко, по делу. У меня получилось с первого раза))
@YanAgeenko
@YanAgeenko 5 месяцев назад
На здоровище! :)
@user-mi3mz7sf5i
@user-mi3mz7sf5i Год назад
ну супер)все ровно как обычно,ни одного промаха/СПАСИБО
@mrs2251
@mrs2251 5 месяцев назад
Супер🔥 долго искал такого формата видео
@user-xb1jh8hw9n
@user-xb1jh8hw9n 6 месяцев назад
Спасибо тебе! пол дня мучился как эту херобору сделать. Живи 100 лет
@user-zk7wn8li7c
@user-zk7wn8li7c День назад
супер!!!🤩
@marinaershova8467
@marinaershova8467 Год назад
Отличное, полезное, доступное видео! Огромное спасибо!
8 месяцев назад
Спасибо огромное! ОЧень легко и понятно
@sladasweet
@sladasweet Год назад
Благодарю за урок!!! Всё явно и понятно.
@user-cl7hw2rf6m
@user-cl7hw2rf6m 11 месяцев назад
спасибо огромное,очень выручили
@lovelypunk1512
@lovelypunk1512 6 месяцев назад
Спасибо за гайд, а как сделать так, чтобы этот список изначально был в закрытом состоянии ?
@lovelypunk1512
@lovelypunk1512 6 месяцев назад
а все, понял как
@elizrzh
@elizrzh 3 месяца назад
@@lovelypunk1512 не подскажете как?
@sergeyezhov2469
@sergeyezhov2469 Год назад
Поставил ролику дислайк, объясняю почему: 1) Вы очень стесняетесь пользоваться autolayout. Зачем объединять title и иконку в группу? Если title станет длиннее, то в случае с autolayout текст переедет на вторую строку, а в вашем случае он скорее всего уедет направо за иконку. Или вы собираетесь каждой раскрывашке вручную задавать ширину и расстояние до иконки вместо того, чтобы один раз настроить это в панели справа? 2) В продолжение первого пункта: если бы сделали autolayout для Frame 1 сразу, вы во-первых могли бы просто продублировать раскрывашку с помощью ctrl+d, и вам не пришлось бы тащить их мышкой вниз (вы в реальном дизайне так же таскаете повторяющиеся элементы?), а во-вторых вас бы тогда не удивило, что расстояние между раскрывашками остается прежним, когда они схлопываются; 3) Это здорово, что вы показываете анимацию, однако если бы у вас блок с раскрывашками стоял рядом с другими блоками на реальном макете (т.е. под ним бы еще шел хотя бы Footer, а возможно еще и Final CTA и еще что-нибудь), то при нажатии на раскрывашку вы скорее всего наблюдали бы не плавную анимацию, а дергание за счет того, что блоку внезапно понадобилось увеличиться за счет изменившейся высоты. Поэтому имело смысл дополнительно показать, как этот блок выгляит рядом с другими (так и пример был бы живее). 4) Это уже скорее докапывание, но все же выскажу: для столь небольшой операции это слишком длинное видео и очень медленная речь. Обратите внимание на видео Андрея Гаврилова из WayUp или Алексея Бычкова - возможно, это поможет вам улучшить качество ваших видео.
@user-xg2iz4fb9c
@user-xg2iz4fb9c 2 года назад
Здравствуйте! Чудесный ролик, все понятно и довольно просто. В прототипе разве что возникла проблема: часть текста пропадает при "складывании". С чем такое может быть связано?
@YanAgeenko
@YanAgeenko 2 года назад
Сложно сказать. Надо проверять :)
@user-id9fb3kq8c
@user-id9fb3kq8c Год назад
Здравствуйте! все получилось в Фигме, спасибо! теперь вопрос, а как это перенести в Тильду, чтобы работало?!
@Ace_of_Black
@Ace_of_Black 2 года назад
Не знаю, пофиксили или нет, но когда я делал это зимой, то была проблема. Если ставить любые элементы, скрывающиеся через auto layout, не на первом экране, то в прототипе figma начинает сходить с ума при их свёртывании и раскрытии. Вместо плавной анимации она мгновенно отскролливает к header'у страницы, затем также мгновенно возвращается обратно. Из-за этой ерунды было бессмысленно создавать в прототипе раскрывающиеся списки, не влезающие полностью в первом экране
@lesyawong6201
@lesyawong6201 Год назад
Я сейчас столкнулась с той же проблемой!!! Вы не нашли решение?
@Ace_of_Black
@Ace_of_Black Год назад
Больше не тестировал эту тему. Но, по идее, должно работать через костыль: если не скрывать слой, а во втором варианте установить ему высоту в 0 пикселей, то он должен сворачиваться, а не скакать.
@mar1koshka
@mar1koshka Год назад
Спасибо!
@katiashcherbyk8715
@katiashcherbyk8715 Год назад
Спасибо за столь информативное видео, очень полезно. У меня есть вопрос: как сделать так, чтобы основной фрейм лендинга, в котом находится такой выпадающий список по типу "Аккордеон", так же автоматически менялся в высоте, когда мы открываем списки. У меня просто все следующие блоки после аккордеона уходят в низ фрейма, где контент обрезаный (так как у фрейма основного задана высота). Но если вручную сделать сам фрейм больше, то остаются пустые белые пространста, когда аккордеон свернут. Что я делаю не так? Благодарю за помощь.
@YanAgeenko
@YanAgeenko Год назад
нужно автолейаутами всё делать
@user-cv4bp1zw3w
@user-cv4bp1zw3w 4 месяца назад
Добрый день! У вас получилось разобраться как сделать, чтобы высота фрейма менялась? Столкнулась с такой же проблемой. После фрейма блоки с информацией ездят, а сам фрейм нет
@user-pp6ns5us8q
@user-pp6ns5us8q Год назад
Как сделать, чтобы текст подтягивался, если auto layout не работает?
@YanAgeenko
@YanAgeenko Год назад
Должен работать. Если не работает - значит что-то не так делаете
@user-wg8fw2lb3q
@user-wg8fw2lb3q 2 года назад
А разве не можно просто убрать текстовый блок во втором варианте? Или его нужно оставить для прототипа?
@YanAgeenko
@YanAgeenko 2 года назад
можно
@NBYSUK
@NBYSUK Год назад
@belskayaolya
@belskayaolya 2 года назад
Здравствуйте, у меня уже при прототипировании во все ответы на вопросы в аккордеоне подтягивается ответ из мастер-компонента, хотя я везде текст поменяла. Как это исправить? Сейчас сойду с ума
@YanAgeenko
@YanAgeenko 2 года назад
Просто вручную поменять тексты
@belskayaolya
@belskayaolya 2 года назад
@@YanAgeenko я поменяла, конечно, но при визуализации все равно текст из мастер-компонента
@user-co8wo6my3r
@user-co8wo6my3r 2 года назад
У меня на 2:29 нет инструмента "Variant", где его взять?
@YanAgeenko
@YanAgeenko 2 года назад
что-то не так значит делаешь. Делай 1 в 1 как в уроке, по шагам
@user-co8wo6my3r
@user-co8wo6my3r 2 года назад
@@YanAgeenko Нашёл. Он был сверху, рядом с компонентом. Спасибо.
@5Garaj
@5Garaj 2 года назад
Впервые слышу термин "аккордеон") Разве это не "бургер-меню"?)
@YanAgeenko
@YanAgeenko 2 года назад
Нет, бургер-меню это три полоски, по нажатию на которые открывается навигация
Далее
女孩妒忌小丑女? #小丑#shorts
00:34
Просмотров 7 млн
NOOOO 😂😂😂
00:14
Просмотров 14 млн
Design And Animate An FAQ Accordion In Figma
9:01
Просмотров 22 тыс.
How To Create Toggle Switch Button On Figma
5:27
Просмотров 47 тыс.
How to Swap Icons in Figma
11:28
Просмотров 45 тыс.
Creating An Interactive Accordion in Figma
5:50
Просмотров 50 тыс.
女孩妒忌小丑女? #小丑#shorts
00:34
Просмотров 7 млн