June 6, 11:00

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

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

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

~~1 750~~ 1 225 ₴ -30% till 23.05

Єдиноразовий платіж, з ПДВ

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

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

Знання і навички, які дозволять вам працювати зі змінними у 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

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

Познайомимось, поговоримо про формат і програму воркшопу.

11:10

Блок 1. Як працюють змінні у Figma

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

11:30

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

Створимо колірні змінні та інтегруємо їх у компоненти. Розберемо смислові назви, рівні змінних і правила найменування токенів. Поговоримо про обмеження видимості для приховування базових змінних. Протестуємо режими перемикання тем.

13:00

Перерва

13:15

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

Налаштуємо шкали відступів і розмірів, а також режими для веб- і мобільної версій. Застосуємо числові змінні до проміжків і побудуємо адаптивну сітку. Розглянемо текстові змінні та булеві значення. Створимо адаптивний хедер (показ/приховування меню) і динамічний банер (зміна зображень залежно від теми). Попрацюємо з плагінами.

14:45

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

Обговоримо результати та відповімо на запитання. Розглянемо домашнє завдання.

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

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

Опануєте роботу зі змінними

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

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

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

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

колірні, числові, текстові, булеві та змінні-аліаси.

Працюватимете з режимами відображення

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

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

з гнучким підходом під конкретні завдання.

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

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

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

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

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

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

Так! Після проходження воркшопу та виконання завдань ви отримаєте сертифікат. Це підтвердження стане приємним завершенням навчального процесу.