Усі курси
UX/UI дизайн
Контакти
Вакансії
Статті про UX/UI
UX/UI дизайн
Усі курси
Особистий кабінет
Усі курси
Cтатті про UX/UI
Блог Uknow School

Як створювати красиві презентації у Figma

Навчіться створювати круті слайди для презентацій та ефективно презентувати їх за допомогою Figma.
З того часу, як ви відкрили для себе Figma, ви звикли до всіх її переваг і вважаєте, що всі інші інструменти для роботи з графікою "недостатньо хороші". Ви хочете створювати гарні слайди, але Powerpoint або Google Slides обмежують вашу уяву та ефективність.

Що ж, не турбуйтесь про це! Ви можете зробити презентацію прямо у Figma. Ми розповімо вам про те, як розробляти красиві презентації у Figma швидко та ефективно, а також як професійно представляти їх замовникам.
Порада: Перш ніж почати, скопіюйте цей файл із шаблонами слайдів із спільноти Figma.

1. Почніть із фреймів

Для створення слайдів використовуйте фрейми Figma. Щоб намалювати фрейм, виберіть відповідний інструмент у навігаційній панелі у верхньому лівому куті або натисніть клавішу F. Один фрейм = один слайд вашої майбутньої презентації.
Фрейм створює своєрідну рамку для вашого слайда, і всі елементи, які ви в нього перетягнете, стають частиною кадру.

Ідеальні розміри слайду (і, відповідно, фрейму) — 1270 x 720 px.

Порядок слайдів

Порядок слайдів у режимі презентації (запускається кнопкою, розташованою у верхньому правому куті) залежить від їх координат на полотні. Спочатку відтворюються фрейми по осі X зліва направо, а потім по осі Y зверху вниз.

Це означає, що якщо ваші слайди розташовані в два ряди, то спочатку будуть показані ті, що знаходяться у верхньому ряду, ліворуч праворуч, а потім почне відтворюватися другий рядок, знову ж таки ліворуч праворуч — як при читанні книги.
Порада: Увімкніть властивість Clip content, щоб графічні елементи не виходили за краї фреймів.

2. Дизайн

Переходимо до найвеселішої частини - принаймні для мене. Я завжди починаю з вибору палітри кольорів. Для натхнення використовую сайт coolors.co.
Потім я розміщую на слайдах фрагменти тексту і, можливо, фоновий патерн або фігури, щоб отримати повне уявлення про те, як виглядатиме моя фінальна презентація.

3. Додаємо іконки та ілюстрації

Красиві іконки та ілюстрації завжди роблять слайди цікавішими, а ключові тези більш запам'ятовуються. Щоб швидко знайти і додати ілюстрації до презентації, ви можете використовувати Iconfinder. Цей сервіс дозволяє швидко знаходити, копіювати та вставляти графічні елементи у файл Figma. Найкраще всього вибирати ілюстрації у форматі SVG. Вам навіть не доведеться шукати та встановлювати додаткові плагіни!
Порада: завантажте безкоштовний пакет ілюстрацій, який ми використовували для наших слайдів.

4. Налаштуйте графічні елементи

Редагування розміру

Використовуйте інструмент Scale, коли ви збільшуєте або зменшуєте графіку. Ви можете увімкнути його, натиснувши клавішу K або вибравши відповідну опцію в меню (під іконкою курсору). Так ви збережете всі властивості графічних елементів.

Зміна кольору

Якщо ви хочете, щоб ілюстрації або іконки відповідали палітрі кольорів вашого бренду, найшвидший спосіб досягти цього — натиснути на ілюстрацію, знайти розділ Selection colors на панелі праворуч, вибрати колір, який ви хотіли б змінити, і підібрати новий, відповідний вашій палітрі.

Таким чином ви перефарбуєте всі елементи одного кольору усередині ілюстрації.

Додавання анімації

Ви можете додавати до презентації різноманітні ефекти анімації. Для цього необхідно створити копію потрібного слайда та змінити параметри елементів (положення, непрозорість), а потім перейти в панель Prototype та налаштувати перехід (треба вибрати Smart Animate).

5. Презентуйте професійно

Щоб увімкнути режим презентації, натисніть кнопку відтворення у верхньому правому куті. Ви можете переміщатись між слайдами за допомогою стрілок.
Якщо ви хочете поділитися презентацією, зробленою у Figma, ви можете згенерувати посилання за допомогою блакитної кнопки Share prototype (в режимі презентації).
Відмінний ресурс із безкоштовними шаблонами презентацій для Figma — https://www.templatery.co/

Слідкуй за Uknow School

Сайт — https://uknow.school/
Instagram — @uknow.school
TikTok — @uknow.school
ПРАКТИКА