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

Подписаться 3,9 тыс.

Просмотров 26 тыс.

50% 1

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

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

7 мар 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 32

@dashafox8480 3 года назад

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

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

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

@user-mc5iq5dt1x 11 месяцев назад

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

@Alina_osia145 3 года назад

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

@user-bp8rq7dk9c 3 года назад

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

@Alina_osia145 3 года назад

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

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

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

@olgakononova3741 Год назад

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

@DariaSkyWalker 3 года назад

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

@yuger456 2 года назад

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

@anyablack2944 Месяц назад

Боже спасибо вы гений!!!!

@pinkpanther2349 5 месяцев назад

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

@user-br2cm1gj9y Год назад

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

@user-bc7fv5un6b Год назад

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

@hak1r181 2 года назад

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

@user-ho2cn6jp7l Год назад

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

@user-eu3hq2sl8w Месяц назад

А кто знает, как поменять тексты внутри других вариантов?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проще это как

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

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

@user-bp8rq7dk9c 3 года назад

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

@user-bp8rq7dk9c 3 года назад

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