Как анимировать кнопки в фигме? 5 интересных анимаций кнопок для твоих проектов
HTML-код
- Опубликовано: 27 июл 2024
- Если вы хотите придать вашим проектам интерактивности и живости, то анимация кнопок - это прекрасный способ достичь этой цели. Мы покажем вам все шаги, начиная с создания простых форм и графических элементов, и заканчивая настройкой плавных и привлекательных анимаций, которые подарят вашим кнопкам уникальный вид.
мы будем шаг за шагом создавать примеры различных анимаций для кнопок: от классических затухающих эффектов до более сложных движений и переходов.
Повторяя действия из видео вы создадите анимации кнопок, которые улучшат пользовательский опыт, сделают ваши интерфейсы понятнее и увлекательней.
Для вашего удобства таймкоды:
00:00 - Вступление
00:52 - Создание первой кнопки
03:00 - Создание второй кнопки
04:55 - Создание третьей кнопки
07:35 - Создание четвёртой кнопки
10:47 - Создание пятой кнопки
12:33 - Создание шестой кнопки
14:57 - Заключение
💫 Сайт Пижамной Академии Веб-дизайна
web-design.academy/
Чтобы узнать более детально об обучении в Пижамной Академии напишите нам в Instagram / webdesign.academy или Telegram t.me/pajamaacademy
Больше про UX дизайн в Инстаграм:
/ webdesign.academy
подписывайся 💛
Заглядывай в телеграм комьюнити:
t.me/pajamaacademy
Ставь лайк 👍 этому видео и подписывайся на канал, здесь много полезного про UX и Веб дизайн!
#FigmaAnimation #ButtonAnimations #UIDesign #webdesign #вебдизайн #tutorial #туториал #пижамнаяакадемия #пижамнаяакадемиявебдизайна #АнимацияКнопок #WebDesign #MotionDesign #DesignTutorial #Дизайн #UXAnimation #Buttons #ДизайнВFigma #DesignTechniques #InterfaceAnimation #КреативныйДизайн #AnimationForBeginners #FigmaLessons #UXUI #Дизайнеры #Designers #ДизайнУроки #Creativity #Художник #DesignLessons
Лучшие просто. Ваш канал меня спас! Нужно было сделать на пару "анимированную веб-страницу", ничего не клеялось, вечно что-то не так было. А вот с вами просто прекрасно. Спасибо!
Рады помочь ✌️💛
Самое лучшее объяснение! Наконец-то анимация заработала, как надо!
Рады, что у вас получилось 💛
Отличная работа! 👍Всегда пригодится! 😊
Спасибо! 🤓
круто, очень полезно, спасибо)
Спасибо ✌️🤓
отличный туториал, особенно последняя кнопка!
Большое спасибо ✌️
Рады быть полезными 💛
Дякую! Дуже люблю ваші відео!
Дякуємо тобі 🤓💛
Здравствуйте, подскажите момент, 5 кнопка, при анимации, второй вариант меняет шрифт на другой, да шрифт установленный, первый вариант нормально отображается, но при нажатии сбрасывается на другой, какая может быть причина? На ПК где шрифт установлен все работает нормально, но на смартфоне кнопка сбрасывает при нажатии шрифт, как и на других устройствах, где не установлен этот шрифт. Так же не логично?)
Действительно странно, возможно это какой-то баг самой Figma. Попробуйте сделать новый Component set и заменить кнопку, может поможет ✌️🤓
@@design_academy_pj спасибо за ответ) делал конечно, тоже самое... радует что проект личный
Классно, каким образом копировать компонент?
Ctrl/Cmd+C 🤓
можно ли перенести анимацию этих кнопок на тильду из фигмы?
Вероятнее всего 🤗
В крайнем случае можно собрать кнопки непосредственно в самой тильде или воспользоваться кодом.
@@design_academy_pj а как воспользоваться кодом, если ты только дизайнер и не умеешь кодить?)))
@@svetlanapozuban2494 Ну для тильды есть уже готовые инъекции кода, которые можно найти на просторах интернета. А на самом деле стоит подучить немного основы верстки, тогда будет гораздо легче работать с nocode инструментами ✌
Мне нужно чтобы кнопка ни к чему не приводила а просто меняла свой вид при нажатии что делать?((
просто вместо while hovering выбери on click и онабудет менять вид не при наведении а по нажатию
@@rainbow6wag Всё верно)
@@rainbow6wag неее, я просто не подвязывала кнопку к другому фрейму и все получилось, нужно было чтоб в окошке галочка появлялась по нажатию. Я чуть о другом говорила в итоге с горем пополам разобралась) Спасибо вам за небезразличие 😌
где смарт анимэйт?
В меню prototype, как сделаете привязку у вас будет выбор, какой вид анимации использовать ✌
Ничего не работает.
Это печально, а что именно не получается?
Белая тема просто ужас,ничего не видно
Это на любителя и больше про комфорт 🤓
Если вам больше нравится или более удобнее работать в тёмной теме, то конечно лучше использовать тёмную тему✌