Умная анимация в Фигме (Smart Animate)
Вторая часть видео о прототипировании и анимации в Фигме. В этот раз сконцентрируемся на новом функционале Smart Animate, позволяющем создавать довольно сложные анимированные прототипы.
Сделаем анимацию перелистывания карточек, сложный переход в списке, удаление элемента через свайп, раскрытие карточки в календаре и даже сымитируем загрузку приложения.
Файл с примерами - www.figma.com/file/xPUCIIfwHSNYWZ8LpZD6Y9/Prototyping-and-Animation-Public?node-id=0%3A1
Пікірлер: 144
боже, это лучший урок что я видел за последнее время! спасибо, подписался)))
Максим, ваш канал это просто кладезь знаний! Большое спасибо за труд :)
@disarto.digital
4 жыл бұрын
Спасибо. Рад, что контент оказался полезен 🙂
лучшего обучения про анимацию в фигме пока еще не встретил. Респект.
очень информативное и полезное видео. А главное всё по делу без лишних слов :) Отдельное спасибо за ссылку на файл!
Спасибо большое! Урок подготовлен и реализован гораздо лучше, чем у многих профессиональных педагогов.
Сколько же ты сил и знаний вкладываешь в свои видео... Я просто в восторге.. Это круче, чем какие-либо платные курсы на зарубежных платформах
Спасибо, тебе, за то что ты делаешь! ))))
Потрясающе! Огромное спасибо. Сложили все по полкам!
Фигма - очень умный инструмент. Спасибо , автор, ты хорошо обьснил работу анимации . Стоит рассказывать чуть более эмоционально, это улучшает запоминание материала и вас
Боже мой, спасибо Вам большое! Вы просто столько знаний даете абсолютно бесплатно, за которые многие требуют каких-то баснословных денег. Ааааа спасибо тысячу раз!!
Спасибо за урок, понятное и чёткое объяснение без воды
Спасибо огромное за ваши уроки! Это так бесценно 🙏
Очень полезное и интересное видео. Рад, что нашел Ваш канал. Однозначно лайк и подписка
Большое спасибо, видео 10 анимаций в фигме из 10, разжевал так, что даже школьники поймут. Молодец. Лайк и подписка, заслужил!))
@leonid2713
3 жыл бұрын
Даже школьники...
@leonid2713
3 жыл бұрын
@@iliakovalski683 Зачем употреблять слово школьник в данной ситуации? Школьник не может размышлять/учиться? Что значит указательное 'даже' в твоём предложении, почему ты не написал, например, так: 'даже анацефал поймёт'. Тогда было бы понятно, что ты не принижаешь чьи-либо умственные способности, а говоришь о том, что материал из урока лёгок в освоении.
@iliakovalski683
3 жыл бұрын
@@leonid2713 Возможно ты прав и если ты считаешь мои слова оскорбительными для себя или кого-то другого, то я извиняюсь и постараюсь больше так не писать. В данном случае я решил не использовать грубые слова по типу тех, что ты приводишь в пример, поэтому недолго думая написал первое пришедшее на ум. Изначально я не вкладывал в него негативного контекста, который ты написал , я понимаю, что фраза "даже школьники" звучит как-будто я их принижаю, но тут я скорее хочел подчеркнуть, что даже неопытный человек сможет понять) Лайк, за то, что подметил и написал об этом)
@saradanato
2 жыл бұрын
@@iliakovalski683 такой адекватный и добрый ответ🤍
Восторг!!! Спасибо за видео, очень помогли!!!
Спасибо за все эти приемы, очень полезно. Только есть нюанс. Теперь нет костылей, можно добавить два взаимодействия на один элемент. Что бы понять это у меня ушло примерно часа 3 попыток понять, "а почему не работает?"))))
Решил перейти на Figma. А тут такой контент! Для старта самое то! Спасибо! Лайк + подписка!
Вот это находка! Благодарю за урок!
твои видео бомбааа плюс с файликамииии. Продолжай в том же духе, спасибо большое за качественную работу
Спасибо! даже все мелкие подводные камни показали. очень полезно)
Супер! Спасибо тебе, очень понятная и ценная информация! 👍👍👍
Спасибо Вам большое! Очень информативное видео)
Супер видосы. Фирма становиться интереснее и интереснее
Смотрю в 2022 году, но все еще нужный и полезный урок, спасибо)
Супер! Долго искал имнно гайд в конце))
препод от бога! Прохожу курс в одной школе, но учусь у вас. Спасибо !
спасибо большое за материал,хорошо объясняете,очень приятно смотреть:)
Посмотрел первый урок и начинаю этот. Я в восторге
Спасибо за ваш канал, захожу в ютуб только ради таких видео)
Время идёт, фигма изменяется, урок устаревает. Скажем, в примере на 6:00 обратный переход на предыдущую карточку не работает, если в списке включен вертикальный скроллинг, потому что он конфликтует с функцией on drag. Поэтому во второй карточке нужно тащить стрелку обратного перехода не от #elements (в котором скролл), а от находящегося внутри него #Frame60. Или вот на 16:00 теперь не нужно добавлять никаких костылей, потому что появилась возможность добавить второй interaction на тот же блок - on drag стал умным и понимает, влево или вправо переходить.
@0xarsen
2 жыл бұрын
сейчас что первый совет не очень помогает, либо я не правильно делаю
Спасибо! Очень доходчиво обьясняешь!
очень круто, спасибо большое за видео!
Спасибо добрый человек, только благодаря этому видео наконец подучилось задуманное
Очень круто, спасибо :3
Спасибо тебе, добрій человек:) Понятно и доходчиво, все бы так объясняли, да еще и таким приятным голосом
Спасибо большое! Вы большой молодец!
Бомба 👍🏽🔥
Спасибо тебе, добрый человек.
Шикардос!
Максим, большое спасибо за видео! Супер полезно, круто что информация излагается поэтапно от простого к сложному, всё понятно доступным языком. Я собственно почему начал смотреть это видео, решил сделать тёмную тему для сайта компании, в которой работаю, хотя работаю я далеко не дизайнером, а аккаунт менеджером, мне не очень нравится эта должность, душа лежит к интерфейсам, и вот на майских я решил не тусоваться, а что-то предпринять для улучшения качества жизни и внутренней удовлетворённости. Конечно мне никто такого задания не давал, это я делаю абсолютно по собственной инициативе, надеюсь текущий дизайнер компании оценит анимацию, которой я научился в этом видео и предложит мне должность дизайнера, а с аккаунтингом я распрощаюсь, всем хорошего дня и отличного настроения!
Огромное спасибо за видео! Сто миллионов лайков автору!)
Сказать годный контент-ничего не сказать Спасибо)
Просто божественный контент!
Спасибо огромное за видео!
Спасибо большое. Хороший урок.
Класс! Спасибо большое
Здорово ❤❤❤ Спасибо!
Полезно. Спасибо.
спасибо огромное за крутой урок!
Самый полезный урок!
Спасибо, видео очень полезно)
спасибо за урок!
Спасибо, тебе хороший человек!
Восторг!
афигеть.круто!
Спасибо за оба видеоурока по прототипированию в Figma. Лайфхаки про костыли с прозрачными слоями - это полезно, как минимум с точки зрения знания что без костылей не обойтись при реализации некоторых сценариев.
@user-ez5xl1zb3e
Жыл бұрын
в фигме уже есть возможность присваивать несколько линков одному слою
Thank you, this was very helpful information. I did it simple and awhile.
Круттттттттоооо, спасибо большое пол часа и максимум знаний (Y)
Супер! Очень много узнал и сразу применил в макете. Большое спасибо! Думаю ты знаешь, что недавно вышла обнова - скролл к выбранным объектам. Было бы супер полезно узнать от тебя подробности новой фичи.
пушка! спасибо
Даже не знал, что в фигма так можно. Ахринеть
Класс!! Очень полезно
Благодарю
спасибо очень круто)
Класс, утащила в закладки
Спасибо! 🤗 Лайк и подписка)
Спасибо!!!
Круто!
Огоромное спасибо! Благодоря тебе я скоро смогу сделать приложение о котром уже долго думал, но не мог начать, так как именно этих знаний не хватало. На бумажных макетах уже давно утонул.
Повторил все виды анимаций с урока, также с первой части Очень увлекательно и ахуенно Открыл фигму с новой стороны:)
Пока что это самые лучшие уроки по фигме среди русскоязычных каналах.)
Спасибо!
я абсолютно влюблена в ваши уроки😍
Спасибо! Особенно за неочевидные мелочи.
У тебя очень классные видео
Спасибо за ваши уроки! Уже на неделю в них залип, очень доступно) Хотел спросить можно ли как-то экспортировать вместе с мокапом из экрана презентации? Обычный экспорт сохраняет только сам экран, а плагины не так хорошо прорисованы, как родные в экране презентации. Спасибо)
Делал в десктопе несколько слайдеров. Все экраны должны быть копиями первого (а уже потом иметь одинаковые имена), тогда сработала smart animate.
Блин, спасибо огромадное за совет, как сделать переход у карточек со скрытым слоем. Всю голову поломал, никак не мог нормально анимировать Onboarding Screens. Костыль конечно, но сейчас всё получилось!
20:38 можно без читов, выделяете текст tap to delete или иконку жбана и от них кидаете направляющую к след. экрану
Лучший
спс за файл
Ты лучший
Макс, спасибооооооооооооооооо
Приятные видео, спасибо! Подскажите пожалуйста, в конце видео есть фрагмент с hover на кнопке. В примере, меняем по сути весь frame на такой-же, но с измененной кнопкой. Но как быть если есть, например интернет-магазин, где хочется, чтобы на всех страницах сайта, все кнопки были hoover-абельные? Т.е. чтобы в Present было всё 1 в 1, как хочется чтобы сделал frontend-щик. Такое возможно? Заранее благодарен )
Af***ij content! Spasibo shto podelilsa!
Добрый день! Огромное спасибо за уроки! В предпоследнем уроке прямоугольник, который сократили по scale, и его элементы в значениях имеют дроби. Не будет ли это недостатком и как быть верстальщику?
Фигма оказывается не Фигня а оФигенна!
Спасибо за урок) Как ты поверул иконку по оси Z?
Здравствуйте. Как сделать, чтобы анимация появления текста/элемента осуществлялась автоматически при скроллинге вниз/вверх (без клика)?
Спасибо большое за урок ! Мне только не понятно стало как всё-таки делать анимацию на этот график круглый на 08:40 , там с уменьшением и прозрачностью всё понятно, а вот что вы поставили на интерекщионс и какие задали тригеры не понятно. Надеюсь кто-то понял и подскажет как сделал
может исправили уже но слайдеры из 16 минуты легко делаются нынче на изи без анимаций итд вроде. А вот как сделать что бы на 1 экране можно было выбрать несколько кнопок из списка ( больше 2) никто не в курсах (
Здравствуйте! можете подсказать как сделать всплывающие надписи по очереди в фирме в одном фрейме ?
Я в UX/UI дизайне чуть ли не полный 0. Хотел бы узнать как эту все тему с анимациями перенести например за Зиро блок или еще куда. Хочу сделать портфолио с использование смарт анимейта, но размещать его ссылкой на презентацию фигмы не вариант. Вобщем вопрос таков: куда весь этот анимационный прототайпинг пихать?
Спасибо огромное за видео, полузная информация! У меня вопрос : как сделать чтобы иконка перекручивалась вокруг своей оси (в концу видео с app loading) ?
@disarto.digital
3 жыл бұрын
Зажмите Alt (Win) и тяните за контейнер по горизонтали или вертикали. Alt отвечает за масштабирование относительно центра. Вам нужно "утянуть" иконку "в минус", чтоб по ширине она была точно такой же, но как бы отраженной с другой стороны. Smart Animate воспроизведет проделанное вами действие и развернет иконку вокруг своей оси.
@aleks3388
3 жыл бұрын
@@disarto.digital спасибо, разобралась :)
Спасибо за урок! Можно ли сохранить анимацию в видео прямо из программы?
@yuliamiu9530
4 жыл бұрын
Увидела, что есть видео про сохранение уже)
Спасибо большое за такие полезные видео! Можете, пожалуйства, объяснить, прототипирование и такого плана анимация это задача веб-дизанера или верстальщика?
@disarto.digital
3 жыл бұрын
Продумать все взаимодействия - это задача дизайнера. Задача верстальщика воплотить это наиболее оптимальным образом.
@alinaarakelian3763
3 жыл бұрын
@@disarto.digital поняла, спасибо
Спасибо большое. Информативно и доходчиво всё объяснил. Ты случайно не около Сан Франциско работаешь? P.S. Была бы рада получить консультацию по поводу требуемых скилов при приеме на работу. С меня кофе и плюшки.
@disarto.digital
4 жыл бұрын
Нет, я не около SF 🙂
Добрый день, подскажите как сделать ховер элементу при скроле так что бы когда элемент видно не полностью из за части футтера к примеру ховер не проявлял всю кнопку так как она вынесена за предел фрейма и сама является фреймом и получается наводишь на её край и он вылазит поверх все элементов
Скажите пожалуйста а работает ли данная анимация для десктоп прототипирования без выбора скина устройства (хочу анимировать скрол бокового меню) причём я сделал фрейм в котором хочу анимировать скрол
@disarto.digital
2 жыл бұрын
Конечно, для этого просто выберите в поле "Device" пункт "None" (вкладка Prototype). Чтоб увидеть эту опцию, нужно кликнуть на пустое пространство рабочей области. Т.е. не должен быть выбран ни один из объектов.
можешь выложить файл куда то еще ?) не грузит по ссылке чет (((