Figma для веб дизайнера – відеокурс

Мова викладання в курсі – російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв’язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Чого ви навчитеся

• Внутрішній і зовнішній інтерфейс програми
• Інструменти Figma
• Frame – дуже важлива частина. Фрейм – це основа програми.
• Компоненти
• Contsraints (Обмеження/прив’язки)
• Система сіток і напрямних у Figma
• Плагіни
• Прототипування
• Стилі
• Ти закладеш основу своєї бібліотеки компонентів
• Практична робота зі створення мобільного додатка із застосуванням отриманих знань і своєї бібліотеки компонентів
• Вивчення основ атомарного дизайну

Вимоги

• Комп’ютер та інтернет

Опис
Привіт, мій друже.
Якщо ти цікавишся веб дизайном, то ти напевно чув про такий інструмент, як Figma.
Figma – це найперспективніша програма для веб дизайну в наш час. Вона об’єднала в собі найпередовіші інструменти розроблення дизайну сайтів і вже на голову випереджає конкурентів.
Одним із найбільш важливих плюсів фігми є простота використання і легкість в освоєнні. Так само не варто забувати, що за такими просунутим інструментом майбутнє. Дедалі більше дизайнерів і компаній по всьому світу переходять на Figma. Наприклад, команди дизайнерів Twitter та Uber повністю працюють у Figma. Вона не потребує місця на твоєму жорсткому диску, бо працює в хмарі та миттєво зберігає всі зміни в макеті. У Фігма є контроль версій і ти завжди можеш відкотитися до потрібного моменту.
Фігма не потребує жодної інсталяції, ти можеш її відкрити просто в браузері і працювати. Це означає, що її можна використовувати на будь-якій платформі (Windows, Mac, Linux). Для перших двох, є десктопна версія.

Максимальним плюсом Figma є те, що вона використовує найпередовіші інструменти для роботи веб-дизайнера:
– Компоненти
– Обмеження
– Стилі
– Систему сіток
– Прототипування
Про всі ці інструменти максимально докладно йдеться в цьому курсі. Але мало просто вивчити інструменти, потрібно навчитися використовувати їх у комплексі один з одним і прискорювати робочий процес у рази.
Під час курсу на практиці ми на практиці використовуватимемо всі інструменти програми і створимо твою власну бібліотеку компонентів і макет мобільного застосунку. Так само ми зробимо клікабельний прототип цього додатка.

Для кого цей курс:

• Веб дизайнери-початківці
• Веб дизайнери, які хочуть перейти працювати з фотошопу на Figma

Тривалість курсу – 07:23:18
–
Вступ – 33:32

Завантажити Figma і зареєструватися в програмі – 02:29
У чому головні відмінності Figma від інших редакторів – 03:33
Структура файлів – 11:25
Огляд інтерфейсу програми – 04:40
Збереження і передача файлу – 06:58
Файли Sketch у Figma – 03:27
–
Інструменти Figma – 02:19:14
Гарячі клавіші – 01:37
Move tool, Scale tool – 01:50
Вирівнювання об’єктів0 – 4:52
Прямокутник овал – 12:19
Полігон Зірка – 03:59
Обведення – 03:34
Ефекти – 05:58
Заливка градинет – 09:20
Зображення – 11:44
Маска – 05:20
Перо – 17:42
Інструмент “Текст” – 15:39
Група – 09:46
Frame – 19:08
Булеві групи – 04:38
Коментарі – 03:19
Ефекти накладення – 04:29
Експорт – 04:00
–
Професійні інструменти Figma – 02:12:14
Плагіни – 09:52
Приховані інструменти Figma – 18:03
Стилі – 15:08
Constraints (Обмеження/прив’язки) Частина 1 – 18:48
Constraints (Обмеження/прив’язки) Частина 2 – 13:38
Сітки. Частина 1 – 04:12
Сітки. Частина 2 – 13:46
Компоненти – 07:29
Мультикомпоненти – 11:03
Практика створення мультикомпонента – 20:15
–
Створення своєї бібліотеки компонентів – 21:47
Основа атомарного дизайну – 12:40
Створення основи бібліотеки компонентів – 02:22
Що має бути у твоїй бібліотеці компонентів – 06:45
–
Практика роботи в Figma – 58:45
Практика. Створюємо макет мобільного застосунку. Частина 1 – 26:45
Практика. Створюємо макет мобільного застосунку. Частина 2 – 18:25
Практика. Створюємо макет мобільного застосунку. Частина 3 – 13:35
–
Прототипування в Figma58:05
Створюємо клікабельний прототип мобільного застосунку. Частина 1 – 12:17
Створюємо клікабельний прототип мобільного застосунку. Частина 2 – 04:31
Створюємо клікабельний прототип мобільного додатка. Частина 3 – 09:38
Створюємо клікабельний прототип мобільного додатка. Частина 4 – 01:29
Створюємо клікабельний прототип мобільного застосунку. Частина 5 – 15:31
Ефекти взаємодії в прототипі – 14:01