🧨 Figma. Анимация в GIF для прототипа. Плагины. [Фигма уроки]
Вставка
- Опубліковано 16 лис 2024
- Анимация в Фигма. В этом Фигма-уроке сделаем анимацию ввода пароля, кнопки, индикатора загрузки. Без использования AE, помощью плагина Figmotion.
#figma #фигма #вебдизайн #ui #kits #plugins
ВАЖНОЕ:
Обзор всех 111 плагинов:
• 🧨 Figma. Все плагины Ф...
🧰 Уроки Figma на русском.
Фигма - это бесплатная онлайн программа для дизайна web и UI. Приложения для Windows, Mac OS, Android (Material design) и iOS. Программу можно скачать на сайте www.figma.com. Торрент не нужен! ))
• Как сделать в Фигме свой первый сайт.
• Как использовать сетки и направляющие в вашем проекте.
• Что такое компоненты и фреймы в Фигме.
• Самые интересные плагины (plugins) Фигмы.
• Горячие клавиши для Windows и Mac OS.
• Анимация, шрифты (Google Fonts) и иконки.
• Как создать свои UI Kit и шаблоны (templates).
• Сравнение с Sketch и Adobe XD.
Потихоньку всё сложится в курс по дизайну в Figma.
-----
👍 Поддержать канал: / zendesigner
![Уроки Figma Auto Layout. Полное руководство по автолейаут. [Фигма уроки]](http://i.ytimg.com/vi/R4Wq-YVWEvc/mqdefault.jpg)
Выяснили с подписчиком. Автор плагина Figmotion что то изменил и пример с вводом пароля из тутора больше не работает.
здравствуйте, у меня такая проблема, анимация текста работает, но печать текста начинается с центра и потом уже перемещается в начало фрейма. Я уже 5 раз все заново переделал и все равно такая проблема
Да. Эта проблема появилась после обновления плагина разработчиком. К сожалению. Я написал об этом в первом комментарии.
Виктор Теплов спасибо за ответ
Все работает! Только что повторил. Нужно не забыть выставить привязку anchor point
@@ladfloss там нужно выставить привязку относительно левого края. В редактировании точки, там где вводим значения в самом верху нужно нажать на левый квадратик. По умолчанию выбран центр. (аналогично anchor point в After Effects)
Да как до такого вообще можно додуматься! 👏 это шикарно, спасибо!
Классно и просто рассказано на примере, что такое простая гифка и как ее легко сделать в Фигме спасибо!
Лайк уже только за то, что числительные правильно просклонял!
Бог пикселей и фрейм материи!!! как же ты мне помог!
Я ЭТО ВИДЕО ИСКАЛ ВЕСЬ ДЕНЬ. СПАСИБО ТЕБЕ!!!!
Спасибо Виктор!
Щикарна! Спасибо, отличное видео!)
Благодарю
Как всегда просто великолепно!
Спасибо, приятно )
Вот спасибо! Разобралась наконец-то)🌼
Там что-то обновилось в плагине. Я не смотрел новую версию.
Шикаааарно))
А ты то какими судьбами? Что тебе до Фигмы то ))
Подписка однозначно!
Действительно шикарно! Спасибо!
Супер! Спасибо большое!
Спасибо
Круто, отличное объяснение
Спасибо. Мне важна ваша реакия.
классно! спасибо!
Годнота!
Спасибо на добром слове! )
Крутяк!!!!
Да лучше гифки в другом софте делать. Или даже в Фигме сделать коллекцию гифок и потом быстро вставлять при надобности.
как заанимировать лого на прототипе, если нужна прозрачность, потому что лого поверх черного фона?
Bozhestvenno
POBEDONOSEC blagodaryu )
как фрейм заключили еще раз во фрейм?
Не работат плагин как Вашем руководстве(( Нет возможности выбрать фрейм для создания для него анимации.
Виктор, а как у вас так ловко гиф ресетится и играет снова с первого фрейма при повторному обращению к нему? :)
Я уже всё перепробовал -- гиф (с впечатываемым текстом) проигрывается ровно один раз. Затем, при повторном обращении к оверлею, гиф появляется в уже статичном виде, на последнем его фрейме.
Рестарт презентации через R не помогает, хоть лопни.
Помогает лишь полный её перезапуск (закрытие крестиком и запуск снова).
Но ровно на один раз, конечно. Далее повторяется то же самое -- гиф упорно показывается в статичном, уже-проигравшем виде.
Гиф вывожу по схеме AE -> PS -> save as GIF.
С опцией loop, без опции loop -- один фиг.
вообще у меня там вроде нет повторного обращения. Последовательно проигрывается всё и потом нужно рестарт делать всему прототипу. Но если я правильно понял ваш вопрос, можно подменять оверлей с гифом на статичную картинку и потом опять выводить оверлей по необходимости.
Как сделать разорванный круг с обводкой?
спасибо а как потом скачать этот файл?
🔥🔥🔥
☺️☺️☺️
Приветствие и музыка в начале огонь :-) Будешь моим Гуру ?
Eugen Eugen большинство гуру или обманщики, или глупцы. Врать я не люблю 😀
@@zen-designer я вижу всех гуру на сквозь. Ты истинный гуру по Figme! Возьми меня с собой в Ашрам UX/UI. Я раньше был из секты Vendor side - Product Owner, хочу сменить веру :-)
На Алтарь обучения я положу заказы от западных клиентов, блуждающих в бездне невежества :-)
@@EugenBonn ) я почти не проповедую UX/UI. Только приёмы по работе с софтом. Тебе нужно искать другого гуру )
В команде мы покорим Нирвану! Боги Индии и Тибета благоволят нам :-)
Добрый вечер! Расскажите пожалуйста, как сделать индикатор загрузки
Можно просто анимированный GIF поставить в прототип.
у пароля поставила left и scale,но как только в плагине поставлю первую точку, весь текст становится вертикальным по 1ой букве, подскажите что делать?) спасибо
к сожалению автор Figmotion несколько раз что-то менял в плагине и не всё теперь работает так, как в видео. Сейчас у меня нет возможности проверить что конкретно не работает (
Будьте добры ссылку на телеграмм?
t.me/figmachat
Спасибо за уроки!
Есть вопрос касаемый асимметричности (Figma):
При работе очень часто сталкиваюсь с проблемой разных расстояний от объекта.
Приведу пример, отступы от текста до краев прямоульника слева и справа отличаются на один пиксель. Бывает, из-за этого приходится переделывать пол работы, так как заказчик решил изменить текст блока.
Как можно данную проблему пофиксить?
Благодарю за ответ!
Не очень понятна ситуация. Используйте фиксированный текстовый блок, пользуйтесь компонентами, можно настраивать гриды (линейки) для отдельных фреймов. Настраивайте привязки.
@@zen-designer асимметрия часто встречается в моих работах (при измерении со одной стороны на 1 пикс. больше).
Не знаю, нормально ли это, поэтому решил спросить.
@@antonzhuravka Ну тут нужно понять откуда она берётся. Если следить за размерами и ставить нужные привязки, всё работает четко. Может что-то поехать при изменении размеров фрейма с привязанными внутри сущностями. Это происходит из-за того, что Фигма округляет полупиксели. За этим нужно следить.
@@antonzhuravka И конечно это не ассиметрия. Это халатность ) Нужно просто быть внимательнее и чаще поглядывать на цифры. 1 пиксель может стать большой проблемой.
Звуки в прототипирования это монтаж?)или я чето упустил?
Это творческий приём 😁 Моего голоса тоже нет когда вы дизайнете. К счастью 😂
а у меня одного, фрейм с текстом гуляет как хочет и набор начинается не слева а ближе к центру?
Нужно проверить привязки.
@@zen-designer в смысле констрэйнс ? Сейчас проверю
@@zen-designer у фрейма текст привязка слева и сверху у самого текста также. Но при анимации фрейм текс съезжает влево
Кирилл Морозов спасибо за звоночек. Действительно не работает больше. Закрепил комментарий.
@@firestarter614 надо установить left и scale
Viktor skaji a mojno li exportirovati gifki iz figmi obratno v komp??
GIF сделанные с помощью Figmotion выгружаются на их сервер. Тут-то их и можно сохранить на комп.
@@zen-designer sposib
Таким же образом можно сделать в плагие Motion!
Виктор, подскажите, сколько вы уже в Фигме работаете?
Daria Z в Фигме не очень долго. Может год. Долго приглядывался к ней, работая в Sketch. В котором я почти с сотворения (Скетча).
@@zen-designer А Скетче с какого года, получается?) Просто интересно) И еще вопрос, как запомнить все эти названия действий, которые вы называли в процессе видео?)
@@zen-designer И какой инструмент вам нравиться больше, Фигма или Скетч?
@@darz56 Согласно википедии Скетч вышел в 2010. Скажем с 2011 я с ним знаком. Ну а вообще в профессии где-то с 1995 года ) Песок уже сыпется. А по поводу как запоминать -- нужно не запоминать, а понимать. Начать с учебника по Фигме, читать статьи на тему, вращаться в среде )
@@darz56 В Скетче огромное преимущество (для меня) в оффлайн режиме. Зато подход к стилям и символам/компонентам удобнее в Фигме. Ну и кроссплатформенность Фигмы играет роль.
Скажите пожалуйста как сохранить с фигма созданную анимацию, чтоб допустим вставить ее в какой то макет?
либо сохранить в gif, как в уроке, либо запись экрана сторонними программами.
Ну gif можно записать только если используешь плагин, а если нет то при экспорте нельзя выбрать gif
@@ТетянаКалмикова-м2я именно так. Если не плагин, то только запись экрана. Например с помощью ShareX на винде или Kap на Mac OS.
Как вот из прототипа в фигме сделать запись? Спасибо за ответ.
@@ТетянаКалмикова-м2я Из прототипа только записью экрана сторонними программами. См. предыдущий ответ.
Супер👍🔥 спасибо👏🏻🙏 А как с вами можно связаться по индивидуальному обучению?
Спасибо. К сожалению не практикую индивидуальные занятия. Заходите в телеграм-чат по Figma -- там всегда помогут.
можно ссылку на чат в ТГ?
t.me/figmachat
можно ссылку на чат в телеграм?
Конечно. t.me/figmachat
а раньше во флеше все делали
я так полягаю флеш мертв?
Давно. Пусть покоится с миром 😂
@@zen-designer жаль что нет хорошего пайплайна на векторах - будь добр делай гифы
а гифы же 256 цветов только((
waltage ну Фигма всё таки не для анимации. Есть более правильные решения. А уже в продукте можно и svg анимировать векторный.
@@zen-designer а где можно сделать анимированный svg?
waltage врать не буду - это не моя специализация. Знаю что есть специальные библиотеки позволяющие делать анимацию svg в вебе. Есть плагины к AfterEffects для этого. Да и просто кодом можно анимировать.
Да как этот круг то сделать?🤣🤣
Не мучайся. ) Там автор что-то менял в плагине и урок может быть не актуальным
@@zen-designer хорошо 👍
@@zen-designer у меня все получилось, правда эскиз был не очень, но это моя вина😂
Какие-то костыли через жопу
Откуда? Что? Куда? Все сумбурно и ничерта не понятно, не для новичков то точно. Есть гайды более ясные по теме анимации.
Жаль что не понятно. Действительно это видео не для новичков. Ведь речь о плагине и подразумевается что с интерфейсом самой Фигма уже всё понятно.
к сожалению на 2020 год этот плагин не полезнее чем мусорный пакет...
Да. Есть такое. Время неумолимо )