Коротко: Figma працює в браузері й безкоштовна для навчання — ставити нічого не треба. Складною вона здається перші два заняття: далі підліток збирає макет сам, бо інструментів у ній менше, ніж у Photoshop.

Коли ми вперше показуємо підліткам Figma, вони часто кажуть: «Це занадто складно». А через місяць ці ж підлітки самостійно роблять інтерфейси мобільних додатків і питають, як додати анімацію. Figma — це не страшно. Це цікаво, просто спочатку не виглядає так.

Чому саме Figma, а не Photoshop

Figma — хмарний інструмент для дизайну, яким користуються дизайнери Google, Spotify, Airbnb і тисячі стартапів по всьому світу. Працює прямо в браузері, нічого не потрібно встановлювати. Безкоштовна для студентів і особистих проєктів.

Але головне — вона ідеально підходить саме для навчання: інтуїтивний інтерфейс, миттєве збереження, робота в команді в реальному часі. Учень і викладач бачать одну й ту саму сторінку одночасно, навіть якщо заняття онлайн.

Перше заняття — не теорія

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

  • Тиждень 1–2: фрейми, прямокутники, текст, кольори, іконки
  • Тиждень 3–4: компоненти і варіанти — щоб не малювати одну кнопку 50 разів вручну
  • Тиждень 5–6: перша мобільна сторінка з нуля
  • Тиждень 7–8: прототипування — кнопки «натискаються», екрани переходять один в інший

Думка викладача

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

Чи треба вміти малювати

Ні. Дизайн у Figma — це не малювання від руки, а компонування: розміщення елементів, вибір кольорів, налаштування відступів. Більше схоже на LEGO, ніж на живопис. Аналітичні, системні діти часто досягають чудових результатів саме тому, що дизайн тут базується на правилах і сітках, а не на художньому таланті.

Що буде готово до кінця курсу

Власний кейс у Figma: дизайн мобільного застосунку або сайту з кількох екранів, з робочим прототипом, де все «натискається». Це можна показати при вступі на дизайн-факультет або додати в перше портфоліо.

Питання батьків

З якого віку реально почати?
У нас є учні, які стартували в 9–10 років — і через 4 місяці показували роботи не гірші за деяких дорослих новачків.

Скільки часу займе перший результат?
Перший власний екран — уже на першому занятті. Повний прототип із кількох сторінок — приблизно через два місяці регулярних занять.

Уточнення про тижні вище

Ці вісім тижнів описують саме освоєння Figma — той відрізок, коли дитина займається макетами. На курсі «UI/UX дизайн у Figma» він настає не з першого дня: у програмі спершу йде верстка, а Figma стоїть на темі 21. Хто приходить займатися дизайном інтерфейсів окремо, проходить цей блок одразу; хто йде повним курсом — трохи пізніше, зате з розумінням, як сторінка збирається насправді.

Чим Figma влаштована інакше

Дитина, яка бачила Word або Paint, перші хвилини шукає кнопку «Зберегти» — і не знаходить. Файл зберігається сам, постійно, а вся історія змін лежить поруч: можна відкотитися на вчорашній вечір. Це знімає найбільший дитячий страх — «я щось натиснув і все зіпсував».

Друга відмінність — фрейм. У звичайному редакторі є полотно, на якому лежать об'єкти. У Figma полотно нескінченне, а фрейм — це рамка, всередині якої живе конкретний екран. Фреймів на одному полотні може бути п'ятдесят: усі екрани застосунку видно одночасно, як розкладені на столі аркуші. Саме тому в Figma зручно думати про продукт цілком, а не про окрему картинку. І саме тому вимоги до комп'ютера в неї скромніші, ніж очікують батьки.

П'ять інструментів, яких вистачає на перші місяці

  • Фрейм (F) — рамка екрана з готовими розмірами під телефон, планшет, монітор.
  • Прямокутник (R) — з нього виходять картки, кнопки, підкладки, смуги.
  • Текст (T) — заголовки й абзаци; тут же розмір, накреслення, міжрядковий інтервал.
  • Auto Layout (Shift+A) — те, що змушує блоки самостійно вирівнюватися й тримати відступи.
  • Компонент — елемент, який використовується багато разів і змінюється в одному місці.

Решта інструментів з'являється в міру потреби. Перевантажувати дитину панеллю на сорок кнопок сенсу немає: у дизайні виграє не той, хто знає більше інструментів, а той, хто акуратніше складає екран із п'яти. Про правила, за якими його складають — скільки брати кольорів і шрифтів, — є окрема розмова.

Порядок у файлі — навичка, а не педантизм

«Rectangle 47», «Frame 12 copy 3», «Group 8» — так виглядає файл дитини через два тижні, і поки макет один, це не заважає. Заважати починає на третьому проєкті, коли треба щось знайти. Тому на курсі відразу вводиться мінімальний порядок: екрани названі своїми іменами («Головна», «Кошик»), однакові елементи зібрані в компоненти, чернетки лежать на окремій сторінці, а не поруч із чистовиком.

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

Файл, який можна показати з будь-якого пристрою

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

Плагіни: коли допомагають і коли заважають

У Figma є каталог доповнень: генератори тексту, іконки, перевірка контрасту, вставка фотографій. Два-три з них дійсно економлять час. Але є пастка: дитина починає збирати макет із чужих готових блоків і перестає розуміти, з чого він складається. Робоча домовленість на курсі — перші місяці без плагінів, окрім перевірки контрасту; коли рука поставлена, доповнення стають інструментом, а не милицею.

Чого у Figma краще не робити

Figma — редактор інтерфейсів, і поза цим завданням вона слабка. Обробити фотографію, прибрати зайвий об'єкт, зробити колаж — це Photoshop. Намалювати ілюстрацію чи логотип у кривих — Illustrator. Підготувати файл до друку в друкарні — теж не сюди. Дитині корисно почути це рано, щоб не воювати з програмою, яка просто не про те.

Ще кілька питань від батьків

Скільки коштує Figma? Для навчання вистачає безкоштовного тарифу: кількість власних файлів у ньому не обмежує дитину, а платні можливості потрібні командам, а не одному учню.

Чи потрібна окрема пошта для дитини? Так, зручніше завести окремий акаунт із простим паролем, який знають батьки. Роботи тоді не губляться в дорослому обліковому записі, а доступ до них залишається під контролем.

А якщо дитина занудьгує через два тижні? Найчастіша причина — вона робить вправи, а не свою річ. Лікується швидко: дайте зробити макет того, що їй справді цікаво, — сторінку улюбленої гри, застосунок для догляду за котом, афішу шкільного заходу.

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