Тёмный

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

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

Исходник: www.figma.com/...
Хочешь больше полезностей о веб-дизайне и карьере в 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

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

 

11 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 42   
@kendzerskiy
@kendzerskiy Год назад
Спасибо. полезный урок. А как теперь встроить это на сайт что бы не перетаскивать всю эту конструкцию на макет?
@АраСискевич
@АраСискевич 2 года назад
Спасибо вам огромное за урок! Еще плаваю в настройках анимации, но в этом уроке все получилось благодаря вашим четким и понятным объяснениям!
@ДенисМаличенко-ю3е
Ян, сделайте пожалуйста урок, где кнопка постоянно переливается разным цветом)
@Midi25
@Midi25 Год назад
вы в исходнике не открыли возможность посмотреть настроенные связи анимации. также вы не упомянули, что при дальнейшем копировании фреймов все они будут уже с настроенной для первых 4 фреймов анимацией. новичок тут просто ногу сломит. ему придется удалять неправильные связи и потратит он на урок не 20 минут а гораздо больше времени чем идёт это видео. Это же УРОК. почему дальше ученик должен догадываться сам, почему урок не показан от начала до конца? Почему использованы эмоционально-окрашенные примеры создающие путаницу и пестроту, тогда как изображения цифр 1-2-3-4-5 были бы нагляднее? чье время вы сэкономили - ученическое? Нет, своё.
@ВалерияРучина-д6г
Слушай, а если нужно чтоб данный эффект был только на половину слайда? Ну то есть у меня лендинг и там правая часть это иконки плывущие а левая это собственно название и навигация боковая. Тогда как всю эту супер систему вставить в один лендинг 😅
@ВалерияФрыкина
Здравствуйте, подскажите, как быть: делаю так по перелистыванию карточек, столкнулась с проблемой что при нажатии на кнопку, перекидывает на начало ленда, не могу понять как исправить. Карточки компоненты из UI кита.
@CIZINEC2021
@CIZINEC2021 5 месяцев назад
Супер. Ян, а можно при создании карточки использовать фрейм, а не прямоугольник?
@YanAgeenko
@YanAgeenko 5 месяцев назад
Можно
@janejane4774
@janejane4774 Год назад
Спасибо большое! Очень помогло😌
@ved.veronika
@ved.veronika Год назад
почему-то когда нажимаю просмотреть прототип, то там видно только сам фрейм (то есть один лист) без элементов, вообще пусто. в слоях все проверяла, и под фреймом элементы ставила, и над фреймом - ничего нет (уже на самом первом этапе на 11:40)
@polinabardina990
@polinabardina990 Год назад
классный и полезный контент!!! спасибо за вашу работу
@ИльнурЮсупов-ы2ш
Делаю все как на видео, только вместо перехода справа на середину, просто плавно меняется само изображение
@YanAgeenko
@YanAgeenko Год назад
что-то значит не совсем так делаете. Надо перепроверять
@no_more84
@no_more84 Год назад
Вряд ли ещё актуально, но сам наступил на те же грабли. В итоге понял, что дело в названии фреймов или групп элементов, которые должны сдвигаться. У меня они были все с одним названием, а чтобы работало, как задумано, они должны отличаться в рамках одного слайда, но совпадать в разных. То есть на слайде 1, например, должны быть элементы 1, 2, 3, 4, 5; и на втором слайде они должны называться так же, тогда эффект Smart Animate будет работать должным образом, так как Figma будет понимать, как должны сдвигаться элементы. Надеюсь, кому-то пригодится.
@ДианаГречко-л8й
@ДианаГречко-л8й 9 месяцев назад
@@no_more84 привет, если у тебя получилось, не мог бы ты мне помочь, не понимаю что не так сделала
@no_more84
@no_more84 9 месяцев назад
@@ДианаГречко-л8й скинь ссылку на свой проект, попробую посмотреть.
@xMOGG
@xMOGG Год назад
Здравствуйте, у меня первые три анимации работают с эффектом движения, а остальные с эффектом появления(Хотя настройки везде одинаковые). Не могу разобраться почему?
@mikeseed
@mikeseed Год назад
Проверьте все ли карточки во фрейме находится
@Adelya779
@Adelya779 Год назад
Я смогу это перенести в Тильду будет ли там это работать ведь я хочу что бы и на сайте работала анимация?скажите пожалуйста
@Луна-ъ5о
@Луна-ъ5о 9 месяцев назад
А как теперь такой блок перенести в таплинк? Чтобы также карусель осталась?
@escaperssoft4529
@escaperssoft4529 9 месяцев назад
ты узнал как?
@MarishkaaaM
@MarishkaaaM Год назад
Здравствуйте. Скажите пожалуйста, как перенести такую карусель в тильду, это возможно?
@vadimtrick4959
@vadimtrick4959 11 месяцев назад
Подскажите пожалуйста, как интегрировать слайдер в основной фрейм к другим элементам на главной странице? или это только отдельно возможно, ?
@YanAgeenko
@YanAgeenko 11 месяцев назад
Записал видеоинструкцию: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qEQEEakshkg.html
@venumpubgg
@venumpubgg Год назад
А я вообще не могу боковые во фрейм затянуть... 😢
@imperiya.finance
@imperiya.finance Год назад
Здравствуйте! Помогите новичку. Как сделать движение туда-сюда для каждой отдельной карточки я понял. Как все итерации соеденить в единый цикл? Анимация прекращается после первой итерации. И дальше не идет. У меня 6 карточек. Все сделал по отдельности по принципу первой. Как их соеденить в общую карусель?
@Midi25
@Midi25 Год назад
идите спросите у Теплова или Бычкова, они более профессиональные учителя и уважают свою аудиторию.
@ДианаГречко-л8й
@ДианаГречко-л8й 9 месяцев назад
может кто то помочь, у кого получилось. не понимаю что не так сделала
@Ciklopp
@Ciklopp 2 года назад
Зачем переход от фрейм 2 к фрейм 4? Почему нельзя от 1 к 4 сразу?
@YanAgeenko
@YanAgeenko 2 года назад
потому что без этих переходов не получится такая красивая анимация
@ДианаМазуренко-н2б
Здравствуйте. То есть если мне нужно сделать дизайн сайта и допустим будет блок с такими переходами (10 карточек ) Мне для верстальщика нужно все 10 карточек анимировать ? Или можно несколько карточек просто для демонстрации как это должно выглядеть ?
@YanAgeenko
@YanAgeenko 2 года назад
Как договоришься с верстальщиком :)
@maximvostrikov2457
@maximvostrikov2457 2 года назад
🤣
@lv--ak3310
@lv--ak3310 Год назад
Хз актуально тебе ещё или нет. Тут уже какой у тебя заказчик. Логично было бы просто сделать пример в пару карточек и всё. Чтобы не тратить время в пустую
@Roman-p7o
@Roman-p7o 10 месяцев назад
да ребята, вы всё правильно поняли. Поразбиравшись в этой куче дерьма которую сюда отсыпал автор часов 6 и сравнив банальную анимацию которую можете сделать все вы и тот бред который он оставил в шапке ролика, я пришёл к выводу что получается одно и тоже. Каких либо отличий 0. Я не думаю что сам автор канала в этом разбирался, а просто взял материал из какого-то левого ресурса и решил впихнуть его в свой ролик и даже не стал заморачиваться над тем чтобы эту кучу го*на объяснить, просто закинул проект (который он явно откуда-то скопировал) себе в шапку и нате, хавайте. Это видно хотя бы потому, что в исходнике используются совершенно не те шрифты и прочие атрибуты, которые автор показывал в ролике.
@maximvostrikov2457
@maximvostrikov2457 2 года назад
Чувак ну если ты знаешь горячие клавиши пользуйся ими и параллельно объясняй, а так кажется что в фигме не бум бум
@srn_off
@srn_off Год назад
это видео прям для новичков которые не шарят за горячие. мне понравилось
@TheSidhan
@TheSidhan Год назад
Человек, что у тебя в душе творится, если тебе нравятся такие картинки?.. Вопрос риторический, можно не отвечать.
@YanAgeenko
@YanAgeenko Год назад
А что не так с картинками?
@Midi25
@Midi25 Год назад
@@YanAgeenko просто неприятно смотреть на них. ну разве что кроме классического комиксового джокера образца 1992
@boredvlD
@boredvlD Год назад
​@@Midi25 89
@Midi25
@Midi25 Год назад
@@boredvlD точно, 1989. В 92-м уже Пингвин был.
Далее
ДИАНА в ТАНЦЕ #дистори
00:14
Просмотров 220 тыс.
Обыкновенное чудо
00:48
Просмотров 834 тыс.
Create Any Carousel in Figma (Beginner Tutorial)
10:01
Просмотров 132 тыс.
How to design Automatic Carousel/ Slider in @Figma
8:39
18 Hero Section Designs You Can Steal
11:45
Просмотров 691 тыс.
Smart animation in Figma
36:25
Просмотров 129 тыс.