Но у меня Figma, делай что хочешь. Хотя и тут не обошлось без интересного момента, дело в том, что ховер любой карточки на сайте (через позиционирование) выводит элемент на передний план, создавая тени на объекты в линию слева и справа. В Figma не может такого быть (или я чего-то не знаю), чтобы два слоя оказались на одном уровне или тасовались во время анимации. Как ты их поставишь, так они и останутся. Следовательно, для демонстрации ховера, нужно сделать как в верхнем примере, а для макета нижний пример, с auto layout. Тень в верхнем списке падает на объекты слева и справа, так как фрейм находится наверху. С auto layout тень будет падать либо на объект слева, либо справа.

Увидел интересную анимацию (на мой взгляд), решил повторить. Оказалась лёгкой, но почему-то изначально думал, реализация такого плавного появления сложнее.

Ничего не вырисовывал, повторял для общего понимания анимации и проверки — могу ли я так. Интерфейс на букву Х😜

Самое главное в этой анимации — при нажатии на кнопку появляется новый фрейм сверху, два фрейма раздвигаются и выскакивает третий. Соответственно, при выполнении нажатии пользователь видит, что именно даёт нажатие (для этого ведь анимация и нужна). В данном случае пользователь что-то включает и это отображается на панели сверху.

Реализуется через smart animate от кнопки. Новый фрейм, который сверху появляется, просто добавляешь на втором экране. Главное в анимации в Figma всегда следить за названием объектов, для анимации они должны совпадать!

В оригинале у чела красочное приложение умного дома. Но даже горизонтальный скролл подаётся, как что-то необычное))

Достаточно сбросить дизайн в Kombai и получить готовый код ✅

Разработчики могут бесплатно использовать Kombai во время предварительных исследований

Бесплатно можно получить:

➕ Неограниченное количество загрузок дизайна

➕ Неограниченное количество загрузок кода

➕ React и HTML + CSS

➕ Tailwind CSS и MUI Base (для компонентов форм)

➖ Но обменяться файлами дизайна с третьми лицами не получится 🤷🏻‍♀️

Для доступа к расширенному функционалу, а именно, - интеграция и настройка, пользовательские переменные CSS и миксины, библиотеки пользовательских компонентов, вывод кода в соответствии с технологическим стеком и премиум поддержка, - необходимо связываться с разработчиками Kombai

Больше полезных сервисов для работы и учебы в моем телеграмм канале (ссылка в описании профиля), там я рассказываю, как можно использовать нейросети для бизнеса

Чуть ниже вы сможете наблюдать за моей работой:

Спасибо тебе, дорогой читатель, что прошёл этот путь со мной, надеюсь, что тебе понравилась моя работа, а если нет, то ничего страшного) Желаю тебе всего самого тёплого и наилучшего, прощай! До скорых встреч!)