Кликабельный прототип в Figma: пошаговый разбор для новичка

Заказчик написал в пятницу вечером: «Покажите, как это будет работать, по картинкам я не понимаю». Кликабельный прототип в Figma закрывает такую просьбу за один вечер: четыре экрана, десяток связей, ссылка в мессенджер. Я собрал его с первого захода неправильно и переделывал дважды.

Ниже весь путь целиком: что делал, где сломалось, чем чинил, что осталось в итоге. Сразу оговорюсь про границы: прототип показывает поведение интерфейса и ничего не говорит про скорость приложения, реальные данные и вёрстку.

Что разбираю на этой одной задаче:

• как из четырёх статичных экранов получить поток, который открывается по ссылке и листается пальцем;
• три ошибки первого захода: группы вместо фреймов, связь на случайном слое, ссылка с правом редактирования;
• починку по шагам: пресеты фреймов, компоненты, вкладка Prototype, стартовая точка потока;
• сколько это стоит на бесплатном тарифе и что делать с доступом к Figma из России в 2026 году.

Что за задача: кликабельный прототип за один вечер?

Итог раздела: заказчику нужно было ощущение живого приложения: нажал на мастера, попал в карточку, выбрал время, увидел подтверждение. Статичные картинки такого не дают. Четыре экрана, одиннадцать связей, срок до понедельника. Собирается всё на бесплатном тарифе Starter: одна команда с тремя файлами и история версий на 30 дней по справке Figma.

Приложение для записи в барбершоп. Экраны такие: список мастеров, карточка мастера, выбор даты и времени, экран подтверждения. Макеты уже нарисованы, дизайн утверждён, вопрос был единственный: понятно ли человеку, куда нажимать.

Прототип в Figma нужен ровно для этого. Он превращает статичный макет в кликабельную модель: зритель нажимает на элемент и попадает на другой экран, как в настоящем приложении. Разработчики к нему ещё не приступали, кода нет, а проверить логику надо уже сейчас.

Вводные, с которыми я стартовал: бесплатный аккаунт, один файл, четыре готовых экрана и три часа времени. Если базовые действия в редакторе для вас пока новые, начните с базового гайда по работе в Figma, там разобраны панели и инструменты.

С чего я начал собирать прототип в Figma?

Итог раздела: я открыл вкладку Prototype в правой панели, выделил кнопку на первом экране и потянул плюсик к следующему экрану. По справке Figma связь состоит из трёх частей: hotspot (объект, с которого начинается взаимодействие), connection (стрелка) и destination (целевой фрейм). Логика простая, поэтому первые три связи заняли минут пять.

Порядок был такой: расставил экраны на холсте слева направо по сценарию, переключился на вкладку Prototype, выделял кликабельный элемент и тянул от него стрелку.

Триггер по умолчанию Figma ставит сама: On click для десктопа и On tap для мобильных макетов. Действие тоже подставляется автоматически: Navigate to, то есть переход на выбранный фрейм. Справка Figma перечисляет и другие триггеры: While hovering, While pressing, Mouse enter, Mouse leave, After delay, On drag. Новичку из всего списка нужны два: клик и задержка.

Анимацию я поставил Move in с длительностью 300 миллисекунд. В списке анимаций лежат Instant, Dissolve, Smart animate, Move in и Move out, Push, Slide in и Slide out. Длительность справка допускает от 1 миллисекунды до 10 000, но всё, что длиннее 500, на демонстрации выглядит вязко.

Через двадцать минут у меня было одиннадцать синих стрелок между экранами. Я нажал Present и понял, что радовался рано.

Что пошло не так на первом заходе?

Итог раздела: сломалось три вещи. Экраны оказались группами, а стрелки цеплялись за случайные слои внутри них. Стартовая точка потока стояла на экране подтверждения, поэтому презентация открывалась с конца. Ссылку я отправил на файл с правом редактирования, и заказчик первым делом сдвинул шапку.

Первое. Экраны я собирал в спешке и часть из них была группами (Group), а не фреймами. Связь прототипа в Figma ведёт на фрейм, поэтому половина стрелок просто не создалась, а те, что создались, вели в пустоту.

Второе. Кнопка «Записаться» на карточке мастера состояла из прямоугольника и текста, не объединённых ни во что. Я потянул стрелку от текста. В презентации кликабельными оказались только буквы: попадаешь пальцем чуть мимо и ничего не происходит.

Третье, самое обидное. Стартовая точка потока встала на тот фрейм, где я сделал первую связь. Это был экран подтверждения. Заказчик открыл ссылку и увидел финальный экран «Вы записаны», ещё ничего не выбрав.

Четвёртое я осознал только на следующее утро. Я скопировал ссылку из адресной строки браузера и вставил в чат. Такая ссылка ведёт в редактор. Заказчик зашёл, случайно потащил слой и написал: «У вас тут всё поехало».

Как собрать фреймы и компоненты для прототипа в Figma?

Итог раздела: чинить надо с основания. Каждый экран становится фреймом, а не группой: инструмент Frame, затем готовый пресет размера в правой панели. Каждая повторяющаяся кнопка становится компонентом. После этого правка в мастер-компоненте разлетается по всем экземплярам сразу, и одиннадцать связей перестают отваливаться при каждой мелкой правке.

Фрейм в Figma работает как холст экрана: у него есть границы, он обрезает содержимое и он может быть целью перехода. Группа ничего этого не умеет. Справка Figma предлагает готовые пресеты фреймов под популярные устройства: включаете инструмент Frame и выбираете размер в правой панели, отдельно для десктопа, телефона и планшета.

Я пересобрал все четыре экрана на пресете телефона, одного размера. Это важнее, чем кажется на глаз: если фреймы разного размера, в режиме презентации содержимое прыгает при каждом переходе.

Дальше компоненты. Кнопка «Записаться», карточка мастера и нижняя панель повторяются на разных экранах. Каждый такой элемент я превратил в компонент и разложил экземпляры по экранам.

Заказчик потом попросил перекрасить кнопку, и правка ушла во все экземпляры одним действием. Подробнее про библиотеку повторяемых элементов есть разбор UI-kit в Figma.

Правило, которое я вынес: кликабельным делается компонент кнопки целиком, а не текст внутри неё. Тогда зона нажатия совпадает с тем, что видит человек.

Как связать экраны переходами в Figma?

Итог раздела: шесть шагов от пустого холста до работающего перехода. Открыть вкладку Prototype, выделить кнопку, протянуть плюсик к целевому фрейму, выбрать триггер On tap, выбрать действие Navigate to, задать анимацию. Отдельным шагом ставится стартовая точка потока: справка Figma называет её flow starting point и помечает синим значком на холсте.

Пошагово это выглядит так:

1. Переключитесь на вкладку Prototype в правой панели. Экраны на холсте станут серыми, поверх появятся точки связи.
2. Выделите кнопку целиком. На её краю появится синий плюсик.
3. Потяните плюсик к тому фрейму, куда должен вести переход. Между экранами протянется синяя стрелка.
4. В блоке Interaction выберите триггер. Для мобильного макета это On tap, для десктопного On click.
5. В поле действия оставьте Navigate to и проверьте, что в списке справа выбран нужный фрейм.
6. Задайте анимацию и длительность. Для перехода вперёд подходит Move in, для возврата назад Move out, для смены состояния внутри одного экрана Dissolve.

Кнопка «Назад» делается тем же способом, но действием Back: она возвращает на предыдущий экран по истории переходов, а не на конкретный фрейм. Это удобно, когда на один экран ведут два разных пути.

Стартовую точку ставят руками. Выделяете первый экран сценария, во вкладке Prototype находите раздел Flow starting point и нажимаете плюс. Там же поток переименовывается: справка Figma по умолчанию называет потоки Flow 1, Flow 2 и так далее, а название видно зрителю в левой панели режима презентации. Я назвал свой «Запись к мастеру», и заказчику сразу стало понятно, что он смотрит.

Как проверить прототип и передать ссылку заказчику?

Итог раздела: проверяют двумя кнопками. Preview (Shift+Space) запускает прототип прямо в редакторе, Present (Ctrl+Alt+Enter на Windows) открывает его в отдельной вкладке. Клавиша R перезапускает сценарий со стартовой точки, клавиша C включает комментарии. Ссылка только на прототип, без доступа к файлу, по справке Figma доступна лишь на платных тарифах.

Сначала Preview. Он показывает прототип в маленьком окне поверх редактора, и правки видно сразу: поправил связь, тут же прокликал. Для отладки этого хватает.

Потом Present. Прототип открывается в отдельной вкладке браузера и выглядит так, как его увидит зритель. Полезные мелочи из справки Figma: масштаб переключается клавишей Z между Actual size, Responsive, Fit width, Fit width and height, Fill screen и Fixed size; при включённой опции Show hints on click клик мимо кнопки подсвечивает синим все кликабельные зоны; клавиша R возвращает на стартовый экран; интерфейс вокруг прототипа убирается опцией Hide UI.

Теперь про ссылку, и тут спрятана ловушка бесплатного тарифа. В Figma есть два вида ссылок: на файл и на прототип. Ссылка на прототип показывает только режим презентации и не пускает в исходник.

По справке Figma такая ссылка живёт на платных тарифах. На Starter зритель, открывший презентацию, может перейти в исходный файл через меню рядом с именем файла.

Что я сделал на бесплатном аккаунте:

• в окне Share выставил уровень доступа can view, чтобы никто не мог двигать слои;
• вынес прототип в отдельный файл, где нет ничего, кроме четырёх экранов сценария;
• скопировал ссылку кнопкой Copy link из режима презентации, а не из адресной строки редактора;
• проверил ссылку в режиме инкогнито, где я не залогинен, глазами постороннего человека.

Последний пункт занимает тридцать секунд и снимает половину неловких переписок.

Что получилось в итоге: было и стало

Итог раздела: на переделку ушло около двух часов, из них час на пересборку экранов во фреймы и компоненты. Прототип открывается по ссылке с телефона, листается по сценарию записи, возвращается назад и не даёт зрителю сломать макет. Заказчик прошёл сценарий сам и нашёл в нём одну реальную проблему.

Что смотрим	Было на первом заходе	Стало после переделки
Основа экранов	группы, половина связей не создаётся	фреймы одного размера по пресету телефона
Зона нажатия	текст внутри кнопки	компонент кнопки целиком
Старт презентации	экран подтверждения	экран со списком мастеров
Права по ссылке	редактирование файла	просмотр отдельного файла прототипа
Реакция заказчика	«у вас тут всё поехало»	прошёл сценарий и написал замечание по делу

Замечание было такое: на экране выбора времени не видно, к какому мастеру человек записывается. Ради него всё и затевалось. Такую вещь не найти по статичным картинкам, потому что на картинках экраны лежат рядом и контекст держит глаз, а в живом переходе предыдущий экран исчезает.

Работает ли Figma из России в 2026 году?

Итог раздела: аккаунты россиян Figma не замораживает, но платные услуги новым клиентам из России официально не продаёт. 30 мая 2026 пользователи в России массово пожаловались, что сайт и приложение не открываются; с VPN доступ возвращался (Meduza, 30.05.2026). Официально о блокировке никто не объявлял, и доступ с тех пор нестабилен: у части пользователей редактор открывается с российского IP, у части нет. Отечественный аналог пока в закрытой бете: редактор «Спектр» от РТК ИТ.

Разберу два разных вопроса, которые часто путают.

Первый: политика самой компании. В справке Figma сказано прямо: доступ ограничен только аккаунтам под санкциями США, Великобритании и ЕС, остальным клиентам из России аккаунты не замораживали. Зато платные услуги новым клиентам, находящимся в России, компания не продаёт и платёжных договорённостей для них не делает: ни продления сроков оплаты, ни обработки апгрейдов, ни возвратов.

Второй: техническая доступность. 30 мая 2026 российские пользователи массово пожаловались, что не открываются ни сайт, ни приложение. Сбой зафиксировал сервис мониторинга Downdetector, о проблеме написал телеграм-канал «Эксплойт».

Те, кто включал VPN, доступ восстанавливали. Официальных комментариев ни от Роскомнадзора, ни от Figma по этому поводу не было, так что называть точную причину я не берусь.

Что с этим на август 2026: полной блокировки нет, аккаунты и файлы на месте. Но доступ стал лотереей: у одних редактор открывается с российского IP без всяких обходных путей, у других в тот же день не грузится вовсе. Практический совет банален и потому работает: просто откройте figma.com и посмотрите, грузится ли у вас, а важный файл держите выгруженным локально, чтобы не остаться без макета в день сдачи.

Инструмент	Статус для пользователя из России
Figma	аккаунт живой, вход с российского IP нестабилен, платные тарифы новым клиентам недоступны
«Спектр» (РТК ИТ)	закрытая бета с 20 апреля 2026, доступ по заявке, в реестре отечественного ПО, импорт файлов Figma и Pixso
Pixso	русскоязычная версия сайта, есть прототипирование и бесплатный тариф, отдельных ограничений для России не заявлено

Про «Спектр» подробнее. Пресс-служба «Ростелекома» объявила о запуске 20 апреля 2026: редактор работает в браузере, умеет компоненты и стили, автолейауты, маски, сохранение изображений в популярных графических форматах, совместную работу и роль «Зритель» для показа. Заявлен перевод файлов из Figma и Pixso с сохранением структуры слоёв.

На 2026 год обещаны полноценный мигратор для команд и проектов, версия on-premise, ИИ-инструменты и плагины. Важная оговорка: это по-прежнему закрытая бета, просто зарегистрироваться и начать рисовать не получится, доступ дают по заявке на сайте. То есть заменой Figma прямо сегодня «Спектр» для учебной задачи не станет.

Практический вывод для новичка. Учиться прототипированию имеет смысл на Figma: логика фреймов, компонентов и связей одинаковая во всех редакторах этого класса, и переносится она вместе с вами. Что ещё из инструментов пригодится дизайнеру, разобрано в обзоре профессиональных программ для дизайнеров.

Сколько стоит прототип в Figma и что нужно на старте?

Итог раздела: кликабельный прототип целиком собирается на бесплатном тарифе Starter. Платить приходится за отдельные удобства: полное место редактора на тарифе Professional стоит 16 долларов в месяц при помесячной оплате, на Organization 55 и на Enterprise 90 долларов в месяц при годовой оплате (figma.com/pricing). Из железа нужен любой ноутбук с браузером и мышь. Оплата российской картой не проходит.

Что даёт Starter по справке Figma: одну команду с тремя файлами, неограниченные черновики, историю версий за 30 дней. Инструменты прототипирования там не урезаны: фреймы, компоненты, связи, триггеры, анимации, режим презентации доступны целиком.

Чего на Starter нет: настроек шаринга прототипа, то есть той самой ссылки только на прототип без доступа к файлу. Обходной приём я описал выше в разделе про передачу ссылки: отдельный файл плюс уровень доступа can view.

Из оборудования достаточно любого ноутбука, который тянет браузер. Мышь удобнее тачпада: связи тянутся перетаскиванием, и точность решает. Планшет и графический стилус для прототипирования не нужны совсем.

Отдельная статья расходов, про которую честнее сказать прямо: доступ. Оплата подписки российской картой не проходит, потому что Figma не делает платёжных договорённостей для клиентов из России. Для учебных задач это не мешает: бесплатного тарифа хватает с запасом.

Что нужно	Сколько стоит
Аккаунт Figma для учёбы	бесплатно, тариф Starter
Тариф Professional	16 долларов в месяц за полное место редактора, помесячная оплата
Компьютер	любой ноутбук с браузером
Мышь	от пары сотен рублей

Какие ошибки новичков ломают прототип чаще всего?

Итог раздела: пять поломок закрывают почти все случаи. Группы вместо фреймов, связь на слое вместо кнопки, забытая стартовая точка потока, Smart animate на экранах с по-разному названными слоями и ссылка с правом редактирования. Первые три я собрал сам за один вечер, четвёртую и пятую регулярно вижу в чужих учебных файлах.

• Группы вместо фреймов. Связь ведёт на фрейм, группа целью перехода быть не может. Симптом: стрелка не тянется или прототип открывается пустым.
• Связь на слое внутри кнопки. Кликабельным становится текст, а не вся кнопка. Симптом: на телефоне попадаешь мимо и переход не срабатывает.
• Забытая стартовая точка. Презентация открывается с того экрана, где была сделана первая связь. Симптом: зритель видит финальный экран вместо первого.
• Smart animate вслепую. Эта анимация сопоставляет слои по именам. Если на двух экранах слои названы по-разному, вместо плавного движения получится мигание.
• Ссылка на редактирование. Скопированный из адресной строки адрес ведёт в редактор. Симптом: заказчик двигает слои в вашем боевом файле.

Шестая ошибка не ломает файл, но портит демонстрацию: прототип проверен только на десктопе. Откройте ссылку с телефона до того, как отправите её. Зоны нажатия, которые мышью попадаются идеально, пальцем часто промахиваются.

Чего кликабельный прототип не покажет?

Итог раздела: прототип моделирует поведение интерфейса и молчит про всё остальное. Он не проверяет скорость приложения, не работает с настоящими данными, не считает и не валидирует ввод, не отвечает за вёрстку и адаптивность на реальных устройствах. Ждать от него ответа «взлетит ли продукт» тоже не стоит: это инструмент проверки сценария, а не рынка.

Список того, что прототип не заменяет, короткий и честный.

Первое: серверную логику. Поля ввода в прототипе декоративные, поиск ничего не ищет, корзина ничего не считает. Можно имитировать результат отдельным экраном, но это заранее нарисованная картинка.

Второе: техническое задание. Прототип показывает счастливый путь, а разработчику нужны ещё состояния ошибок, пустые экраны, поведение при плохом интернете. Как раскладывать задачу на такие куски, разобрано в статье про декомпозицию задач.

Третье: производительность и вёрстку. В браузере прототип летает всегда, потому что это картинки со связями. Реальное приложение может тормозить на том же экране.

Кому такой формат подходит хуже всего: тем, кому нужен работающий продукт завтра, а не проверка идеи. Для быстрых работающих прототипов сегодня чаще берут связку из готовых конструкторов и генеративных инструментов, про этот путь есть отдельный материал про вайб-кодинг для новичков.

Что переносится на ваши задачи?

Итог раздела: из этой истории переносится порядок работы, а не конкретные экраны барбершопа. Сначала фреймы одного размера, потом компоненты, потом связи, потом стартовая точка, и только затем ссылка. Проверка в режиме инкогнито обязательна. Такой порядок экономит тот самый второй вечер, который я потратил на переделку.

Короткий порядок действий для любого первого прототипа:

1. Нарисуйте счастливый путь из трёх или четырёх экранов. Больше на старте не нужно.
2. Соберите каждый экран как фрейм по пресету устройства, все одного размера.
3. Повторяющиеся элементы превратите в компоненты до того, как начнёте вешать связи.
4. Свяжите экраны на вкладке Prototype, начиная с первого шага сценария.
5. Поставьте стартовую точку и назовите поток по-человечески.
6. Отправьте ссылку с уровнем доступа на просмотр и проверьте её чужими глазами.

Дальше этот прототип работает как проектная работа для портфолио: он показывает не только вкус, но и мышление. Как собрать из таких работ полноценную папку, разобрано в материале про портфолио UX/UI-дизайнера с нуля, а про оформление проекта витриной есть разбор кейса на Behance.

Если хочется пройти этот путь с обратной связью, а не по своим граблям, у нас есть курс «Figma: интерфейсы и прототипы». Там те же фреймы, компоненты и связи разбираются на учебных проектах, а работы проверяет преподаватель.

Куда двигаться дальше: разницу ролей объясняет статья про UX/UI-дизайнера и веб-дизайнера, саму дисциплину разбирает материал что такое UX/UI-дизайн, а визуальную моду показывают тренды веб-дизайна 2026. Для референсов и черновых макетов пригодятся нейросети для дизайнера.

Что ещё спрашивают про прототипы: короткие ответы

Нужен ли платный тариф, чтобы сделать кликабельный прототип?

Нет. Фреймы, компоненты, связи, триггеры, анимации и режим презентации работают на бесплатном тарифе Starter. Платный тариф нужен ради ссылки только на прототип, пароля на ссылку и командных настроек. По справке Figma Starter даёт одну команду с тремя файлами и историю версий за 30 дней.

Можно ли открыть прототип Figma на телефоне?

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

Сколько экранов делать для первого прототипа?

Три или четыре. Один сценарий целиком от входа до результата, без ответвлений. Такой прототип собирается за вечер, читается за минуту и уже отвечает на вопрос «понятно ли, куда нажимать». Ветвления и состояния ошибок добавляются вторым заходом.

Что будет со ссылкой, если я потом изменю макет?

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

Источники

• Figma Help Center. What’s Figma’s policy for customers in Russia and Belarus: https://help.figma.com/hc/en-us/articles/4685987514519-What-s-Figma-s-policy-for-customers-in-Russia-and-Belarus
• Figma Help Center. Connect your prototype: https://help.figma.com/hc/en-us/articles/360040315773-Connect-your-prototype
• Figma Help Center. Create and manage prototype flows: https://help.figma.com/hc/en-us/articles/360039823894-Create-and-manage-prototype-flows
• Figma Help Center. Play your prototypes: https://help.figma.com/hc/en-us/articles/360040318013-Play-your-prototypes
• Figma Help Center. Share files and prototypes: https://help.figma.com/hc/en-us/articles/360040531773-Share-files-and-prototypes
• Figma Help Center. Figma plans and features: https://help.figma.com/hc/en-us/articles/360040328273-Figma-plans-and-features
• Figma. Plans and Pricing: https://www.figma.com/pricing/
• Meduza. Пользователи в России пожаловались на проблемы с доступом к Figma, 30 мая 2026: https://meduza.io/news/2026/05/30/polzovateli-v-rossii-pozhalovalis-na-problemy-s-dostupom-k-figma-graficheskomu-redaktoru-dlya-sozdaniya-saytov
• Ростелеком. Запуск графического редактора «Спектр», 20 апреля 2026: https://www.company.rt.ru/press/news/d477833/
• Habr. «Ростелеком» представил графический редактор «Спектр»: https://habr.com/ru/news/1025862/
• Pixso, русская версия: https://pixso.net/ru/