Как сделать кнопку Фигме? Правила создания кнопки. Уроки Figma для начинающих.
Вставка
- Опубліковано 27 лип 2024
- 🔥 Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma...
В этом видео посмотрим на 4 простейших варианта создания кнопки в Фигме! Пройдем правила создания красивой кнопки. Сделаем кнопку с помощью Auto Layout. Далее сделаем варианты кнопок с ховерам и добавим анимации Smart Animate через интерактивные компоненты.
👉 Бесплатный доступ к исходнику: www.buymeacoffee.com/chyrkov/...
🔗 Мои ссылки:
Мой канал в телеге: t.me/chyrkovfm
Мой авторский курс «Figma с нуля»: 👉 designsweets.co/courses/figma...
Студия: chyrkov.studio
Behance: www.behance.net/chyrkov
Twitter: / sergeichyrkov
Портфолио по фото: sergeichyrkov.com
🎶 www.epidemicsound.com/referra... - лучший сервис по подбору музыки
📝 Содержание:
0:00 - интро
0:38 - правила создания кнопку
3:43 - способ №1
5:32 - способ №2
6:29 - способ №3 (AutoLayout)
8:22 - создаем ховеры
14:06 - создаем интерактивные компоненты
16:23 - смотрим результат
16:55 - еще +1 вариант анимации ховера кнопки (Smart animate)
17:56 - смотрим результат
18:12 - концовка
_____________
#Figma #FigmaTutorial #UXDesign #Webdesign
Случайно наткнулась на канал, как тут не десятки тысяч просмотров. Настолько полезная информация, особенно для новичков. Я здесь информации нашла больше, чем у блогеров миллиоников. Не останавливайтесь!
Спасибо вам за такой приятный отзыв!)
Конечно полезное видео! Спасибо! Пошёл смотреть ,что ещё у вас есть)
Спасибо за отзыв!) заходите ещё)
спасибо)я очень ценю, то что вы делитесь своим опытом
Пожалуйста)) а вам спасибо за комментарий!)
Дякую! Це єдине відео з усіх, що передивився де нормально пояснено як робити анімацію кнопки!
супер) я радий, що вам сподобалося і було все зрозуміло!✊
Спасибо ОГРОМНОЕ! Все четко ,без воды!
Пожалуйста, рад что понравилось )
Отличное видео! Очень полезно, говорите спокойно, все действия называете, а не клацаете так что не понятно что вообще происходит 😂
Спасибо большое! Сделала красивые кнопки 😋
спасибо! рад, что было полезным!)
Отличное видео! Голос убаюкивающий, приятный))
Спасибо!😅
Мега полезный урок!!! Нашла даже больше чем искала и все в одном видео! Спасибо
Супер! Я рад 😇
Сергей, вы чудесный, спасибо!
😅 спасибо большое!
Очень полезное видео! Спасибо вам!
Пожалуйста! Рад, что понравилось!
Очень здорово, спасибо)
Пожалуйста))
Супер, спасибо!
Пожалуйста, успехов!)
Спасибо, очень полезно и понятно😊
Пожалуйста)
Спасибо., зашло..)
Доступно и понятно, пасиб)
Спасибо за отзыв) рад, что все понравилось!)
Огонь!
😉
спасибо за видео!
Пожалуйста!)
Очень полезное видео!
Досмотрела до конца, вообще очень круто! Так рада, что наткнулась на Ваш канал, Сергей. Большое спасибо! Это именно то, что я искала.
Спасибо большое)) рад, что нравится!)
Очень полезно.
Я рад)
Спасибо! Отличное видео. Только пожелание четче экран сделать.
Спасибо за комментарий!) четкость регулируется в самом ютубе, вам нужно выбрать более высокое качество через шестеренку в плеере)
@@Chyrkov Я имела ввиду четкость трансляции Вашего экрана))), но все равно спасибо!
Интересно, а кнопка "показать ещё" так же делать? Было бы интересно ,если бы Вы рассказали, как использовать её в совокупности со страницами, когда при нажатии данной кнопки появляется снизу ещё меню
Да конечно принцип такой же) за идею спасибо)
Здравствуйте. Делала всё как показано в видео. Но на просмотре работает только 1 кнопка (первая), а остальные нет. Я даже переделывала, но ничего не изменилось. В чём может быть проблема?
Добрый день! Так сложно понять что именно не так. Скорее всего проблема именно в настройках самого прототипа, а именно настройки интерактивных прототипов.
Здравствуйте, а как теперь эту кнопку встреть на все страницы сайта?
Конечно, просто копируйте кнопку из компонента в нужные месте в макете и все.
так, спасибо огромное) кнопку я создал) расставил по фрейму, куда надо, все работает - шевелится куда надо. а теперь вопрос: как мне ее правильно впихнуть в zeroblock на тильде? там написано довольно коротко "загрузите блок"...
Привет!) Ответил в телеге)
как копировать? у меня не получается, тоесть, я вытаскиваю копию из компонентов, и затем вставляю в нужное место, проверяю, а она не реагирует
Можно перетянуть с зажатым альтом или достать компонент из вкладки assets
@@Chyrkov оу, спасибо, попробую, я просто новенький в дизайне, и тут сразу же на конкурс кое-какой попал, нужно создать кнопку анимированную, а не знаю как :)
Понял)) удачи вам!!!
а как сделать чтобы кнопка активировала сыллку при нажатии?
В настройках прототипа кнопки (interaction), выбираем on click, затем ниже вместо navigate to нужно выбрать open link и указать нужную ссылку😉
Доброго дня, подскажите в чём ужасность капса в дизайне? У меня часто просят именно капс у кнопки, как-то раньше и не задумывалась, что прям нежелательно так делать, сейчас задумалась и понять не могу, хорошо ж смотрится, не? )
Считается что капс плохо считывается особенно на мелких текстах. Касательно кнопок здесь вопрос еще к стилистике, если капс подходит по стилю в рамках сайта в целом тогда думаю можно использовать)) но всегда важно помнить про читабельность!)
Спасибо ) только я так понимаю в бесплатной версии фигма анимации нет (
Лицензия не влияет на наличие анимации. Она доступна и в бесплатной версии 😉
А как этот проект сохранить и опубликовать?
В Фигме не нужно сохранять, все автоматически сохраняется в облако. Чтобы опубликовать нажмите share в верхнем правом углу
А как сохранить готовую анимацию для заказчика?
Анимацию можно сохранить в формате Lottie через их плагин, но для кнопок в этом никого смысла. Анимации кнопок делается через CSS и JavaScript разработчиком.
А как её скачать?
Что именно? Можно сохранить код кнопки в CSS
Все хорошо, только у меня не получается перенести кнопку из сета как на видео. У меня он уносит одну кнопку, а вторая остается в предыдущем фрейме🥺 И соответственно анимация не работает.
Скорее всего у вас не копируется кнопка когда вы ее тяните. Попробуете потянуть с зажатым альтом
У вас ошибки в кнопках. Вначале показали какие размеры неправильные. Также приступая к практике, делаете те же ошибки.
Не вижу ошибок))
Автор конечно молодец. Но он не объясняет как он копирует кнопки, как оно их вынимает . Может я конечно настолько тупой, но почему бы на это лишнюю минуту не потратить
Спасибо за отзыв! Это базовые действия о которых обычно забываешь сказать, так как делаешь их машинально. Кнопки копируются как и любой элемент, просто выделите ее и с зажатым альтом (option для MacOS) потяните в сторону. Так можно скопировать все что угодно. Кстати в других графических редакторах, например Фотошоп, это работает точно так же😉
Как их перенести?16:09 как их перенести? Чё зажать? Сказать нельзя блин!
Без паники! Мы создаем дочерний компонент, с зажатым ALT переносим из основного компонента, по сути копируем элемент. Можно так же вынести копию компонента из панели Assets.
Как вы кнопки перенесли на другой фрейм? Скопировали или что
Да можно перетянуть с зажатым альтом из компонента или просто скопипастить ☺️
Я НЕ ПОНИМАЮ КАК ВЫ ЕЕ ПЕРЕНОСИТЕ, Я ПЕРЕНОШУ, И АНИМАЦИЯ ЛОМАЕТСЯ, КАК?????????
Я правильно понимаю, что переносите вариант кнопки из компонента? Это нужно делать с зажатым alt (windows) или option (macOS), то есть по факту делаете копию этого варианта. Можно просто скопипастить, или взять ее из вкладке assets где находятся все компоненты