Курс Figma Pro

Курс надає великий багаж знань та навичок, які охоплюють від базових до високорівневих, дозволяючи студентам вивчити сучасні тенденції в галузі дизайну та навчитися швидко та правильно працювати з програмою.

Програма курсу

Ознайомлення з інтерфейсом Figma

• Знайомство
• Завантаження та встановлення програми
• Огляд інтерфейсу
• Робота зі сторінками
• Емодзі для позначення сторінок
• Figma Community
• Спільна робота у Figma
• Коментування макетів

Робота з об'єктами

• Створення об'єктів
• Редагування та трансформація об'єктів
• Групування та організація
• Об'єднання фігур
• Створення ліній та їх налаштування
• Використання маски

Векторні інструменти

• Використання векторних інструментів (pen/pencil)
• Створення об'єктів
• Редагування об'єктів

Frame

• Вибір типу фрейму
• Налаштування фрейму
• Налаштування об'єктів всередині фрейму
• Робота із constraints
• Скейлінг за допомогою гарячої клавіші K
• Використання гарячих клавіш

Робота з кольором

• Fill solid
• Fill gradient
• Гарячі клавіші при роботі з кольором
• Стиль кольору

Робота з текстом

• Вибір шрифтів
• Налаштування шрифтів
• Line height
• Letter spacing
• List spacing
• Auto width
• Auto height
• Text align
• Робота з текстовими блоками
• Переведення тексту в криві
• Текстові стилі

Робота з Auto Layout

• Налаштування Auto Layout
• Оновлення Auto Layout 2023
• Створення кнопок через Auto Layout
• Створення карток через Auto Layout

Робота з компонентами

• Материнські і дочірні компоненти
• Варіативність компонентів
• Створення сету кнопок
• Створення сету інпутів
• Прототипування елементів

Робота з ефектами

• Створення ефектів
• Налаштування ефектів
• Створення стилю ефекту

Сітки та їх використання на різних пристроях

• Сітки
• Направляючі
• Створення сітки з 12 колонок
• Налаштування сітки для фреймів
• Стиль сітки

Що таке плагіни та як їх використовувати

• Плагіни для роботи з кольором
• Плагіни для роботи з текстом
• Плагіни для роботи з зображеннями

Icons

• Вимоги до іконок
• Плагіни для роботи з іконками
• Додаткові плагіни для прискорення роботи у програмі

Використання Auto Layout

• Розширені можливості Auto Layout
• Мінімальні та максимальні значення при адаптації макету

Використання Local Variables, частина 1

• Color
• Number
• String
• Boolean

Використання Local Variables, частина 2

• Boolean
• Застосування Boolean у макетах

Просунуте прототипування

• Прототипування за допомогою Local Variables
• Налаштування доданих елементів у корзину. Автоматичне вираховування суми

Робота з графікою та зображеннями

• Вставка та заміна зображень
• Редагування графіки
• Техніка обрізання зображень
• Оптимізація зображень
• Заливка фігур зображенням. Гарячі клавіші

Створення елементів

• Створення різних станів Button
• Створення різних станів Input
• CheckBox
• Radiobutton
• Chips
• Modal windows
• Notifications
• Toggle
• Dropdown
• Tabs
• Tooltip
• Створення таблиць та осередків для них

Об'єднання елементів

• Види навігації
• Використання горизонтального та вертикального меню
• Створення карток
• Прототипування карток за натисканням на кнопку

Підготовка до роботи з макетом

• Особливості UI-Kit
• Основи роботи у FigJam
• Розширені можливості у FigJam

Наповнення макету

• Створення макету сторінки
• Додавання елементів інтерфейсу

Робота з прев'ю

• Збір блоків макету у лендінг
• Smart Animate та її особливості
• Створення анімаційних переходів. Прототипування елементів
• Фіксація позиції елементів при скролі
• Можливості превʼю
• Підбір мокапів під макет для перегляду
• Плагіни для вибору мокапів

Передача макетів у розробку

• Експорт елементів
• Види форматів при експорті
• Збереження макетів у PDF
• Особливості передачі макету у розробку

В кінці курсу виконується дипломний проєкт

Бонуси курсу

Перевірка домашніх завдань викладачем.

Викладачі курсу

Юлія Жуковська - UI/UX Designer at Sednor Holdings Limited