Press "Enter" to skip to content

Подробный курс по Фигме. Урок 17 — Прототипы в Figma и умные анимации (smart animate)



#figmahelp #фигма #уроки
Привет! Это подробный, понятный, интересный и бесплатный курс по Фигме 🙂 Уроки без воды и по делу на обычном языке и на живых рабочих примерах! В этом уроке посмотрим как в Фигме сделать прототип, какие есть настройки панели прототипирования, как выставлять связи и добавлять анимации. Посмотрим примеры применения умных анимаций (smart animate)

Примеры применения умных анимаций в прототипах — https://www.figma.com/file/ytXAsXHl7wSv0Vl8TghFat/Smart-Animate-Examples/duplicate

Содержание курса:
Урок 1 — Аккаунт, история версий, мультипросмотр http://youtu.be/8es5Q18cH_w
Урок 2 — Гамбургер меню, предпочтения http://youtu.be/1XnyI-ZaKlI
Урок 3 — Инструменты и калькулятор http://youtu.be/4-tRFTcW9H8
Урок 4 — Панель слоев и массовое переименование http://youtu.be/jh2p9MT6ink
Урок 5 — Сетки — http://youtu.be/QCcw_Xx4wLo
Урок 6 — Привязки — http://youtu.be/XIX9BnPCWzE
Урок 7 — Компоненты #1. Простые примеры — http://youtu.be/1lMeBKHjk3o
Урок 8 — Компоненты #2. Сложные примеры — http://youtu.be/AQ_mSaNgvjM
Урок 9 — Компоненты #3. Рокировка — http://youtu.be/UWWdPBrc8fI
Урок 10 — Компоненты #4. Иконки и адаптив — http://youtu.be/r9EzX5zxZDA
Урок 11 — Компоненты #5. Адаптив через дубликат — http://youtu.be/EqNcynW57yM
Урок 12 — Выравнивания, Tidy Up — http://youtu.be/iSDrY_mEAY0
Урок 13 — Текст — http://youtu.be/EnFAmbmtgto
Урок 14 — Цвет, градиенты, изображения — http://youtu.be/4DGHldnHyk0
Урок 15 — Обводка и эффекты: блюры, тени, бордеры — http://youtu.be/CIc2K-wQPtQ
Урок 16 — Библиотека команды — http://youtu.be/xTIL19sDeHo
Урок 17 — Прототипы в Фигме — http://youtu.be/ygkAJM4wl2M
Урок 18 — Панель кода
Урок 19 — Экспорт и интеграция
Урок 20 — Плагины http://youtu.be/g63OThTCRUk

•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне чуть больше 30 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете — Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 15 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!

Подробнее обо мне — https://alexeybychkov.com/about/
15 лет опыта — https://alexeybychkov.com/experience/

Пишу — https://alexeybychkov.com/blog/
Дизайню — https://alexeybychkov.com/cases/
Отзывы — https://www.weblancer.net/users/alexe…

Мои книги:
«Дизайн и фриланс. Начало» — https://alexeybychkov.com/first-book-…
«Дизайн и фриланс. Новый уровень» — https://alexeybychkov.com/second-book…

Хелп по Фигме: уроки, видео, советы, фишки — https://figma.help

•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

💰 Поддержать канал
Яндекс.Деньги — 41001844074230
Вебмани wmr — R472843801533
Вебмани wmz — Z162169199857

#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance

20
Leave a Reply

avatar
20 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Alexey BychkovShadowStyleВладислав ЧигринVadimГалина Михайлова Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Alexander Voynovskiy
Guest
Alexander Voynovskiy

Алексей, спасибо большое за уроки! Если вдруг нечего будет снимать после курса про Фигму, то было бы интересно узнать какие-то фишки про дизайн мобильных приложений, если таковые имеются в твоём арсенале 🙂

Sam Stepanishchev
Guest
Sam Stepanishchev

Спасибо! Крутой контент!

Vlad S
Guest
Vlad S

ОГРОМНОЕ Спасибо!!! Быстро и доступно! 😉

Tatyana Shurinova
Guest
Tatyana Shurinova

Благодарю за такой полезный ролик! С юмором и по делу! Однозначно лайк!!!

Даркиш Дарк
Guest
Даркиш Дарк

Ты мой герой! Офигенный обзор, и вообще весь курс офигенный!

Галина Михайлова
Guest
Галина Михайлова

Спасибо за классное видео

Vadim
Guest
Vadim

Чтоб при наведени появлялась тень под кнопкой нужно делать копию страницы… Не удобно

Владислав Чигрин
Guest
Владислав Чигрин

два месяца ждал, ура! Спасибо)

ShadowStyle
Guest
ShadowStyle

Круто-круто, давно ждал обзор прототипов от тебя! Спасибо!!

DreamerMVP
Guest
DreamerMVP

Спасибо брат.

braveheart06111984
Guest
braveheart06111984

Man, how did you get that x-ray view here? 🙂 https://youtu.be/ygkAJM4wl2M?t=500

Novval Novval
Guest
Novval Novval

!!!!!!!!!!!!!!!

Evgeniy Volkov
Guest
Evgeniy Volkov

Вот здесь абсолютно все понятно! Время прошло махом! Спасибо за интересный ролик!

Алёна Вобликова
Guest
Алёна Вобликова

Горизонтальный скроллинг ферйма внутри фрейма это топчик!

Виктор Алексеевич
Guest
Виктор Алексеевич

Отличное видео, очень хороший курс, будет полезным 😉

Ruzan Hakobyan
Guest
Ruzan Hakobyan

Интересный и грамотный урок.

nexus way
Guest
nexus way

Отдельное спасибо за анимации! И тебе и Фигме )) Но до ХД все равно не дотягивают

Ameliance SkyMusic
Guest
Ameliance SkyMusic

Мне кажется интерфейса ПК нет, потому что ты же и так все видишь на ПК))

Вячеслав Орищенко
Guest
Вячеслав Орищенко

Спасибо за урок. Очень полезно =)))

Alexey Bychkov
Guest
Alexey Bychkov

Не жадничайте на комментарии и лайки! 🙂

0:48 — как запустить и просматривать прототип
2:47 — заготовки телефонов и планшетов
4:12 — как указать стартовый фрейм
5:05 — обзор взаимодействий
7:15 — как расставлять связи в прототипах
12:13 — обзор анимаций в прототипах
18:20 — добавляем анимацию меню-гамбургера с помощью умных анимаций
25:10 — добавляем горизонтального скрола
26:35 — добавляем анимацию появления попапа
31:19 — примеры применения умных анимаций в прототипах — https://www.figma.com/file/ytXAsXHl7wSv0Vl8TghFat/Smart-Animate-Examples/duplicate
33:21 — фигма-чат — t.me/figmachat