Auto layout в Figma | Рисуем раскрывающийся список [Figma уроки]

Поделиться
HTML-код
  • Опубликовано: 7 мар 2021
  • 🔥 Не забудьте скачать мою книгу «от Курьера до Дизайнера интерфейсов»
    disk.yandex.ru/i/NRKQQjVT-dqsZg
    В ней я рассказываю свою историю, как мне удалось стать дизайнером с полного нуля и как бы я действовал сегодня, если бы начинал все с «чистого листа».
    👇 Присоединяйтесь
    Канал в Телеграм: t.me/bygeorgytim
    В этом уроке я покажу вам как сделать адаптивную карточку отзыва через auto layout в фигме.
    Для тех, кто не в курсе, фигма (figma) - это графический редактор, предназначенный для разработки дизайна различных интерфейсов (от простых сайтов, до сложных проектов). Данное видео подойдет для тех из вас, кто хочет освоить веб дизайн с нуля.
    Подписывайтесь на канал, здесь я бесплатно выкладываю figma уроки про web design и ux ui дизайн, которые помогут вам прокачать свои скилы в дизайне.

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

  • @dashafox8480
    @dashafox8480 2 года назад +17

    А как прототипировать этот список?

  • @user-mc5iq5dt1x
    @user-mc5iq5dt1x 9 месяцев назад +4

    Почему по итогу не показали как делать анимацию выпадающего списка?(

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

    Георгий, спасибо за классный урок! Отдельное спасибо за alt h, alt v.

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

    Спасибо большое, пошла повторять в своем дизайне

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

    А как на прототипе это выглядит? Чот у меня на примере всё работает, а в проект засунул и на прототипе не работает. Где-то что-то упустил. Ломаю голову, но хочу разобраться ((

  • @DariaSkyWalker
    @DariaSkyWalker 3 года назад +5

    Спасибо большое за полезный урок) авто лейаут оказался весьма функциональным инструментом) тоже проделала несколько весь маршрут.
    А правильно же понимаю, что для каждого пункта списка нужно сделать свой дефолтный и открытый вариант (это можно сделать дублем от этой модели, останется только изменить текст. И для каждого пункта правильно оформить отдельный блок=Items 1,2 и т.д?)

  • @MusicFlowDaily
    @MusicFlowDaily 3 года назад

    Благодарю за урок! :)
    Есть один вопрос, как сделать так чтобы в приложении при нажатии и "удержании" открывалось меню? (и оставалось открытым), и чтобы по этой же кнопке при обычном клике можно было перейти на другую страницу.
    Переход на другую страницу сделать легко, а вот добавить этой кнопке удержание никак не получается..

  • @pinkpanther2349
    @pinkpanther2349 2 месяца назад

    👍👍👍 Спасибо большое!

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

    Спасибо за видео

  • @user-ho2cn6jp7l
    @user-ho2cn6jp7l Год назад +1

    Спасибо!!!!!

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

    Сейчас вместо Variant стоит Properties, и оно сразу не дублируется при нажатии Variant, самому вообще не катит делать дубликат, при тесте "открытый" вариант вертикально поворачивается. Не актуально уже походу.

  • @alinao9187
    @alinao9187 3 года назад +4

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

    • @user-bp8rq7dk9c
      @user-bp8rq7dk9c  3 года назад +2

      Если научитесь пользоваться авто лейаутами, то значительно упростите себе работу)

    • @alinao9187
      @alinao9187 3 года назад

      @@user-bp8rq7dk9c Да, я понимаю всю их важность и что без навыков их использования далеко не уедешь))

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

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

  • @nikitravel777
    @nikitravel777 4 месяца назад

    А как в прототипе сделать так, чтобы предыдущая ссылка закрывалась автоматически?

  • @user-br2cm1gj9y
    @user-br2cm1gj9y Год назад +2

    Почему нет строчки resaiding? Что нужно сделать чтобы появилась?

    • @user-bc7fv5un6b
      @user-bc7fv5un6b Год назад +1

      Если у вас макбук, то он оказывается стоит в правом верхнем углу вместе с параметрами контейнера, Hug и Hug , когда нажимаете выходят варианты

  • @user-bp8rq7dk9c
    @user-bp8rq7dk9c  2 года назад +1

    🔥 Бесплатная книга «от Курьера до Дизайнера интерфейсов». Моя история, как я стал дизайнером.
    disk.yandex.ru/i/NRKQQjVT-dqsZg
    Поддержать канал - boosty.to/georgytim
    Телеграм - t.me/bygeorgytim

  • @user-lo2dz2sr8x
    @user-lo2dz2sr8x 2 года назад

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

    • @user-lo2dz2sr8x
      @user-lo2dz2sr8x 2 года назад

      чтобы список открывался при нажатии кнопки

    • @vadimtrick4959
      @vadimtrick4959 7 месяцев назад

      Добавьте в меню prototype действия для элементов, в этом видео всё происходит только в меню design

  • @oonahart8628
    @oonahart8628 7 месяцев назад

    Не, ничего не вышло. Как только нажимаешь fill container, все сдвигается

  • @user-mb5bf3kp7u
    @user-mb5bf3kp7u 3 года назад +3

    Проще так нарисовать, пока будешь эти настройки выставлять кукуха съедит, еще какие-нибудь фигню пропустишь или не то значение в ведёшь вообще запутаться можно и так пройдет 2 часа с этим списком, мне проще так и быстрее

    • @notvesh5102
      @notvesh5102 3 года назад

      Проще это как

    • @user-mb5bf3kp7u
      @user-mb5bf3kp7u 3 года назад +1

      @@notvesh5102 это просто сделать этот список без этого auto layota просто нарисовать и все

    • @user-bp8rq7dk9c
      @user-bp8rq7dk9c  3 года назад +22

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

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

    почему никто из блогеров не показывает как выглядит работа в деле, сложно что ли ?!