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

Поделиться
HTML-код
  • Опубликовано: 2 ноя 2024

Комментарии • 46

  • @julia051172
    @julia051172 8 месяцев назад +2

    Даже не знаю, как благодарить....Доступно, просто, интересно, понятно. Браво и аплодисменты. Несколько дней голову ломала над этой темой. Вы - гений! Подписалась на Вас, с удовольствием буду смотреть Ваши уроки. Спасибо огромное!!!

  • @МаринаЯценко-п3к
    @МаринаЯценко-п3к 9 месяцев назад +1

    Спасибо огромное! Меня пугала эта тема, а вы так доступно объяснили 👍👍👍 Все стало ясно, как божий день))

  • @yulya3072
    @yulya3072 2 года назад +5

    Просто, доступно, без лишних слов. Спасибо, жду еще уроков

  • @Belka1406
    @Belka1406 Год назад +2

    Я три дня пыталась сделать такой список и не получалось😢 а теперь посмотрела это видео и все вышло! Просто и понятно, спасибо! ❤

  • @АнастасияТерещук-с5й
    @АнастасияТерещук-с5й 3 месяца назад +1

    Очень полезное видео, все получилось с 1 раза. Благодарю!

  • @xamb1i
    @xamb1i Год назад +3

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

  • @mrs2251
    @mrs2251 8 месяцев назад +1

    Супер🔥 долго искал такого формата видео

  • @FrancoBeluni
    @FrancoBeluni 9 месяцев назад

    Спасибо тебе! пол дня мучился как эту херобору сделать. Живи 100 лет

  • @Kristen903
    @Kristen903 3 месяца назад +1

    Спасибо огромное! Наконец-то понятное видео!

  • @nataliyamozzhukhina4841
    @nataliyamozzhukhina4841 8 месяцев назад +1

    Спасибище!!! Супер-полезно! Кратко, чётко, по делу. У меня получилось с первого раза))

    • @YanAgeenko
      @YanAgeenko  8 месяцев назад

      На здоровище! :)

  • @Алиса-ь4ы5ы
    @Алиса-ь4ы5ы Год назад +1

    ну супер)все ровно как обычно,ни одного промаха/СПАСИБО

  • @freedbek7773
    @freedbek7773 2 года назад +4

    спасибо огромное долго искал просто и удобно)))

  •  11 месяцев назад +1

    Спасибо огромное! ОЧень легко и понятно

  • @marinaershova8467
    @marinaershova8467 2 года назад +2

    Отличное, полезное, доступное видео! Огромное спасибо!

  • @kristinaletlzarva
    @kristinaletlzarva Год назад +1

    спасибо огромное,очень выручили

  • @sladasweet
    @sladasweet Год назад

    Благодарю за урок!!! Всё явно и понятно.

  • @ЕленаКоптик-з8ш
    @ЕленаКоптик-з8ш 2 месяца назад +1

    супер!!!🤩

  • @lovelypunk1512
    @lovelypunk1512 9 месяцев назад +1

    Спасибо за гайд, а как сделать так, чтобы этот список изначально был в закрытом состоянии ?

    • @lovelypunk1512
      @lovelypunk1512 9 месяцев назад

      а все, понял как

    • @elizrzh
      @elizrzh 6 месяцев назад

      @@lovelypunk1512 не подскажете как?

  • @Morre-y5x
    @Morre-y5x 2 года назад +1

    Здравствуйте! Чудесный ролик, все понятно и довольно просто. В прототипе разве что возникла проблема: часть текста пропадает при "складывании". С чем такое может быть связано?

    • @YanAgeenko
      @YanAgeenko  2 года назад

      Сложно сказать. Надо проверять :)

  • @ТатьянаЕвсютина

    Здравствуйте! все получилось в Фигме, спасибо! теперь вопрос, а как это перенести в Тильду, чтобы работало?!

  • @cuso4ek_p1roga
    @cuso4ek_p1roga Год назад

    Спасибо!

  • @Ace_of_Black
    @Ace_of_Black 2 года назад +2

    Не знаю, пофиксили или нет, но когда я делал это зимой, то была проблема. Если ставить любые элементы, скрывающиеся через auto layout, не на первом экране, то в прототипе figma начинает сходить с ума при их свёртывании и раскрытии. Вместо плавной анимации она мгновенно отскролливает к header'у страницы, затем также мгновенно возвращается обратно. Из-за этой ерунды было бессмысленно создавать в прототипе раскрывающиеся списки, не влезающие полностью в первом экране

    • @lesyawong6201
      @lesyawong6201 Год назад

      Я сейчас столкнулась с той же проблемой!!! Вы не нашли решение?

    • @Ace_of_Black
      @Ace_of_Black Год назад

      Больше не тестировал эту тему. Но, по идее, должно работать через костыль: если не скрывать слой, а во втором варианте установить ему высоту в 0 пикселей, то он должен сворачиваться, а не скакать.

  • @katiashcherbyk8715
    @katiashcherbyk8715 Год назад

    Спасибо за столь информативное видео, очень полезно. У меня есть вопрос: как сделать так, чтобы основной фрейм лендинга, в котом находится такой выпадающий список по типу "Аккордеон", так же автоматически менялся в высоте, когда мы открываем списки. У меня просто все следующие блоки после аккордеона уходят в низ фрейма, где контент обрезаный (так как у фрейма основного задана высота). Но если вручную сделать сам фрейм больше, то остаются пустые белые пространста, когда аккордеон свернут. Что я делаю не так? Благодарю за помощь.

    • @YanAgeenko
      @YanAgeenko  Год назад

      нужно автолейаутами всё делать

    • @ОлесяВяткина-ю4л
      @ОлесяВяткина-ю4л 6 месяцев назад

      Добрый день! У вас получилось разобраться как сделать, чтобы высота фрейма менялась? Столкнулась с такой же проблемой. После фрейма блоки с информацией ездят, а сам фрейм нет

  • @sergeyezhov2469
    @sergeyezhov2469 Год назад +2

    Поставил ролику дислайк, объясняю почему:
    1) Вы очень стесняетесь пользоваться autolayout. Зачем объединять title и иконку в группу? Если title станет длиннее, то в случае с autolayout текст переедет на вторую строку, а в вашем случае он скорее всего уедет направо за иконку. Или вы собираетесь каждой раскрывашке вручную задавать ширину и расстояние до иконки вместо того, чтобы один раз настроить это в панели справа?
    2) В продолжение первого пункта: если бы сделали autolayout для Frame 1 сразу, вы во-первых могли бы просто продублировать раскрывашку с помощью ctrl+d, и вам не пришлось бы тащить их мышкой вниз (вы в реальном дизайне так же таскаете повторяющиеся элементы?), а во-вторых вас бы тогда не удивило, что расстояние между раскрывашками остается прежним, когда они схлопываются;
    3) Это здорово, что вы показываете анимацию, однако если бы у вас блок с раскрывашками стоял рядом с другими блоками на реальном макете (т.е. под ним бы еще шел хотя бы Footer, а возможно еще и Final CTA и еще что-нибудь), то при нажатии на раскрывашку вы скорее всего наблюдали бы не плавную анимацию, а дергание за счет того, что блоку внезапно понадобилось увеличиться за счет изменившейся высоты. Поэтому имело смысл дополнительно показать, как этот блок выгляит рядом с другими (так и пример был бы живее).
    4) Это уже скорее докапывание, но все же выскажу: для столь небольшой операции это слишком длинное видео и очень медленная речь. Обратите внимание на видео Андрея Гаврилова из WayUp или Алексея Бычкова - возможно, это поможет вам улучшить качество ваших видео.

    • @Вацлав-н2ю
      @Вацлав-н2ю Месяц назад +1

      Добрый день. При раскрытие аккардеона в макете, на секунду перебрасывает на титульную страницу. На 4 блока вверх. Можете подсказать, куда смотреть? В AL блока где сам аккордеон, или...
      Спасибо.

  • @ВераАндрющенко-к2ю

    Как сделать, чтобы текст подтягивался, если auto layout не работает?

    • @YanAgeenko
      @YanAgeenko  Год назад +1

      Должен работать. Если не работает - значит что-то не так делаете

  • @NBYSUK
    @NBYSUK Год назад

  • @КудинВиталий
    @КудинВиталий 2 года назад

    У меня на 2:29 нет инструмента "Variant", где его взять?

    • @YanAgeenko
      @YanAgeenko  2 года назад +2

      что-то не так значит делаешь. Делай 1 в 1 как в уроке, по шагам

    • @КудинВиталий
      @КудинВиталий 2 года назад

      @@YanAgeenko Нашёл. Он был сверху, рядом с компонентом. Спасибо.

  • @belskayaolya
    @belskayaolya 2 года назад

    Здравствуйте, у меня уже при прототипировании во все ответы на вопросы в аккордеоне подтягивается ответ из мастер-компонента, хотя я везде текст поменяла. Как это исправить? Сейчас сойду с ума

    • @YanAgeenko
      @YanAgeenko  2 года назад

      Просто вручную поменять тексты

    • @belskayaolya
      @belskayaolya 2 года назад

      @@YanAgeenko я поменяла, конечно, но при визуализации все равно текст из мастер-компонента

  • @5Garaj
    @5Garaj 2 года назад

    Впервые слышу термин "аккордеон")
    Разве это не "бургер-меню"?)

    • @YanAgeenko
      @YanAgeenko  2 года назад +5

      Нет, бургер-меню это три полоски, по нажатию на которые открывается навигация

  • @ВоваСеменченко-к9б
    @ВоваСеменченко-к9б 2 года назад

    А разве не можно просто убрать текстовый блок во втором варианте? Или его нужно оставить для прототипа?