Цей курс проводиться у форматі записаних відеоуроків з перевіркою завдань викладачем.
Цей курс ідеально підходить для тих, хто бажає опанувати використання програми Figma як інструменту для розробки вебдизайну.
Також даний курс підійде розробникам, які бажають зробити свою взаємодію з командою дизайнерів більш продуктивною і зрозуміти, як можливості є у даного інструменту.
Курс надає великий багаж знань та навичок, які охоплюють від базових до високорівневих, дозволяючи студентам вивчити сучасні тенденції в галузі дизайну та навчитися швидко та правильно працювати з програмою.
Як проходить навчання?
- Отримуєш доступ до відеуроків
- Виконуєш домашні завдання для закріплення знань
- Ментори курсу перевіряють домашні завдання та надають фідбек
ЦІЛІ КУРСУ
- Оволодіти програмою Figma для створення інтуїтивно-привабливих інтерфейсів
- Зрозуміти ключові принципи UI/UX з фокусом на використанні програми Figma для ефективного створення інтерфейсів
- Навчитись використовувати всі ключові можливості програми та ефективне їх застосувати у роботі над макетами
- Впровадити сучасні практики у галузі UI/UX Design з використанням програми Figma (а саме, використання Local Variables та просунутого прототипування у програмі Figma)
- Навчитись створювати прості анімації елементів
ВИВЧАЄМО ТАКІ ТЕХНОЛОГІЇ
- Figma
- FigJam
- Local Variables
БОНУСИ КУРСУ: Перевірка домашніх завдань викладачем.
Записатися на проходження курсу
Сертификат
Організатор
Программа курса
Ознайомлення з інтерфейсом 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
- Особливості передачі макету у розробку
В кінці курсу виконується дипломний проєкт.