Коротко: 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? Для обучения хватает бесплатного тарифа: количество собственных файлов в нём ребёнка не ограничивает, а платные возможности нужны командам, а не одному ученику.

Нужна ли отдельная почта для ребёнка? Да, удобнее завести отдельный аккаунт с простым паролем, который знают родители. Работы тогда не теряются во взрослой учётной записи, а доступ к ним остаётся под контролем.

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

Запишитесь на бесплатный пробный урок — за одно занятие ребёнок нарисует первый экран и поймёт, его ли это направление.