Smart animation in Figma
The second part of the video about prototyping and animation in Figma. This time we will focus on the new Smart Animate functionality that allows you to create fairly complex animated prototypes.
Let's do the animation of flipping cards, a complex transition in the list, deleting an element through the skype, opening a card in the calendar and even simulate the loading of the application.
An example Figma file - www.figma.com/file/xPUCIIfwHS...
Пікірлер: 144
боже, это лучший урок что я видел за последнее время! спасибо, подписался)))
очень информативное и полезное видео. А главное всё по делу без лишних слов :) Отдельное спасибо за ссылку на файл!
Потрясающе! Огромное спасибо. Сложили все по полкам!
Спасибо, тебе, за то что ты делаешь! ))))
Максим, ваш канал это просто кладезь знаний! Большое спасибо за труд :)
@disarto.digital
4 жыл бұрын
Спасибо. Рад, что контент оказался полезен 🙂
лучшего обучения про анимацию в фигме пока еще не встретил. Респект.
Спасибо огромное за ваши уроки! Это так бесценно 🙏
Сколько же ты сил и знаний вкладываешь в свои видео... Я просто в восторге.. Это круче, чем какие-либо платные курсы на зарубежных платформах
Очень полезное и интересное видео. Рад, что нашел Ваш канал. Однозначно лайк и подписка
Спасибо за урок, понятное и чёткое объяснение без воды
Спасибо большое! Урок подготовлен и реализован гораздо лучше, чем у многих профессиональных педагогов.
Решил перейти на Figma. А тут такой контент! Для старта самое то! Спасибо! Лайк + подписка!
твои видео бомбааа плюс с файликамииии. Продолжай в том же духе, спасибо большое за качественную работу
Фигма - очень умный инструмент. Спасибо , автор, ты хорошо обьснил работу анимации . Стоит рассказывать чуть более эмоционально, это улучшает запоминание материала и вас
Восторг!!! Спасибо за видео, очень помогли!!!
Супер! Спасибо тебе, очень понятная и ценная информация! 👍👍👍
Боже мой, спасибо Вам большое! Вы просто столько знаний даете абсолютно бесплатно, за которые многие требуют каких-то баснословных денег. Ааааа спасибо тысячу раз!!
Спасибо! даже все мелкие подводные камни показали. очень полезно)
Спасибо Вам большое! Очень информативное видео)
спасибо большое за материал,хорошо объясняете,очень приятно смотреть:)
Вот это находка! Благодарю за урок!
Супер видосы. Фирма становиться интереснее и интереснее
Спасибо тебе, добрій человек:) Понятно и доходчиво, все бы так объясняли, да еще и таким приятным голосом
Очень круто, спасибо :3
Спасибо! Очень доходчиво обьясняешь!
очень круто, спасибо большое за видео!
Супер! Долго искал имнно гайд в конце))
Спасибо за ваш канал, захожу в ютуб только ради таких видео)
Смотрю в 2022 году, но все еще нужный и полезный урок, спасибо)
Спасибо добрый человек, только благодаря этому видео наконец подучилось задуманное
Большое спасибо, видео 10 анимаций в фигме из 10, разжевал так, что даже школьники поймут. Молодец. Лайк и подписка, заслужил!))
@leonid2713
3 жыл бұрын
Даже школьники...
@leonid2713
3 жыл бұрын
@@iliakovalski683 Зачем употреблять слово школьник в данной ситуации? Школьник не может размышлять/учиться? Что значит указательное 'даже' в твоём предложении, почему ты не написал, например, так: 'даже анацефал поймёт'. Тогда было бы понятно, что ты не принижаешь чьи-либо умственные способности, а говоришь о том, что материал из урока лёгок в освоении.
@iliakovalski683
3 жыл бұрын
@@leonid2713 Возможно ты прав и если ты считаешь мои слова оскорбительными для себя или кого-то другого, то я извиняюсь и постараюсь больше так не писать. В данном случае я решил не использовать грубые слова по типу тех, что ты приводишь в пример, поэтому недолго думая написал первое пришедшее на ум. Изначально я не вкладывал в него негативного контекста, который ты написал , я понимаю, что фраза "даже школьники" звучит как-будто я их принижаю, но тут я скорее хочел подчеркнуть, что даже неопытный человек сможет понять) Лайк, за то, что подметил и написал об этом)
@saradanato
2 жыл бұрын
@@iliakovalski683 такой адекватный и добрый ответ🤍
препод от бога! Прохожу курс в одной школе, но учусь у вас. Спасибо !
Посмотрел первый урок и начинаю этот. Я в восторге
Спасибо большое! Вы большой молодец!
Максим, большое спасибо за видео! Супер полезно, круто что информация излагается поэтапно от простого к сложному, всё понятно доступным языком. Я собственно почему начал смотреть это видео, решил сделать тёмную тему для сайта компании, в которой работаю, хотя работаю я далеко не дизайнером, а аккаунт менеджером, мне не очень нравится эта должность, душа лежит к интерфейсам, и вот на майских я решил не тусоваться, а что-то предпринять для улучшения качества жизни и внутренней удовлетворённости. Конечно мне никто такого задания не давал, это я делаю абсолютно по собственной инициативе, надеюсь текущий дизайнер компании оценит анимацию, которой я научился в этом видео и предложит мне должность дизайнера, а с аккаунтингом я распрощаюсь, всем хорошего дня и отличного настроения!
Сказать годный контент-ничего не сказать Спасибо)
Время идёт, фигма изменяется, урок устаревает. Скажем, в примере на 6:00 обратный переход на предыдущую карточку не работает, если в списке включен вертикальный скроллинг, потому что он конфликтует с функцией on drag. Поэтому во второй карточке нужно тащить стрелку обратного перехода не от #elements (в котором скролл), а от находящегося внутри него #Frame60. Или вот на 16:00 теперь не нужно добавлять никаких костылей, потому что появилась возможность добавить второй interaction на тот же блок - on drag стал умным и понимает, влево или вправо переходить.
@0xarsen
2 жыл бұрын
сейчас что первый совет не очень помогает, либо я не правильно делаю
Огромное спасибо за видео! Сто миллионов лайков автору!)
Спасибо огромное за видео!
Бомба 👍🏽🔥
Спасибо тебе, добрый человек.
Класс! Спасибо большое
Шикардос!
Просто божественный контент!
Спасибо большое. Хороший урок.
Спасибо за оба видеоурока по прототипированию в Figma. Лайфхаки про костыли с прозрачными слоями - это полезно, как минимум с точки зрения знания что без костылей не обойтись при реализации некоторых сценариев.
@user-ez5xl1zb3e
Жыл бұрын
в фигме уже есть возможность присваивать несколько линков одному слою
Самый полезный урок!
Здорово ❤❤❤ Спасибо!
Полезно. Спасибо.
спасибо огромное за крутой урок!
Круттттттттоооо, спасибо большое пол часа и максимум знаний (Y)
спасибо за урок!
Спасибо, тебе хороший человек!
Спасибо, видео очень полезно)
афигеть.круто!
Восторг!
Спасибо за все эти приемы, очень полезно. Только есть нюанс. Теперь нет костылей, можно добавить два взаимодействия на один элемент. Что бы понять это у меня ушло примерно часа 3 попыток понять, "а почему не работает?"))))
пушка! спасибо
спасибо очень круто)
Благодарю
Класс!! Очень полезно
Супер! Очень много узнал и сразу применил в макете. Большое спасибо! Думаю ты знаешь, что недавно вышла обнова - скролл к выбранным объектам. Было бы супер полезно узнать от тебя подробности новой фичи.
я абсолютно влюблена в ваши уроки😍
Круто!
Спасибо!
Спасибо!!!
Спасибо! 🤗 Лайк и подписка)
Огоромное спасибо! Благодоря тебе я скоро смогу сделать приложение о котром уже долго думал, но не мог начать, так как именно этих знаний не хватало. На бумажных макетах уже давно утонул.
Повторил все виды анимаций с урока, также с первой части Очень увлекательно и ахуенно Открыл фигму с новой стороны:)
У тебя очень классные видео
Спасибо! Особенно за неочевидные мелочи.
Thank you, this was very helpful information. I did it simple and awhile.
Даже не знал, что в фигма так можно. Ахринеть
спс за файл
Лучший
Ты лучший
Класс, утащила в закладки
Пока что это самые лучшие уроки по фигме среди русскоязычных каналах.)
Блин, спасибо огромадное за совет, как сделать переход у карточек со скрытым слоем. Всю голову поломал, никак не мог нормально анимировать Onboarding Screens. Костыль конечно, но сейчас всё получилось!
Af***ij content! Spasibo shto podelilsa!
20:38 можно без читов, выделяете текст tap to delete или иконку жбана и от них кидаете направляющую к след. экрану
Делал в десктопе несколько слайдеров. Все экраны должны быть копиями первого (а уже потом иметь одинаковые имена), тогда сработала smart animate.
Спасибо за ваши уроки! Уже на неделю в них залип, очень доступно) Хотел спросить можно ли как-то экспортировать вместе с мокапом из экрана презентации? Обычный экспорт сохраняет только сам экран, а плагины не так хорошо прорисованы, как родные в экране презентации. Спасибо)
Макс, спасибооооооооооооооооо
Приятные видео, спасибо! Подскажите пожалуйста, в конце видео есть фрагмент с hover на кнопке. В примере, меняем по сути весь frame на такой-же, но с измененной кнопкой. Но как быть если есть, например интернет-магазин, где хочется, чтобы на всех страницах сайта, все кнопки были hoover-абельные? Т.е. чтобы в Present было всё 1 в 1, как хочется чтобы сделал frontend-щик. Такое возможно? Заранее благодарен )
Добрый день! Огромное спасибо за уроки! В предпоследнем уроке прямоугольник, который сократили по scale, и его элементы в значениях имеют дроби. Не будет ли это недостатком и как быть верстальщику?
Спасибо за урок) Как ты поверул иконку по оси Z?
Здравствуйте. Как сделать, чтобы анимация появления текста/элемента осуществлялась автоматически при скроллинге вниз/вверх (без клика)?
Спасибо большое. Информативно и доходчиво всё объяснил. Ты случайно не около Сан Франциско работаешь? P.S. Была бы рада получить консультацию по поводу требуемых скилов при приеме на работу. С меня кофе и плюшки.
@disarto.digital
4 жыл бұрын
Нет, я не около SF 🙂
Фигма оказывается не Фигня а оФигенна!
Спасибо за урок! Можно ли сохранить анимацию в видео прямо из программы?
@yuliamiu9530
4 жыл бұрын
Увидела, что есть видео про сохранение уже)
Спасибо большое за такие полезные видео! Можете, пожалуйства, объяснить, прототипирование и такого плана анимация это задача веб-дизанера или верстальщика?
@disarto.digital
3 жыл бұрын
Продумать все взаимодействия - это задача дизайнера. Задача верстальщика воплотить это наиболее оптимальным образом.
@alinaarakelian3763
3 жыл бұрын
@@disarto.digital поняла, спасибо
Спасибо огромное за видео, полузная информация! У меня вопрос : как сделать чтобы иконка перекручивалась вокруг своей оси (в концу видео с app loading) ?
@disarto.digital
3 жыл бұрын
Зажмите Alt (Win) и тяните за контейнер по горизонтали или вертикали. Alt отвечает за масштабирование относительно центра. Вам нужно "утянуть" иконку "в минус", чтоб по ширине она была точно такой же, но как бы отраженной с другой стороны. Smart Animate воспроизведет проделанное вами действие и развернет иконку вокруг своей оси.
@aleks3388
3 жыл бұрын
@@disarto.digital спасибо, разобралась :)
Я в UX/UI дизайне чуть ли не полный 0. Хотел бы узнать как эту все тему с анимациями перенести например за Зиро блок или еще куда. Хочу сделать портфолио с использование смарт анимейта, но размещать его ссылкой на презентацию фигмы не вариант. Вобщем вопрос таков: куда весь этот анимационный прототайпинг пихать?
может исправили уже но слайдеры из 16 минуты легко делаются нынче на изи без анимаций итд вроде. А вот как сделать что бы на 1 экране можно было выбрать несколько кнопок из списка ( больше 2) никто не в курсах (
Добрый день, подскажите как сделать ховер элементу при скроле так что бы когда элемент видно не полностью из за части футтера к примеру ховер не проявлял всю кнопку так как она вынесена за предел фрейма и сама является фреймом и получается наводишь на её край и он вылазит поверх все элементов
Спасибо большое за урок ! Мне только не понятно стало как всё-таки делать анимацию на этот график круглый на 08:40 , там с уменьшением и прозрачностью всё понятно, а вот что вы поставили на интерекщионс и какие задали тригеры не понятно. Надеюсь кто-то понял и подскажет как сделал
Здравствуйте! можете подсказать как сделать всплывающие надписи по очереди в фирме в одном фрейме ?
Чума!
Скажите пожалуйста а работает ли данная анимация для десктоп прототипирования без выбора скина устройства (хочу анимировать скрол бокового меню) причём я сделал фрейм в котором хочу анимировать скрол
@disarto.digital
2 жыл бұрын
Конечно, для этого просто выберите в поле "Device" пункт "None" (вкладка Prototype). Чтоб увидеть эту опцию, нужно кликнуть на пустое пространство рабочей области. Т.е. не должен быть выбран ни один из объектов.