October 4, 11:00

Онлайн-воркшоп

Системний дизайн із Variables y Figma

Разом з Віталієм Дячуком опануйте роботу зі змінними у Figma — від основ до застосування в системному дизайні, що легко масштабується.

гортайте, щоб дізнатись більше

Що ви отримаєте на воркшопі

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

Мова викладання: українська

Час на проходження: 4 години

Цікавий майстерклас

Сесія питань та відповідей

Доступ до запису воркшопу

Бриф для самостійної роботи

Розбір роботи та рекомендації

Отримання сертифіката

Кому стане в пригоді

Дизайнерам інтерфейсів

Вебдизайнерам

Продуктовим дизайнерам

Тімлідам

Our teachers

Віталій Дячук

Віталій Дячук

Провідний дизайнер ікомерс-проєктів у League Design Agency

Віталій — досвідчений дизайнер з понад 8 роками досвіду у комерційному дизайні та один з улюблених викладачів спільноти Креативної Практики.

В його портфоліо проєкти для українських та міжнародних компаній, таких як Luxoft, iHerb, Vogue, Taryan Towers та британський необанк Harbour.

Його глибинна експертиза — комерційні платформ та майданчики для онлайн-торгівлі. А ще він захоплюється 3D-дизайном і моушн-анімацією, що допомагають робити взаємодію з цифровими продуктами виразнішою.

Програма воркшопу

The event schedule is approximate and may change during the event.

11:00

Вступ та знайомство

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

11:10

Блок 1. Концепція Variables

Різниця між стилями та змінними. Структура токенів і принцип наслідування значень (aliasing). Аналіз трирівневої системи: базові (primitives), смислові (semantic) та компонентні (component) змінні. Пояснення наслідування як ключового механізму зв’язку між змінними.

11:30

Блок 2. Робота з кольором та компонентами

Створення колірних змінних та інтеграція змінних у компоненти. Смислові назви, рівні змінних, правила найменування токенів. Використання обмеження видимості (scoping) для приховування базових змінних. Тестування режимів перемикання тем.

13:00

Перерва на каву

13:15

Блок 3. Адаптивність та динамічний контент

Створення адаптиву, шкали відступів та розмірів (spacing scale). Налаштування режимів Desktop та Mobile. Застосування числових змінних до відступів (padding) та проміжків (gap) для побудови адаптивної сітки. Практика зі змінними типу String та Boolean. Створення адаптивного хедера (показ/приховування меню) та динамічного банера (зміна зображень залежно від теми). String: короткий приклад використання для локалізації тексту. Робота з плагінами.

14:45

Сесія питань та відповідей

Тут ви зможете поставити Віталію ваші питання

Приклад практичного завдання

Після цього воркшопу ви

Опануєте роботу з Variables

На свідомому та професійному рівні

Навчитесь структурувати Tokens

Для зручної підтримки й масштабування дизайну

Розумітимете типи змінних

Колірні, числові, текстові, boolean та alias

Працюватимете з mode-режимами

Наприклад, для світлої та темної тем

Інтегруєте Variables у компоненти

З гнучким підходом до налаштувань під конкретні завдання

Створите свою систему змінних

І почнете застосовувати її в реальних проєктах

Відповіді на деякі важливі запитання

Ні, цей воркшоп необхідно купувати окремо.

Так, після проведення події, ви отримаєте доступ до запису.

Так, якщо ви вже маєте базові навички роботи з Figma — знаєте, як працюють компоненти та авторозмітка. Якщо ні — радимо спочатку пройти відповідні курси на нашій платформі.

Так! Після цього воркшопу ви матимете сертифікат.