- Видео 20
- Просмотров 194 131
Artem Domnin
Добавлен 6 фев 2023
Делюсь своим опытом и знаниями о дизайне и технологиях⚡️
Ig: @domnin.design
Ig: @domnin.design
Создаем карусель карточек в Figma за 50 сек 🎬
Создаем карусель карточек в Figma 🎬
🖼 Создаем фрейм 600 на 800 пикселей
🎨 Нажимаем на фрейм и запускаем плагин Unsplash
📷 Выбираем фото и создаем Component
⚙️ Заходим в настройки фотографии и меняем параметр Saturation
👭 Создаем вариант внутри компонента и возвращаем параметр в настройках фото
📝 Добавляем текст внутри фото
🎬 Переходим в Prototype, связываем фото и выбираем в настройках While Hovering
🔁 Повторяем действия для других фото
📦 Копируем полученные фото и оборачиваем в Auto Layout
🐀 Перемещаем в макет и с нажатой клавишей Alt или Command уменьшаем границу элемента
➡️ Включаем Clip Content и добавляем горизонтальный скролл
⚪ Создаем эллипсы и располагаем их сверху и снизу фото
💬 Добавляем заг...
🖼 Создаем фрейм 600 на 800 пикселей
🎨 Нажимаем на фрейм и запускаем плагин Unsplash
📷 Выбираем фото и создаем Component
⚙️ Заходим в настройки фотографии и меняем параметр Saturation
👭 Создаем вариант внутри компонента и возвращаем параметр в настройках фото
📝 Добавляем текст внутри фото
🎬 Переходим в Prototype, связываем фото и выбираем в настройках While Hovering
🔁 Повторяем действия для других фото
📦 Копируем полученные фото и оборачиваем в Auto Layout
🐀 Перемещаем в макет и с нажатой клавишей Alt или Command уменьшаем границу элемента
➡️ Включаем Clip Content и добавляем горизонтальный скролл
⚪ Создаем эллипсы и располагаем их сверху и снизу фото
💬 Добавляем заг...
Просмотров: 7 496
Видео
Анимируем градиентный эффект в Figma за 40 сек 🎬
Просмотров 3,1 тыс.Год назад
Анимируем градиентный эффект в Figma 🖼 Создаем фрейм и открываем плагин Blobs 💧Нажимаем кнопку несколько раз и создаем шейпы 1️⃣ Располагаем их в нужном порядке и меняем цвет 📦 Выделяем шейпы и оборачиваем их во фрейм 🥽 Добавляем эффект блюра у фрейма 🔄 Дублируем макет и меняем расположение шейпов 👭 Выделяем макеты и создаем Component set 🎦 Связываем макеты в Prototype и меняем на After Delay 🤍...
Популярные ошибки в типографике для UI дизайна 🤫
Просмотров 2,7 тыс.Год назад
как избежать популярных ошибок в типографике для ui дизайна
Создаем 3D картинки в Figma 🎬
Просмотров 4,4 тыс.Год назад
Как сделать 3D картинки не выходя из фигмы за 40 секунд?
Секреты минималистичного дизайна 😎
Просмотров 3,1 тыс.Год назад
Секреты минималистичного дизайна в фирме
Создаём видео карточку в Figma 🎬
Просмотров 2,5 тыс.Год назад
Как сделать видео карточку в фигме за 30 секунд? 🟣 Создаем фрейм и скругляем углы 🖼 Добавляем gif-картинку внутри фрейма 📝 Создаем текст, добавляем элементы и оборачиваем в Auto Layout 👭 Копируем фреймы, cоздаем заголовок с помощью Auto Layout 🔎 Добавляем и скрываем иконку, и проверяем отступы 🔄 Копируем макет и возвращаем иконку 🐀 Уменьшаем текст в заголовке 🍷 Перемещаем фреймы и уменьшаем неп...
Создаём календарь в Figma 🎬
Просмотров 8 тыс.Год назад
Создаем календарь в Figma 🎬 Как сделать календарь в фигме за 50 секунд? 📝 Создаем текст и увеличиваем его ширину 🥡 Выравниваем по ширине и оборачиваем во фрейм 🟠 Центрируем текст и скругляем фрейм 👭 Копируем фреймы и меняем их цвет ⚙️ Выделяем фреймы и создаем Component Set 💬 Создаем еще вариант и меняем текст 🆕 Для удобства меняем названия вариантов 📦 Копируем варианты и оборачиваем в Auto Lay...
Мой топ-4 плагинов в Figma 🎬
Просмотров 2 тыс.Год назад
ТОП-4 моих плагинов в Figma 🎬 🖼 Плагин Unsplash 🎨 Плагин Webgradients 📝 Плагин SBOL Typography 🐀 Плагин html.to.design
Анимируем выпадающий список в Figma 🎬
Просмотров 18 тыс.Год назад
Анимируем список в Figma 🎬 Как сделать анимацию выпадающего списка в фигме за 30 секунд?👨💻 📝 Создаем фрейм 🖼 Добавляем логотип и элементы 🟠 Добавляем список 🐀 С помощью клавишы K уменьшаем блоки Добавляем отрицательный отступ 🔃 Меняем очередность элементов 👓 Уменьшаем непрозрачность до нуля 🛗 Добавляем и перетаскиваем элементы 👭 Дублируем фрейм 🐘 Перемещаем наш список и возвращаем непрозрачно...
Ох, уж эти дизайнеры 😂
Просмотров 400Год назад
Анимируем бегущую строку в Figma 🎬
Просмотров 8 тыс.Год назад
Как сделать анимацию бегущей строки в фигме за 40 секунд?👨💻 📝 Создаем текст и копируем его несколько раз 🖼 Создаем фрейм и с помощью плагина Unsplash добавляем фото 👭 Копируем фреймы и меняем фото 📦 Выделяем фреймы и оборачиваем в группу 🔃 Перемещаем текст и ставим на задний план 🎭 Выделяем элементы и добавляем маску 🐀 Оборачиваем во фрейм и уменьшаем его длину 👕 Создаем компонент и добавляем ...
Анимируем мобильный слайдер в Figma 🎬
Просмотров 86 тыс.Год назад
Как сделать анимацию интерактивного мобильного слайдера в фигме за 40 секунд?👨💻 🖼 Создаем фрейм и перекрашиваем его в серый цвет ⚪ Создаем круг и добавляем к нему тень 🐘 Создаем прямоугольник с размерами как у фрейма 🎨 Перекрашиваем его любой цвет и перетаскиваем его во фрейм 🐀 Уменьшаем его длину 📦 Оборачиваем все в группу ➕ Добавляем значения минимум и максимум 1️⃣ Создаем текст с числами и ...
Анимируем наведение кнопки в Figma за 50 секунд (Туториал, Урок)
Просмотров 4,4 тыс.Год назад
Туториал (урок) по созданию анимации наведения кнопки в фигме ⭐ Копируем необходимую иконку и расставляем как нам нравится 📦 Оборачиваем иконки во Frame 👭 Копируем фреймы 🐀 В первой фрейме уменьшаем звезды и уменьшаем непрозрачность до нуля 💫 Во втором фрейме с помощью Shift перетаскиваем звезды выше границы самого фрейма ✨ В третьем фрейме перетаскиваем звезды и отдаляем их друг от друга 🤞 Выд...
Анимируем загрузку с эффектом волн в Figma за 30 секунд ✨
Просмотров 4 тыс.Год назад
Туториал (урок) по созданию анимации с эффектом волн в фигме
где же компоненты...
чуваки, у кого не плавно идет, поставьте в разделе curve режим quick на 600ms
Программисты которые должны писать код 🫠
Аж как-то жалко, хотя сделать это не легко в фирме вон сколько всего
Чел реально спасибо
честно сказать, не понятно самое главное- через что связать эти обьекты? это плагин? если да какой? если нет то как эту функцию найти?
В правой верхней части рабочего экрана нажимаем на режим “Prototype”, после соединяем необходимые элементы
Боже это гениально!
Начале кружочек еще сделала, а дальше ничего не показано что куда нажимать. Хоть бы весь экран показали, не понятно для кого этот "туториал"
ОЧЕНЬ ЗАХОДИТ ВАША ИНФО! ПОДАЧА ОТЛИЧНАЯ! Делайте полные видео, с обзором, пожалуйста. ❤
Спасибо вам большое
Господи, как просто и красиво!
метод очень нужный.но по итогу вышло не то(при 1 ориг и копии,на воспроизведении 4 картинки:пуст фрейм,картинка с оригиналом.и еще 2 бреда).не вышло короч.можно как для чайников разжевать.ро сути нужно просто чтоб автопилотом увеличивался и сжимался кружок.без клика.
Я 14 раз пересмотрела, слишком быстро и ничего не вышло , но спасибо
А что дальше? как видео вытащить без потери качества???
Чувак, ты лучший. Ебусь с этим скролом за просмотром часовых видео, и только за твой 40-секундный ролик мне стало действительно понятно. Спасибо!
Отличная идея!
Вот скорость подачи уже понятнее, чем у некоторых
Надо попробовать
супер полезно, спасибо большое! продвижения каналу
у меня чет вообще не плавно идет(
Здравствуйте, попробуйте в настройках где instant поменять на smart animation, должно быть плавно)
Спасибо!
Урок классный но субтитры по середине которые нельзя даже отключить все портят и нельзя посмотреть куда автор нажимает😢
Ни чего не понять
странно .не получается
Всё гениальное просто, спасибо за идею! Не пропадай, снимай больше)
А как сделать анимированный лендинг фигмы на сайте? Ну к примеру загрузить на Behance
Как оплатить фигму из РФ?
никак, зачем террористическому государству пользоваться благами нормальных людей? продолжайте играть в стрелялки
Плагин уже есть😂
а какой плагин для календаря, подскажите)
годно
Скоро из дизайна можно будет сайты сделать (но все же java не заменим)
это только в платной версии ((
Вау, спасибо за идею!
Я знаю чем займусь на выходных😂👍. Спасибо🎉
А на верх тоже самое?
Фирма для девочек, пацаны должны писать на плюсах!
Спасибо, хорошая подача у вас! вот бы длинное видео вышло по фигме (например с практикой)
Спасибо вам за ваши знания
А как вы создали макет
Кратко и полезно! Благодарю!
Не понимаю как убрать белый фон? Подскажите пожалуйста🙏
Выбираем фрейм и в правой панели находим раздел Fill. Справа от квадрата с цветом будем иконка «минус», нажимаем на нее
Опачки, номер телефона!
Блин это просто взрыв мозга, очень оочень круто
Плагины бесплатные?
Хочу увидите лицо верстальщика, который будет это собирать.
А что тут не так?)
В таком случае верстальщику лучше вообще не идти в свою профессию
никак анимация не получаетя(
Что именно?
Переход
И у меня не получается( Не двигается 😢
Возьму в копилку, спасибо
Как анимацию научится делать ?
Для начала посмотреть мои видео) главное понять принцип, далее можно адаптировать решение под свою задачу
А как ты сделал на первом кадре так что с телефона так посмотрел. Даже не видно что в самой Фигме сидишь
На первой секунде
Приложение Figma Mirror
Вау, я только учусь дизайну но мне это пригодится. Лайк 👍
Не получилось🥲
Что именно?
Figma только для ios?
На windows тоже работает
Она работает даже в браузере!