Коротко: макет (mockup) — це статична картинка інтерфейсу, а прототип — той самий макет, у якому кнопки й екрани зв'язані переходами і працюють як у справжньому застосунку, хоча коду за ними ще немає. У Figma прототип роблять із тих самих елементів макета у вкладці Prototype.
Чим макет відрізняється від прототипу простими словами
Макет — це фотографія будівлі: видно, як вона виглядає, але пройтися нею не можна. Прототип — це вже екскурсія цією будівлею: натиснув на двері — вони "відчинилися", натиснув кнопку меню — екран змінився. Пікселі в обох випадках ті самі, різниця лише у зв'язках між екранами.
Навіщо взагалі робити прототип, якщо є макет
Прототип показує, що відбувається між екранами, а не тільки як виглядає кожен з них окремо. Саме на цьому етапі спливають проблеми навігації: кнопка є, а куди вона веде — незрозуміло; перехід є, а логічного шляху назад немає. Помітити це на макеті майже неможливо, а на прототипі — видно одразу, варто лише пройти ним як звичайний користувач.
У серпні 2026 року Figma оновила Auto Layout — додала два нові варіанти розподілу відступів між елементами, "Around" і "Evenly" (за офіційними release notes Figma). Це якраз про те, що відбувається всередині прототипу: коли контенту стає більше чи менше, елементи мають підлаштовуватися самі, а не "з'їжджати" — раніше для цього доводилося все налаштовувати вручну.
Що входить у навчання прототипуванню на курсі
На курсі UI/UX дизайну у Figma (12–18 років, 18 місяців) дитина проходить шлях від першого макета до інтерактивного прототипу і власного портфоліо — це прямо зазначено в програмі курсу. Портфоліо збирають не зі статичних картинок, а з робочих прототипів: саме так дизайнер показує не "як це виглядає", а "як це працює".
Чи можна зробити прототип без коду?
Так, повністю. Уся логіка переходів налаштовується всередині Figma кліками — обрав елемент, вказав, куди він веде при натисканні, обрав тип анімації переходу. Написання коду в цьому процесі не бере участі взагалі.
Розробник взагалі дивиться на прототип, чи тільки на макет?
На обидва. З макета розробник бере точні кольори, відступи й розміри шрифтів. З прототипу — розуміння, як мають поводитися екрани: що відкривається по кліку, якою анімацією, у якому порядку. Без прототипу розробнику доводиться додумувати логіку самому — а це майже завжди не те, що мав на увазі дизайнер.
Вайрфрейм, макет і прототип — це не одне й те саме
Плутанина зазвичай виникає ще на кроці раніше за прототип. Вайрфрейм — це чорно-біла схема з прямокутниками замість кнопок і смужками замість тексту: він показує тільки розташування блоків, без жодного дизайну. Макет додає до цієї схеми колір, шрифти й реальні зображення. Прототип додає до макета переходи. Тобто це не три різних інструменти, а три послідовні шари деталізації одного й того самого екрана.
Пропускати вайрфрейм і одразу малювати кольоровий макет — поширена помилка початківців: коли розташування блоків не продумане заздалегідь, макет доводиться переробляти майже повністю, щойно з'являється реальний текст замість "рибного" placeholder-тексту.
Три рівні прототипу — від паперу до майже застосунку
Слово «прототип» ховає під собою три дуже різні речі, і плутанина тут коштує часу.
Паперовий. Екрани намальовані олівцем на аркушах, «натискання» — це коли ведучий підкладає наступний аркуш. Звучить примітивно, працює чудово: помилки в порядку кроків видно за десять хвилин, і не шкода викинути.
Схематичний. Ті самі вайрфрейми, але вже у Figma й зі зв'язками. Кольорів немає, шрифт один, картинки — сірі прямокутники. Саме на цьому рівні перевіряють навігацію, поки ніхто не встиг закохатися в красиву картинку.
Детальний. Готовий макет із кольорами, реальним текстом і анімацією переходів. Його показують замовнику й кладуть у портфоліо.
Новачок майже завжди хоче одразу третій. А досвід каже інше: година на другому рівні економить п'ять годин переробки на третьому.
Стани, про які забувають усі
Прототип, у якому все йде добре, неповний. Реальний застосунок постійно потрапляє в ситуації, яких на макеті немає:
- Порожній екран. Кошик без товарів, список без записів. Що бачить людина — просто білизну чи підказку, що робити далі?
- Завантаження. Дані ще не прийшли; екран має щось показувати, інакше здається зламаним.
- Помилка. Немає зв'язку, неправильний пароль, товар закінчився.
- Довгий текст. Назва в три рядки замість одного — і картка розповзається.
Підліток, який намалював ці чотири стани хоча б для одного екрана, одразу починає виглядати як дизайнер, а не як людина, що вміє гарно розставляти прямокутники.
Як перевірити прототип на живій людині
Тест робиться за п'ятнадцять хвилин і не потребує нічого, крім телефона й одного знайомого. Формулюється завдання — «знайди піцу без грибів і додай у кошик» — і далі головне правило: мовчати. Не підказувати, не пояснювати, не виправдовуватися. Дивитися, де людина затримується й куди тицяє даремно.
Троє таких людей дають більше, ніж будь-яка кількість власних роздумів. І майже завжди приносять один і той самий неприємний висновок: очевидне для автора нікому більше не очевидне.
Помилки, які видно в дитячих прототипах одразу
- Немає шляху назад. Зайшов у розділ — і застряг, бо кнопку повернення не намалювали.
- Анімація заради анімації. Кожен перехід із поворотом і відскоком; на третьому кліку це дратує.
- Кнопки, які нікуди не ведуть. Половина елементів живі, половина ні, і людина втрачає довіру до всього прототипу.
- Двадцять екранів замість п'яти. Для показу достатньо одного цілісного сценарію, доведеного до кінця.
Скільки екранів достатньо для показу
Спокуса намалювати весь застосунок велика, а результат передбачуваний: двадцять напівготових екранів і жодного завершеного сценарію. Для портфоліо й для розмови з замовником потрібен один шлях, доведений до кінця: відкрив, знайшов, обрав, підтвердив. Чотири-п'ять екранів, у яких працює кожна кнопка, справляють враження сильніше, ніж двадцять красивих картинок без зв'язків. Решту сценаріїв достатньо описати словами — їх домалюють, коли проєкт піде в роботу.
Прототип — це вже програма?
Прототип — це вже програма? Ні. Він виглядає й поводиться як застосунок, але всередині немає жодного рядка коду: це набір картинок, пов'язаних правилами переходу.
Скільки часу займає перший прототип? Простий сценарій із трьох-чотирьох екранів підліток пов'язує за одне заняття. Довше йде не техніка, а рішення, що саме має статися після натискання.
Чи потрібно це, якщо дитина хоче малювати ілюстрації? Для ілюстратора — ні. Прототипування потрібне тим, хто робить інтерфейси; це різні професії, хоч обидві й називають дизайном.
Розібратися в різниці між статичною картинкою і робочим прототипом найпростіше на практиці — це одна з перших тем, з якою стикається дитина після того, як починає працювати у Figma.
