Figma для початківців: як опанувати основи за 4 тижні

День 1

Налаштуйте робоче місце

Зареєструйтеся на figma.com: безкоштовного тарифу вистачить на весь цей план. Можна працювати в браузері або встановити застосунок для комп'ютера. Створіть перший файл дизайну і за годину розберіться з інтерфейсом:

• •ліва панель — шари й сторінки файлу;
• •права панель — властивості виділеного об'єкта: розмір, колір, текст, ефекти;
• •верхня панель інструментів — фрейм, фігури, перо, текст, коментарі;
• •полотно — нескінченна робоча площа; масштаб — Ctrl/Cmd і коліщатко миші.

💡 Відкрийте Figma Community і подивіться кілька безкоштовних файлів інших дизайнерів: так швидко видно, як влаштовані акуратні макети.

Тиждень 1

Фрейми, фігури й текст

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

• •чим фрейм відрізняється від групи і чому для екранів потрібен саме фрейм;
• •як вирівнювати елементи й розподіляти відступи між ними;
• •як налаштувати шрифт, розмір, міжрядковий інтервал і зберегти це як стиль тексту;
• •як задавати відступи, кратні одній величині (наприклад, 8 px), щоб макет виглядав охайно.

Тиждень 2

Автолейаут

Автолейаут (Shift + A) змушує елементи самі розташовуватися в ряд чи стовпчик і підлаштовуватися під вміст. Почніть з кнопки: текст усередині фрейму з автолейаутом, відступи з боків. Змініть текст на довший — кнопка має розтягнутися сама. Далі переробіть на автолейаут увесь екран входу з першого тижня, а потім зберіть картку товару й список із кількох таких карток.

💡 Якщо макет «розлазиться», перевірте налаштування розміру елемента: фіксований розмір, підлаштування під вміст чи заповнення контейнера. Більшість проблем — саме тут.

Тиждень 3

Компоненти, варіанти й стилі

Компонент — це елемент, який ви створюєте один раз і повторюєте скільки завгодно: змінили головний компонент — оновилися всі копії. Зробіть компонентами кнопку, поле вводу й картку з минулого тижня. Додайте варіанти: кнопка звичайна, при наведенні, неактивна; поле порожнє, заповнене, з помилкою. Винесіть кольори й текст у стилі або змінні, щоб змінювати їх в одному місці.

• •назвіть компоненти зрозуміло: Button / Primary, Input / Error;
• •перевірте, що кожен компонент тримається на автолейауті;
• •зберіть зі своїх компонентів новий екран і подивіться, скільки часу це економить.

Тиждень 4

Прототип і перший міні-проєкт

Зберіть невеликий сценарій із трьох-п'яти екранів: наприклад, вхід → список → картка товару → кошик. У режимі Prototype з'єднайте кнопки з екранами, додайте переходи й запустіть перегляд. Покажіть прототип знайомій людині й попросіть виконати задачу без підказок: де вона зупиняється, там і правки.

💡 Поділіться посиланням на файл у спільноті й попросіть фідбек на конкретне: структуру шарів, автолейаут чи логіку переходів. Конкретне питання дає корисну відповідь.