Курси проходять у форматі Live, де буде багато практичних кейсів, лайфхаків та досвіду. А для закріплення знань у тебе будуть домашні завдання з фідбеком від кураторів.

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

Для тих, хто давно планує перейти на Figma з Photoshop чи Sketch, але ще не наважився зробити крок.

Для UX-дизайнерів, які створюють прототипи у Figma та хочуть пришвидшитись у виконанні повсякденних задач і оптимізувати власні трудовитрати.

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

Для UX/UI - дизайнерів, які хочуть перейти від створення простих проектів до розробки більш складних, використовуючи UI-кіти, системи та бібліотеки.

Кому підійде цей курс

Цей курс розповість про один з головних інструментів дизайну - Figma. Основна мета курсу - підвищення швидкості роботи дизайнера, звільнення часу для творчих та креативних задач. Ми розглянемо як прості інструменти, так і прокачані. Буде багато практичних і домашніх завдань, відповідей на питання та зворотного зв'язку.

Про що буде курс

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

Знайомство з куратором. Коротка розповідь про себе та цілі на курс. Знайомство з усіма студентами

Знайомство. Цілі. Презентація

01

Інтерфейс та базові налаштування програми. Геометричні фігури, шари та текстові поля. Швидкі клавіші.

03

Типографіка, робота з текстом у Figma

Інтерфейс та базові налаштування програми. Геометричні фігури, шари, ефекти. Швидкі клавіші.

02

Основні функції Figma

Створення власних іконок. Обробка зображення внутрішніми інструментами Figma. Корисні плагіни для роботи з зображеннями. Швидке створення презентації у Figma, імпорт в різні формати (pdf, keynote, ppt та інші).

04

Зображення. Іконки. Презентації. Експорт/Імпорт

Робота з модульними сітками та constraints. Створення "гумового" макету. Адаптація сайту та базове розширення. Хитрощі для економії часу при адаптації.

Сітки. Фрейми. Адаптація

05

Що таке компоненти. Як їх створити та правильно назвати. Використання компонентів: де, коли та для чого. Панель Assets та альтернативи. Бібліотеки компонентів. Що та навіщо потрібно заносити в стилі.

07

Бібліотеки компонентів та загальні стилі

Знайомство, основні компоненти. Для чого використовувати

06

Figma Jam

08

Перевірка та розбір першого великого завдання

Auto Layout — чудо з небес. Як створювати та в яких випадках використовувати. Об'єднання макетів в єдину систему за допомогою Variants.

Auto Layout і Variants

09

Неймінг та створення основних елементів UI kit (кнопки, Check-Box, Radio Button, Dropdown та інші).

11

UI kit. Дизайн-системи (частина 2)

Що таке дизайн-системи, UI kit, Hover map. Створення власного UI kit.

10

UI kit. Дизайн-системи (частина 1)

Як влаштовані прототипи у Figma. Збираємо клікабельний прототип. Робота зі скролом у макетах. Види анімацій.

12

Прототип і анімація (частина 1)

14

Плагіни. Додаткові можливості. Підготовка на верстку. Види підписок. Командна робота.

Модальне вікно. Налаштування прототипу. Smart Animation. Інтерактивні компоненти.

13

Прототип і анімація (частина 2)

16

Іспит. Зустріч в zoom. Підсумкове обговорення.

15

Питання та відповіді. Розбір додаткового матеріалу.

Автор курсу

Женя Петрук

Chief Design Officer у Vintage

Я відповідаю за всі дизайн-процеси у Vintage, а також за швидкість та ефективність всього відділу дизайну. А ще я — фанат Figma.

Подивись, що ми робимо

Залишились питання?

Ми маємо ще багато чого цікавого для тебе: