Тёмный

Анимация подсветки в Figma при наведении // Курсор с подсветкой 

Maksym Marchenko
Подписаться 5 тыс.
Просмотров 17 тыс.
50% 1

В этом видео я делаю подсветку для главного текста на экране, которая срабатывает при наведении на соответствующий текст. Для этого мне необходим набор компонентов (Component Set), маска слоя, градиент. В конечном результате получается очень крутой дизайн экрана и эффектная анимация.
💥 Доступ к бесплатному модулю моего КУРСА по работе в Figma💥 - design-hub.online/kurs-po-figma
✔️Формат курса - видеозаписи уроков.
✔️Доступ к курсу ограничения по времени не имеет.
✔️Вы так же будете иметь к доступ к обновлениям курса и материалам добавленных в будущем.
❗️По возникающим вопросам- всегда готов к диалогу😉
Присоединяйся к Telegram каналу с полезными плюшками:
🔷 Телеграмм канал - t.me/+vgusQPQwUQtlMmIy
Пожертвовать 💰
Если вы хотите поддержать мой канал и убедиться, что я могу продолжать создавать бесплатный и доступный для всех контент, сделайте пожертвование, перейдя
по ссылке 🔗
send.monobank.ua/jar/8uwEr54whn

Опубликовано:

 

16 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 56   
@user-mm8be8hn2q
@user-mm8be8hn2q Год назад
От таких занятий - одно удовольствие. Коротко, понятно и вкус отличный. Спасибо вам.
@Alekseev_Oleg
@Alekseev_Oleg Год назад
Да, хороший урок, легкий, понятный, доступный и информацией не перегружен!
@ruslanruslan9370
@ruslanruslan9370 9 месяцев назад
Спасибо большое за Ваш труд!
@Elena_Lena1
@Elena_Lena1 Год назад
Спасибо!) Очень круто!))
@helgasheretovich5989
@helgasheretovich5989 Год назад
Вау! Супер! Спасибо!!!
@user-ws7iq1gq4r
@user-ws7iq1gq4r Год назад
Класне відео, особливо для початківців! Щиро дякую!
@user-gk7gi2fq8n
@user-gk7gi2fq8n 8 месяцев назад
Всё получилось ) Большое спасибо !
@user-cx3lu6et2n
@user-cx3lu6et2n Год назад
Очень Вас благодарю!
@misssofichannel8317
@misssofichannel8317 Год назад
Все понятно и интересно😊 спасибо за видео!!!
@K-45-F
@K-45-F 6 месяцев назад
Спасибо большое ) Все ясно и без воды )
@mariia_herasimova
@mariia_herasimova Год назад
Вау! Чётко, понятно, одно удовольствие 😊 Больше видео и делай на английском тоже. Поток будет колоссальный. Таких видео очень мало
@design_HUB
@design_HUB Год назад
Спасибо, за такую оценку!)) Я б с радостью делал, но мой английский всё испортит🤣
@user-wg4by7cz9d
@user-wg4by7cz9d Год назад
Четко и по сути, крутяк :)
@design_HUB
@design_HUB Год назад
Спасибо)
@Crab_Cyborg
@Crab_Cyborg 6 месяцев назад
Спасибо большое, все супер понятно, подписался
@igroman2810
@igroman2810 10 месяцев назад
Блин, спасибо большое :) Много чего узнал и изучит благодаря тебе! Теперь мои работы будут выглядеть более презентабельно :) Благодарю еще раз :)
@twisotwizzy
@twisotwizzy 9 месяцев назад
Верстальщик вышел из чата
@ulyanaseniv4942
@ulyanaseniv4942 23 дня назад
🤣
@barmalerka
@barmalerka Год назад
Крутой ролик! Классная подача
@design_HUB
@design_HUB Год назад
Спасибо!)
@ri44man
@ri44man 5 месяцев назад
Супер
@vaddy7117
@vaddy7117 Год назад
крут!
@yauheniya358
@yauheniya358 Год назад
Дзякуй вялікі! Вельм карысна і зразумела, усё растлумачана па кроках - шыкоўны фармат!
@design_HUB
@design_HUB Год назад
Спасибо за такой комментарий!))
@user-kv2nb1zx1n
@user-kv2nb1zx1n 4 месяца назад
Я хочу попробовать сделать каждый урок❤❤❤❤
@user-hg9oo5wi9h
@user-hg9oo5wi9h Год назад
Дякую за чудовий урок! +1 варіант анімації в мою скарбничку завдяки вам 💝
@design_HUB
@design_HUB Год назад
Отлично)
@user-hg9oo5wi9h
@user-hg9oo5wi9h Год назад
@@design_HUB таким питанням озадачилась. А чи може ця підсвітка обмежуватися контуром літер або якоїсь фігури?
@design_HUB
@design_HUB Год назад
У цьому відео я і створював підсвітку у межах контура текста, для цього я з текста створив маску. Роль маски може виконувати будь-яка фігура, не тільки текст. Таким чином, щоб обмежити підсвітку контуром, потрібно зробити маску (з тексту або фігури) і в неї помістити підсвітку. Якщо не створювати маску то край тексту або фігури буде нечіткий.
@user-hg9oo5wi9h
@user-hg9oo5wi9h Год назад
@@design_HUB це я зрозуміла. Я мала на увазі інше, погано висловила думку. Наприклад, є текст "Oracle Card". Чи може бути підсвітка у формі карти? І в той же час, щоб ця карта з'являлася тільки в межах букв?
@design_HUB
@design_HUB Год назад
коли створюєте групу компонентів, друга фігура повинна бути іншої форми. (у відео ми брали 2 кола). Усе інше так само. Єдине що якщо брати фігуру з чіткими контурами (без розмиття), то плавності досягти майже неможливо і ця карта буде рухатись стрибками
@TIGER_WT
@TIGER_WT Год назад
Вообще красиво получилось) Но я сделал маленький элипс (прозрачный, который в будущем будет много раз копироваться) 60 пикселей, а большой (который в блюре) 100 пикселей. Так анимация выглядит плавнее 😊
@design_HUB
@design_HUB Год назад
Классная идея)) круто что не ограничиваете себя в предложенных вариантах, а пробуете новое и другое)
@TIGER_WT
@TIGER_WT Год назад
@@design_HUB Спасибо) А вам желаю успехов в развитии канала! Контент у вас хороший, жаль, что пока не все знают об этом канале. Я уже подписался, буду рекомендовать другим)
@design_HUB
@design_HUB Год назад
Спасибо)
@arinapchelina7072
@arinapchelina7072 6 дней назад
Здравствуйте! Подскажите,пожалуйста, как сохранять эту работу на ноут?
@if4657
@if4657 8 месяцев назад
Как круто!! Очень информативный урок, спасибо! А верстать это так же по квадратиками, кто-нибудь может подсказать? х)))
@user-de9nh8mu3g
@user-de9nh8mu3g Год назад
Приветствую. Очень интересно и доступно объясняешь. Безусловно 👍🏼 У меня вопрос: а как такое вытащить из фигмы, например в Тильду?еще и чтоб работало все при наведении
@design_HUB
@design_HUB Год назад
Привет, спасибо)) видео можно вытащить этим плагином www.figma.com/community/plugin/1170836206919391034 или записать экран. Экспортировать в Тильду врядли получится (давно в Тильде не работал). Даже если делать пошаговую анимацию по ховеру, то проблема с маской... Думаю что только код.
@ndancer44
@ndancer44 Год назад
Круто! Спасибо! Я вот подумываю о неоновые подсветки, некоторые буквы должны гаснуть и загораться, не было уже на канале?
@design_HUB
@design_HUB Год назад
Спасибо) с неоном ничего не было ещё, но может появиться))
@TIGER_WT
@TIGER_WT Год назад
@@design_HUB Ждём)
@I_oveart
@I_oveart 16 дней назад
Верстальщик не пошлёт меня на Север? Если я сброшу ему такой макет))
@design_HUB
@design_HUB 13 дней назад
Если не умеет делать такой эффект, то пошлёт. Вы это делаете для того, чтоб показать как должно выглядеть. Можете не делать такую анимацию а отправлять ссылку на сайт где уже реализована такая анимация
@Vit_Army
@Vit_Army 23 дня назад
А как скачать.. Скачиваю эффекта нет.
@lightningalbom8890
@lightningalbom8890 Год назад
класс ! А где такую анимацию можно применить ?
@design_HUB
@design_HUB Год назад
При создании сайтов
@Snago1966
@Snago1966 Год назад
@@design_HUB А как перенести в Tilda?
@user-cj9il1zt9f
@user-cj9il1zt9f 8 месяцев назад
а почему у меня нет анимации, хотя делала все по видео? то есть, я нажимаю посмотреть, а у меня просто картинка, двигаю курсор, ничего не происходит(
@design_HUB
@design_HUB 7 месяцев назад
Пришлите ссылку на проект мне в телеграмм
@TrollFace-yv7xw
@TrollFace-yv7xw Год назад
Что делать если change to не активно?
@design_HUB
@design_HUB Год назад
В этом видео нет же такого перехода. А вообще change to выставляется от фрейма к фрейму
@sofiaallon1462
@sofiaallon1462 Год назад
@@design_HUB, было, когда вы настраивали анимацию. У меня тоже Change to неактивно. Может поэтому анимация не получилась🙍‍♀🤷‍♀
@user-dr8wu5xk3y
@user-dr8wu5xk3y 11 месяцев назад
Почему у меня анимация выходит за рамки букв?
@design_HUB
@design_HUB 11 месяцев назад
Не знаю)
Далее
🏟️👋 Welcome to your new home, Kylian Mbappé!
00:14
меня не было 9 дней
12:48
Просмотров 2,2 млн
Сколько метров чернил в ручке?
16:35
🏟️👋 Welcome to your new home, Kylian Mbappé!
00:14