BITSPARK / Статьи / Дизайн и элементы сайта

Прототип сайта: что это и что проверить заказчику до вёрстки

Коротко: по справке Figma, функции прототипирования позволяют создавать интерактивные потоки (flows), которые исследуют, как пользователь может взаимодействовать с дизайном; общего определения термина в источниках статьи нет. Просматривать прототип можно с правом can view, создавать - с can edit. На телефоне он открывается в приложении Figma (нужен аккаунт) или в мобильном браузере. До вёрстки стоит записать сценарии, устройства и того, кто согласовал. Скорость, формы и ключевые сценарии готового сайта проверяют позже: в процессе BITSPARK это шаг «Запуск».

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

Сведения приведены по страницам источников на 21.10.2026. Справка Figma написана по-английски: английские цитаты даны с переводом, перевод наш. Названия режимов и прав (presentation view, can view, can edit, Mirror) оставлены как в справке. Пример вымышленный: интернет-магазин чая с сайтом example.ru.

Что такое прототип сайта по справке Figma?

Коротко: по справке Figma, функции прототипирования позволяют создавать интерактивные flows, которые исследуют, как пользователь может взаимодействовать с дизайном. Справка перечисляет пять назначений: посмотреть взаимодействия, делиться идеями, получать отзывы, проверять на пользователях и показывать дизайн заинтересованным сторонам. Это описание инструмента Figma. Классификации видов макетов в справке нет.

Определение стоит в начале справки Figma, на странице «Guide to prototyping in Figma - Figma Learn - Help Center»:

«Figma's prototyping features allow you to create interactive flows that explore how a user may interact with your designs.»

Перевод наш: возможности прототипирования в Figma позволяют создавать интерактивные потоки (flows), которые исследуют, как пользователь может взаимодействовать с вашим дизайном. Так Figma описывает собственные функции. Определения прототипа сайта вне Figma на этих страницах нет; в статье оно не вводится.

Там же стоит список назначений. После слов «Prototypes are a fantastic way to» (перевод наш: прототипы - отличный способ) справка называет пять пунктов; перевод наш:

  • «Preview interactions and user flows» - посмотреть взаимодействия и пользовательские flows;
  • «Share and iterate on ideas» - делиться идеями и дорабатывать их;
  • «Get feedback from collaborators» - получать отзывы от коллег по работе;
  • «Test interactions with users» - проверять взаимодействия на пользователях;
  • «Present your designs to stakeholders» - показывать дизайн заинтересованным сторонам.

Заказчик в этом списке не назван. Ближайшие по смыслу пункты - отзывы и показ дизайна; о просмотре заказчиком справка не говорит.

Страница «Play your prototypes - Figma Learn - Help Center» называет назначение, которое связано с вёрсткой:

«Prototypes replicate how users might interact with your designs, allowing you to see and test how they work before moving to development.»

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

Чем прототип отличается от статичного дизайна и от схемы страниц?

Коротко: в справке Figma статичный дизайн и взаимодействия прототипа названы отдельно, а путь по экранам задают соединения (connections) между ними. Схема страниц и навигации - предмет другой статьи раздела. Слово «интерактивный» есть и в названии услуги на главной bitspark.ru; её разбирает отдельная статья.

Мобильная страница справки называет статичный дизайн и прототип рядом:

«Use the Figma mobile app to preview both static designs and prototyping interactions.»

Перевод наш: используйте мобильное приложение Figma, чтобы просматривать и статичный дизайн, и взаимодействия прототипа. Что делают соединения, сказано на странице «Play your prototypes»:

«If there are prototyping connections, Figma will only display those frames with connections while playing the prototype.»

Перевод наш: если есть соединения прототипа, при воспроизведении Figma показывает только те кадры (frames), у которых есть соединения. Кадр - рамка на холсте Figma, внутри которой лежит дизайн: на той же странице сказано, что дизайн должен находиться во frame, чтобы его можно было воспроизвести. Соединение, по глоссарию справки о прототипировании, ведёт от места действия на одном кадре (hotspot: ссылка, кнопка, картинка или значок) к кадру назначения.

Без соединений правило другое: «If there are no prototyping connections, you can navigate through frames from the current page.» Перевод наш: если соединений нет, можно переходить по кадрам текущей страницы. Для воспроизведения это два порядка: без соединений кадры листаются по странице, с соединениями показываются соединённые кадры.

Схема разделов и навигации сайта в справке Figma не описана. Её разбирает статья о структуре сайта.

Слово «интерактивный» встречается и на главной странице студии, в названии услуги:

«Интерактивный сайт. Индивидуальная оценка - WebGL, motion и нестандартные интерфейсы.»

Это название услуги студии. Прототип в справке Figma строится на холсте Figma, в файле дизайна. Услугу разбирает статья об интерактивном сайте.

Где прототип стоит на пути к сайту?

Коротко: справка Figma называет просмотр прототипа шагом до перехода к разработке. На главной bitspark.ru пять шагов по порядку, и до шага «Разработка» стоят «Задача», «Структура» и «Дизайн». На каком из них исполнитель показывает прототип, источники не говорят, поэтому это вопрос исполнителю.

На главной странице bitspark.ru раздел «От задачи до запуска» называет пять шагов по порядку: «Задача», «Структура», «Дизайн», «Разработка», «Запуск». Три из них описаны так:

«Собираем архитектуру: сценарии, страницы, контент и логику взаимодействия.»

«Формируем характер проекта: типографику, композицию, движение и систему интерфейса.»

«Проверяем desktop и mobile, скорость, формы и ключевые сценарии - затем запускаем.»

Figma говорит о user flows, студия - о сценариях. Слова разные и из разных источников, поэтому сверять их приходится человеку: список сценариев кладут рядом со списком flows (список проверок - в разделе о том, что записать и проверить до вёрстки).

Figma называет момент проверки словами «before moving to development» (перевод наш: до перехода к разработке). В процессе студии за шагом «Дизайн» следует шаг «Разработка», и вёрстка относится к нему: описание шага начинается словом «Верстаем». Отсюда ориентир для заказчика: смотреть прототип до вёрстки. Какой шаг у конкретного исполнителя включает прототип, в каком сервисе он сделан и как заказчик получает ссылку, стоит выяснить до начала работы. Справка Figma описывает только Figma; другие сервисы для прототипов в статье не разбираются.

Как открыть прототип и что значат can view и can edit?

Коротко: по справке Figma прототип в presentation view воспроизводит тот, у кого есть право can view; создаёт прототип тот, у кого есть право can edit. Справка называет эти функции доступными на любом плане. Прототип листают стрелками на экране или клавишами, а к началу flow возвращаются клавишей R.

Права названы в начале справки о прототипировании:

«Anyone with can edit access can create prototypes.»

«Anyone with can view access can play back prototypes in Presentation view.»

Перевод наш: у кого есть доступ can edit, тот может создавать прототипы; у кого есть доступ can view, тот может воспроизводить прототипы в режиме Presentation view. Что дают права на других страницах справки, собрано в таблице.

ПравоЧто даёт по справкеГде сказано
can viewвоспроизводить прототип в presentation view«Guide to prototyping in Figma», блок «Before you start»
can viewсмотреть прототипы в мобильном приложении«View prototypes on a mobile device», блок «Before you start»
как минимум viewоставлять комментарии при входе в Figma«Comment on prototypes», блок «Before you Start» и вводный абзац
can editсоздавать прототипы«Guide to prototyping in Figma», блок «Before you start»
can editзеркалировать кадры на телефон (mirror frames)«View prototypes on a mobile device», блок «Before you start»
can editсоздавать и менять flows«Create and manage prototype flows», блок «Before you start»: «Requires can edit access to a file» (перевод наш: нужен доступ can edit к файлу)

О тарифах справка пишет прямо. На странице «Play your prototypes» сказано: «Users on any team or plan can play prototypes.» Перевод наш: пользователи любой команды и любого плана могут воспроизводить прототипы.

Как двигаться по прототипу, описано в разделе о порядке кадров на той же странице:

«When playing your prototype, you can press →, Space, or N to navigate to the next frame, and ← to navigate to the previous frame.»

Перевод наш: при воспроизведении прототипа можно нажимать →, Space или N, чтобы перейти к следующему кадру, и ←, чтобы вернуться к предыдущему. Внизу окна есть стрелки влево и вправо, а кнопка Restart или клавиша R возвращает к стартовому кадру текущего flow. В меню Options есть пункт Show hints on click: когда пользователь нажимает мимо hotspot, Figma подсвечивает кликабельные области синей рамкой.

Что такое flow и starting point и как они выглядят на примере заказа?

Коротко: flow - путь по соединённым кадрам внутри прототипа, starting point - кадр, с которого путь начинается; у кадра может быть только одна точка старта. Ссылку можно получить на весь прототип или на один flow. В примере с интернет-магазином example.ru flow оформить заказ идёт от корзины до экрана с подтверждением.

В глоссарии справки о прототипировании flow определён так:

«A flow is the network of connected frames that form a path through a prototype. Each flow has its own starting point. You can have multiple flows within a prototype.»

Перевод наш: flow - сеть соединённых кадров, образующих путь по прототипу. У каждого flow своя точка старта. В прототипе может быть несколько flows. Справка даёт и пример на магазине:

«your prototype covers all possible interactions on an eCommerce site. Within the prototype, you have flows for creating an account, adding items to a cart, and checking out.»

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

«A flow starting point is where the flow begins. (...) A frame can only have one flow starting point.»

Перевод наш: точка старта flow - место, где flow начинается. У кадра может быть только одна точка старта flow.

Теперь тот же принцип на нашем примере. Интернет-магазин чая example.ru получил прототип с тремя flows: найти чай в каталоге, оформить заказ, войти в личный кабинет. Flow оформить заказ в придуманном прототипе идёт по экранам: корзина (точка старта), доставка, оплата, заказ принят. Состав экранов придуман для примера. Какие экраны нужны магазину, записывается в задании; что в него входит, разбирает статья о техническом задании.

Пройти такой flow заказчик может по шагам из справки:

  1. Попросить ссылку на нужный flow. Страница о прототипировании сообщает: «you can share the entire prototype or copy the link to a flow starting point» (перевод наш: можно поделиться всем прототипом или скопировать ссылку на точку старта flow).
  2. Открыть ссылку и выбрать flow в левой панели presentation view. Страница «Play your prototypes» называет эту панель местом, где «you can select flows and view their descriptions» (перевод наш: можно выбрать flows и посмотреть их описания).
  3. Прочитать описание flow, если оно есть. Страница о flows пишет: «Use descriptions to provide prompts to usability test participants or additional context and documentation for your team.» Перевод наш: используйте описания, чтобы давать подсказки участникам юзабилити-тестирования или дополнительный контекст и документацию для команды.
  4. Пройти кадры по hotspots. Вернуться на старт можно клавишей R.
  5. Записать экран, на котором непонятно, куда нажимать, и экран из списка сценариев, которого нет в просмотре.

Как посмотреть прототип на телефоне?

Коротко: страница справки описывает просмотр в приложении Figma (presentation view и Mirror) и в мобильном браузере. Для приложения нужен аккаунт Figma. Mirror требует права can edit и открытого файла на компьютере. В браузере видны верхняя и нижняя панели браузера, а двигаться по прототипу можно только по hotspots.

Страница «View prototypes on a mobile device - Figma Learn - Help Center» начинается с условий:

«You will need a Figma account to use the Figma mobile app.»

Перевод наш: для мобильного приложения Figma нужен аккаунт Figma. Способы в приложении названы так: «You can preview your prototype using presentation view in the app or by mirroring frames from your desktop.» (перевод наш: прототип можно смотреть в presentation view в приложении или зеркалируя кадры с компьютера). Ячейки таблицы пересказывают страницу, перевод наш.

СпособЧто нужно по справкеЧто сказано о просмотре
presentation view в приложении Figmaвход в приложение (нужен аккаунт Figma); право can viewв файле открыть меню из трёх точек и выбрать View prototypes; прототип воспроизводится от точки старта flow; в скрытом меню можно переключать точки старта
Mirror в приложенииодин и тот же логин на компьютере и в приложении; файл открыт на компьютере, выбран кадр верхнего уровня; право can editприложение показывает выбранный на компьютере кадр, масштабированный по ширине устройства; правки кадра видны в реальном времени
Прототип по ссылке в мобильном браузерепри публичной ссылке (public link access) её откроет любой, иначе нужен бесплатный аккаунт Figmaдизайн в окне браузера, верхняя и нижняя панели браузера остаются; только через hotspots; действие браузера назад не поддерживается

Строка о приложении опирается на раздел «Presentation view» страницы:

«From the file, press > View prototypes to present the prototype.»

Перед знаком «>» в справке стоит значок меню из трёх точек: путь - меню из трёх точек > View prototypes.

Условие по ссылке сформулировано в разделе о мобильном браузере:

«If you are sharing your prototype via public link access, anyone with the link will be able to view your prototype. If the file isn't shared via public link access, you will only need a free Figma account to view the file.»

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

О браузере страница советует приложение: «To replicate an in-app experience without an address bar, we recommend using the Figma mobile app.» Перевод наш: чтобы воспроизвести впечатление от приложения без адресной строки, мы рекомендуем мобильное приложение Figma. Mirror есть и в мобильном браузере: страница рекомендует этот путь, если устройство не поддерживается приложением или нужно смотреть дизайн в браузере. Про кадры без соединений там же сказано отдельно: «It's only possible to preview frames with prototyping connections.» (перевод наш: просматривать можно только кадры с соединениями прототипа).

На этой странице право can edit названо только для Mirror. В шагах Mirror файл открывают на компьютере и выбирают в нём кадр верхнего уровня.

Как оставить комментарий к экрану прототипа?

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

Условия комментирования названы на странице «Comment on prototypes - Figma Learn - Help Center»:

«You can comment if you're signed in to Figma and have at least view access to the file.»

Перевод наш: вы можете комментировать, если вошли в Figma и у вас есть как минимум доступ view к файлу. Куда попадает комментарий:

«Comments you add in a prototype also appear in the underlying design file.»

Перевод наш: комментарии, добавленные в прототипе, появляются и в исходном файле дизайна. Порядок действий по разделу «Add comments» и странице «Play your prototypes»:

  1. Открыть прототип в presentation view и перейти к экрану, к которому есть замечание.
  2. Включить режим комментариев в панели инструментов или нажать C. Страница «Play your prototypes» называет C среди сочетаний клавиш, которые включает пункт Enable Figma shortcuts.
  3. Выбрать место. Для пина справка пишет: «Select a location to pin the comment.» (перевод наш: выберите место, чтобы закрепить комментарий). Для области: «Click and drag to select a region.» (перевод наш: нажмите и потяните, чтобы выделить область).
  4. Ввести текст. В нём можно упомянуть коллег или добавить эмодзи. Затем отправить комментарий.
  5. Выйти из режима комментариев повторным нажатием той же кнопки или клавишей Esc.

На странице есть и подсказка для телефона: «You can also comment on prototypes from the Figma mobile app.» Перевод наш: комментировать прототипы можно и из мобильного приложения Figma.

Ограничение связано со ссылкой. Страница «Comment on prototypes» пишет: «Comments aren't displayed when the prototype's toolbar and footer are hidden. Show the toolbar and footer to add or view comments.» Перевод наш: комментарии не показываются, когда панель инструментов и нижняя панель прототипа скрыты; чтобы добавить или увидеть комментарии, покажите эти панели. Интерфейс можно скрыть настройкой Hide UI. Об обновлённой ссылке страница «Play your prototypes» пишет:

«If you share this link, Figma will hide the toolbar, footer, and sidebar for any other viewers.»

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

Закрывать комментарии справка предлагает так: «When you've reached an agreement or resolved an issue, open the comment and select Resolve.» Перевод наш: когда вы договорились или вопрос решён, откройте комментарий и выберите Resolve. Figma скрывает такой комментарий из прототипа; вернуть его на экран можно настройкой Show resolved comments в меню Options.

Что записать и проверить до вёрстки?

Коротко: шесть пунктов: все ли сценарии из структуры есть в прототипе, у каждого ли flow есть старт и описание, ведёт ли каждая кнопка дальше, на каких устройствах смотрели, какие комментарии остались открытыми и кто согласовал. Пункты 1-5 опираются на справку Figma, пункт 6 справка не описывает, и его записывают отдельно.

  1. Все ли сценарии из структуры есть среди flows? На шаге «Структура» студия называет «сценарии» среди того, что собирает; список flows виден в левой панели presentation view. Запишите перечень сценариев, сверьте с названиями flows и отметьте недостающие.
  2. У каждого flow есть старт и описание? Точка старта - «where the flow begins» (перевод наш: место, где flow начинается). Название и описание flow показываются в левой панели: «Flow names and descriptions are displayed in the left sidebar when in presentation view.»
  3. Ведёт ли каждая кнопка дальше? Справка пишет, что при наличии соединений Figma показывает при воспроизведении только кадры с соединениями (раздел «Prepare prototypes for play»). Если экрана из списка в просмотре нет, запишите это вопросом исполнителю. Подсветка кликабельных областей (Show hints on click) помогает увидеть, где нажимать.
  4. На каких устройствах смотрели? Запишите компьютер и размер окна, телефон и способ просмотра (приложение, Mirror, мобильный браузер), а также устройство и модель, выбранные в настройках прототипа. Глоссарий называет их так: «Choose which device will be shown when presenting your prototype. Define both the device and the model.» (перевод наш: выберите, какое устройство будет показано при презентации прототипа; задайте и устройство, и модель). Ориентация (portrait или landscape) задана один раз для всего прототипа: «It's not possible to switch between portrait and landscape view within a prototype.» Перевод наш: переключаться между вертикальным и горизонтальным видом внутри прототипа нельзя. Режим Responsive позволяет, по словам справки, «view designs at different window sizes and check their responsive behavior» (перевод наш: смотреть дизайн в окнах разного размера и проверять поведение при изменении размера). Для него в файле дизайна должны быть заданы настройки constraints и auto layout (так справка называет параметры, по которым содержимое подстраивается под размер окна). Как проверить адаптив уже на сайте, описывает статья об адаптивном сайте.
  5. Какие комментарии остались открытыми? Закрытые через Resolve скрыты из прототипа, но возвращаются настройкой Show resolved comments. Перед согласованием просмотрите открытые комментарии и перечень закрытых.
  6. Кто согласовал и когда? На пяти страницах справки не описано согласование прототипа целиком. Resolve связан со словами «reached an agreement» (перевод наш: договорились) и закрывает отдельный комментарий. Запишите имя, дату, ссылку на прототип, перечень просмотренных flows и устройства. Куда вносят согласованное и как принимают готовую работу, разбирают статьи о техническом задании и о договоре на разработку сайта.

Чем прототип не заменяет проверку готового сайта?

Коротко: Figma называет просмотр прототипа шагом до перехода к разработке. Скорость, формы и ключевые сценарии на desktop и mobile в процессе BITSPARK проверяют на шаге «Запуск». На пяти страницах справки о скорости загрузки и формах не сказано, поэтому прототип не заменяет проверку готового сайта.

Страница «Play your prototypes» (цитата выше) говорит о воспроизведении взаимодействия с дизайном до разработки. Последний шаг процесса BITSPARK - «Запуск»; его описание приведено выше, в разделе о пути к сайту: проверка desktop и mobile, скорости, форм и ключевых сценариев.

На пяти разобранных страницах справки Figma слов о скорости загрузки страниц и о работе форм нет: слово speed встречается только в настройках анимации перехода между кадрами. Эти проверки в справке не описаны. В процессе студии они стоят на шаге «Запуск». Как строится проверка готового сайта, разбирают статьи о тестировании сайта и о юзабилити.

Источники

Дата обращения к страницам: 21.10.2026. Дата обновления на страницах справки Figma не указана.

Обсудить проект в Telegram: t.me/billioniks

Читайте по теме

Все статьи раздела «Дизайн и элементы сайта» →