🧨 Figma. Анимация в GIF для прототипа. Плагины. [Фигма уроки]
Рет қаралды 32,653
4 жыл бұрынАнимация в Фигма. В этом Фигма-уроке сделаем анимацию ввода пароля, кнопки, индикатора загрузки. Без использования 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
@zen-designer 4 жыл бұрын
Выяснили с подписчиком. Автор плагина Figmotion что то изменил и пример с вводом пароля из тутора больше не работает.
@randalboggz2694 4 жыл бұрын
здравствуйте, у меня такая проблема, анимация текста работает, но печать текста начинается с центра и потом уже перемещается в начало фрейма. Я уже 5 раз все заново переделал и все равно такая проблема
@zen-designer 4 жыл бұрын
Да. Эта проблема появилась после обновления плагина разработчиком. К сожалению. Я написал об этом в первом комментарии.
@randalboggz2694 4 жыл бұрын
Виктор Теплов спасибо за ответ
@NoseNose65 4 жыл бұрын
Все работает! Только что повторил. Нужно не забыть выставить привязку anchor point
@NoseNose65 4 жыл бұрын
@@randalboggz2694 там нужно выставить привязку относительно левого края. В редактировании точки, там где вводим значения в самом верху нужно нажать на левый квадратик. По умолчанию выбран центр. (аналогично anchor point в After Effects)
@janebalda 4 жыл бұрын
Да как до такого вообще можно додуматься! 👏 это шикарно, спасибо!
@marytv2579 4 жыл бұрын
Классно и просто рассказано на примере, что такое простая гифка и как ее легко сделать в Фигме спасибо!
@user-ml4dt9qx6k 4 жыл бұрын
Лайк уже только за то, что числительные правильно просклонял!
@irasergienko229 3 жыл бұрын
Действительно шикарно! Спасибо!
@mykytademchenko3044 4 жыл бұрын
Щикарна! Спасибо, отличное видео!)
@zen-designer 4 жыл бұрын
Благодарю
@user-bz6gx7pd2e 4 жыл бұрын
Как всегда просто великолепно!
@zen-designer 4 жыл бұрын
Спасибо, приятно )
@nn_cheats 2 жыл бұрын
Я ЭТО ВИДЕО ИСКАЛ ВЕСЬ ДЕНЬ. СПАСИБО ТЕБЕ!!!!
@lanahalenkova3061 3 жыл бұрын
Супер! Спасибо большое!
@user-Katerinka.sweetstar 4 жыл бұрын
Вот спасибо! Разобралась наконец-то)🌼
@zen-designer 4 жыл бұрын
Там что-то обновилось в плагине. Я не смотрел новую версию.
@pobedonosec69 3 жыл бұрын
Бог пикселей и фрейм материи!!! как же ты мне помог!
@alexeyzenkin1309 4 жыл бұрын
Шикаааарно))
@zen-designer 4 жыл бұрын
А ты то какими судьбами? Что тебе до Фигмы то ))
@user-no5gj1jr3c 4 жыл бұрын
Спасибо Виктор!
@donbao 4 жыл бұрын
классно! спасибо!
@user-vz5xs4zn8j 2 жыл бұрын
Подписка однозначно!
@violettajds857 4 жыл бұрын
Круто, отличное объяснение
@zen-designer 4 жыл бұрын
Спасибо. Мне важна ваша реакия.
@Illofillion 3 жыл бұрын
Крутяк!!!!
@NoseNose65 4 жыл бұрын
Годнота!
@zen-designer 4 жыл бұрын
Спасибо на добром слове! )
@Samed21 4 жыл бұрын
Спасибо
@tetiannapopovych 3 жыл бұрын
🔥🔥🔥
@zen-designer 3 жыл бұрын
☺️☺️☺️
@Alex-hm3uk 4 жыл бұрын
Да лучше гифки в другом софте делать. Или даже в Фигме сделать коллекцию гифок и потом быстро вставлять при надобности.
@mascautanecaterina3304 Жыл бұрын
как заанимировать лого на прототипе, если нужна прозрачность, потому что лого поверх черного фона?
@adorableandray 4 жыл бұрын
Виктор, а как у вас так ловко гиф ресетится и играет снова с первого фрейма при повторному обращению к нему? :) Я уже всё перепробовал -- гиф (с впечатываемым текстом) проигрывается ровно один раз. Затем, при повторном обращении к оверлею, гиф появляется в уже статичном виде, на последнем его фрейме. Рестарт презентации через R не помогает, хоть лопни. Помогает лишь полный её перезапуск (закрытие крестиком и запуск снова). Но ровно на один раз, конечно. Далее повторяется то же самое -- гиф упорно показывается в статичном, уже-проигравшем виде. Гиф вывожу по схеме AE -> PS -> save as GIF. С опцией loop, без опции loop -- один фиг.
@zen-designer 4 жыл бұрын
вообще у меня там вроде нет повторного обращения. Последовательно проигрывается всё и потом нужно рестарт делать всему прототипу. Но если я правильно понял ваш вопрос, можно подменять оверлей с гифом на статичную картинку и потом опять выводить оверлей по необходимости.
@ugal8523 3 жыл бұрын
Не работат плагин как Вашем руководстве(( Нет возможности выбрать фрейм для создания для него анимации.
@pobedonosec69 4 жыл бұрын
Bozhestvenno
@zen-designer 4 жыл бұрын
POBEDONOSEC blagodaryu )
@viktoriyagol3746 2 жыл бұрын
как фрейм заключили еще раз во фрейм?
@antonzhuravka 4 жыл бұрын
Спасибо за уроки! Есть вопрос касаемый асимметричности (Figma): При работе очень часто сталкиваюсь с проблемой разных расстояний от объекта. Приведу пример, отступы от текста до краев прямоульника слева и справа отличаются на один пиксель. Бывает, из-за этого приходится переделывать пол работы, так как заказчик решил изменить текст блока. Как можно данную проблему пофиксить? Благодарю за ответ!
@zen-designer 4 жыл бұрын
Не очень понятна ситуация. Используйте фиксированный текстовый блок, пользуйтесь компонентами, можно настраивать гриды (линейки) для отдельных фреймов. Настраивайте привязки.
@antonzhuravka 4 жыл бұрын
@@zen-designer асимметрия часто встречается в моих работах (при измерении со одной стороны на 1 пикс. больше). Не знаю, нормально ли это, поэтому решил спросить.
@zen-designer 4 жыл бұрын
@@antonzhuravka Ну тут нужно понять откуда она берётся. Если следить за размерами и ставить нужные привязки, всё работает четко. Может что-то поехать при изменении размеров фрейма с привязанными внутри сущностями. Это происходит из-за того, что Фигма округляет полупиксели. За этим нужно следить.
@zen-designer 4 жыл бұрын
@@antonzhuravka И конечно это не ассиметрия. Это халатность ) Нужно просто быть внимательнее и чаще поглядывать на цифры. 1 пиксель может стать большой проблемой.
@MC_Sup4ik Жыл бұрын
Как сделать разорванный круг с обводкой?
@pavel_pro_online Жыл бұрын
спасибо а как потом скачать этот файл?
@EugenBonn 4 жыл бұрын
Приветствие и музыка в начале огонь :-) Будешь моим Гуру ?
@zen-designer 4 жыл бұрын
Eugen Eugen большинство гуру или обманщики, или глупцы. Врать я не люблю 😀
@EugenBonn 4 жыл бұрын
@@zen-designer я вижу всех гуру на сквозь. Ты истинный гуру по Figme! Возьми меня с собой в Ашрам UX/UI. Я раньше был из секты Vendor side - Product Owner, хочу сменить веру :-)
@EugenBonn 4 жыл бұрын
На Алтарь обучения я положу заказы от западных клиентов, блуждающих в бездне невежества :-)
@zen-designer 4 жыл бұрын
@@EugenBonn ) я почти не проповедую UX/UI. Только приёмы по работе с софтом. Тебе нужно искать другого гуру )
@EugenBonn 4 жыл бұрын
В команде мы покорим Нирвану! Боги Индии и Тибета благоволят нам :-)
@vladikFitgirl 4 жыл бұрын
Добрый вечер! Расскажите пожалуйста, как сделать индикатор загрузки
@zen-designer 4 жыл бұрын
Можно просто анимированный GIF поставить в прототип.
@allamukhamedzynova1960 4 жыл бұрын
у пароля поставила left и scale,но как только в плагине поставлю первую точку, весь текст становится вертикальным по 1ой букве, подскажите что делать?) спасибо
@zen-designer 4 жыл бұрын
к сожалению автор Figmotion несколько раз что-то менял в плагине и не всё теперь работает так, как в видео. Сейчас у меня нет возможности проверить что конкретно не работает (
@qwerty-eh2sj 3 жыл бұрын
Таким же образом можно сделать в плагие Motion!
@xaxa2shki 4 жыл бұрын
Звуки в прототипирования это монтаж?)или я чето упустил?
@zen-designer 4 жыл бұрын
Это творческий приём 😁 Моего голоса тоже нет когда вы дизайнете. К счастью 😂
@alexocurance3951 3 жыл бұрын
Viktor skaji a mojno li exportirovati gifki iz figmi obratno v komp??
@zen-designer 3 жыл бұрын
GIF сделанные с помощью Figmotion выгружаются на их сервер. Тут-то их и можно сохранить на комп.
@alexocurance3951 3 жыл бұрын
@@zen-designer sposib
@rv4112 4 жыл бұрын
Будьте добры ссылку на телеграмм?
@zen-designer 4 жыл бұрын
t.me/figmachat
@user-ei4fe5og3n 4 жыл бұрын
Супер👍🔥 спасибо👏🏻🙏 А как с вами можно связаться по индивидуальному обучению?
@zen-designer 4 жыл бұрын
Спасибо. К сожалению не практикую индивидуальные занятия. Заходите в телеграм-чат по Figma -- там всегда помогут.
@firestarter614 4 жыл бұрын
а у меня одного, фрейм с текстом гуляет как хочет и набор начинается не слева а ближе к центру?
@zen-designer 4 жыл бұрын
Нужно проверить привязки.
@firestarter614 4 жыл бұрын
@@zen-designer в смысле констрэйнс ? Сейчас проверю
@firestarter614 4 жыл бұрын
@@zen-designer у фрейма текст привязка слева и сверху у самого текста также. Но при анимации фрейм текс съезжает влево
@zen-designer 4 жыл бұрын
Кирилл Морозов спасибо за звоночек. Действительно не работает больше. Закрепил комментарий.
@kristina7093 4 жыл бұрын
@@firestarter614 надо установить left и scale
@user-ri8qm1bb9p 4 жыл бұрын
Скажите пожалуйста как сохранить с фигма созданную анимацию, чтоб допустим вставить ее в какой то макет?
@zen-designer 4 жыл бұрын
либо сохранить в gif, как в уроке, либо запись экрана сторонними программами.
@user-ri8qm1bb9p 4 жыл бұрын
Ну gif можно записать только если используешь плагин, а если нет то при экспорте нельзя выбрать gif
@zen-designer 4 жыл бұрын
@@user-ri8qm1bb9p именно так. Если не плагин, то только запись экрана. Например с помощью ShareX на винде или Kap на Mac OS.
@user-ri8qm1bb9p 4 жыл бұрын
Как вот из прототипа в фигме сделать запись? Спасибо за ответ.
@zen-designer 4 жыл бұрын
@@user-ri8qm1bb9p Из прототипа только записью экрана сторонними программами. См. предыдущий ответ.
@laslychaos7351 4 жыл бұрын
можно ссылку на чат в ТГ?
@goncharovblog 4 жыл бұрын
t.me/figmachat
@darz56 4 жыл бұрын
Виктор, подскажите, сколько вы уже в Фигме работаете?
@zen-designer 4 жыл бұрын
Daria Z в Фигме не очень долго. Может год. Долго приглядывался к ней, работая в Sketch. В котором я почти с сотворения (Скетча).
@darz56 4 жыл бұрын
@@zen-designer А Скетче с какого года, получается?) Просто интересно) И еще вопрос, как запомнить все эти названия действий, которые вы называли в процессе видео?)
@darz56 4 жыл бұрын
@@zen-designer И какой инструмент вам нравиться больше, Фигма или Скетч?
@zen-designer 4 жыл бұрын
@@darz56 Согласно википедии Скетч вышел в 2010. Скажем с 2011 я с ним знаком. Ну а вообще в профессии где-то с 1995 года ) Песок уже сыпется. А по поводу как запоминать -- нужно не запоминать, а понимать. Начать с учебника по Фигме, читать статьи на тему, вращаться в среде )
@zen-designer 4 жыл бұрын
@@darz56 В Скетче огромное преимущество (для меня) в оффлайн режиме. Зато подход к стилям и символам/компонентам удобнее в Фигме. Ну и кроссплатформенность Фигмы играет роль.
@daniilbahmatov9171 4 жыл бұрын
Как найти ваш телеграм канал?
@zen-designer 4 жыл бұрын
Он не мой ) Он общий! t.me/figmachat
@laslychaos7351 4 жыл бұрын
можно ссылку на чат в телеграм?
@zen-designer 4 жыл бұрын
Конечно. t.me/figmachat
@waltage 4 жыл бұрын
а раньше во флеше все делали я так полягаю флеш мертв?
@zen-designer 4 жыл бұрын
Давно. Пусть покоится с миром 😂
@waltage 4 жыл бұрын
@@zen-designer жаль что нет хорошего пайплайна на векторах - будь добр делай гифы а гифы же 256 цветов только((
@zen-designer 4 жыл бұрын
waltage ну Фигма всё таки не для анимации. Есть более правильные решения. А уже в продукте можно и svg анимировать векторный.
@waltage 4 жыл бұрын
@@zen-designer а где можно сделать анимированный svg?
@zen-designer 4 жыл бұрын
waltage врать не буду - это не моя специализация. Знаю что есть специальные библиотеки позволяющие делать анимацию svg в вебе. Есть плагины к AfterEffects для этого. Да и просто кодом можно анимировать.
@user-ip7pq2kh5q 3 жыл бұрын
Да как этот круг то сделать?🤣🤣
@zen-designer 3 жыл бұрын
Не мучайся. ) Там автор что-то менял в плагине и урок может быть не актуальным
@user-ip7pq2kh5q 3 жыл бұрын
@@zen-designer хорошо 👍
@user-ip7pq2kh5q 3 жыл бұрын
@@zen-designer у меня все получилось, правда эскиз был не очень, но это моя вина😂
@dellwingworld 4 жыл бұрын
Откуда? Что? Куда? Все сумбурно и ничерта не понятно, не для новичков то точно. Есть гайды более ясные по теме анимации.
@zen-designer 4 жыл бұрын
Жаль что не понятно. Действительно это видео не для новичков. Ведь речь о плагине и подразумевается что с интерфейсом самой Фигма уже всё понятно.
@danield2398 3 жыл бұрын
Какие-то костыли через жопу
@sanbait 4 жыл бұрын
к сожалению на 2020 год этот плагин не полезнее чем мусорный пакет...
@zen-designer 4 жыл бұрын
Да. Есть такое. Время неумолимо )
Hamster Kombat
Рет қаралды 49 МЛН
Wylsacom
Рет қаралды 9 МЛН
Alexey Bychkov: веб-дизайн и фриланс
Рет қаралды 85 М.
Aninix - Interface animation
Рет қаралды 4,9 М.
Виктор Теплов
Рет қаралды 28 М.
Быть Программистом
Рет қаралды 43 М.
Hamster Kombat
Рет қаралды 49 МЛН