Как перенести прототип сайта в Фигму самостоятельно: готовая пошаговая инструкция

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

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

Вам могли помочь наши материалы:

Как создать прототип веб-сайта

Чек-лист по разработке сайта

И вот он, свежий и подробный прототип, который у вас получилось создать гораздо быстрее, чем могло показаться на первый взгляд. Что же, ради этого мы и работаем ❤️

Жизнь после прототипа

Кажется, что все идеи, которые появились у вас во время процесса, уже вот они, наглядно видны. Но на прототипе всё не заканчивается, сайт ещё нужно разработать. А для этого нужны готовые текст и дизайн.

Можно ли обойтись без этого? Можно. Но тогда посетители сайта смогут увидеть ровно то, что указано на прототипе — без анимации, картинок, текстов и переходов — ведь разработчик не будет придумывать это сам. Его задача — написать код.

Чтобы визуализировать прототип, понадобится отдельная команда специалистов. Копирайтер напишет тексты, дизайнер сделает дизайн, маркетолог поможет узнать, что нужно вашей аудитории.

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

Что за чем идёт

Начать лучше с текста, ведь элементам интерфейса нужны названия, а блокам сайта, куда вы захотите добавить описания — точные размеры. Именно под текст подстраивается дизайн интерфейса, не наоборот.

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

Сначала собираем прототип сайта с ключевыми словами, затем пишем реальный текст и только потом визуализируем прототип

 

Кстати, насчёт инструмента

Раньше прототип рисовали в Фотошопе, Канве или где-то ещё. Но сейчас с этим хорошо справляется комбинация нашего сервиса и Фигмы. В Structura.app можно быстро собрать желаемый прототип, а в Фигме — сделать его визуализацию.

Фигма — специальная программа, помогающая визуализировать и протестировать структуру будущего сайта.

Благодаря Фигме можно проверить, как будут работать кнопки, переходы между страницами и другие элементы интерфейса. Она же помогает с адаптивностью сайта на разных устройствах.

Визуализация прототипа сайта в Фигме

 

Результат визуализации прототипа — это фактически готовый сайт. С одним лишь отличием, что он пока ещё не на отдельном домене, а внутри дизайнерского инструмента.

Когда вы покажете готовый результат разработчику, он превратит ваш дизайн в код, и этот код будет показывать ровно то, что вы создали в Фигме.

Один на один с дизайном

Если вы никогда раньше не делали веб-дизайн, функциональность Фигмы может вас напугать — так много разных функций сразу, да ещё и не интуитивно понятных. Нажмёшь не туда, и всё сломается.

Чтобы предостеречь вас от излишних волнений, мы подготовили пошаговую инструкцию, как можно перенести прототип из Structura.app в Фигму.

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

Переносим прототип в 10 шагов:

  1. Для работы нам понадобится прототип. Поэтому зайдите в «Мои проекты» на Structura.app и экспортируйте нужный прототип в формате PNG.
  2. Теперь можно приступить к визуализации прототипа. Откройте Фигму и войдите в свой аккаунт.
  3. В разделе Draft в боковой панели нажмите «+» и выберите New design file.
  4. Нажмите на третью иконку с символом решётки слева вверху — это функция Frame, а затем в открывшемся боковом окне справа откройте список с названием Desktop и выберите одноимённый формат Desktop. На экране появится белый лист с заданными размерами 1440х1024. Если нужен другой размер, вы можете изменить его, нажав на белый лист, а затем в правом боковом окне ввести нужные ширину и высоту (W и H).
  5. Перетащите скачанное изображение прототипа в проект на свободное место рядом с Desktop*.* Туда же рядом поставьте загруженные элементы, которые помогут сделать уникальный дизайн. Для этого найдите логотип компании, брендбук с фирменным стилем, фотографии ваших товаров, какие-то ещё объекты, которые хотелось бы отразить в дизайне, и загрузите их в Фигму.
  6. Используйте инструменты Фигмы, такие, как Pen, Shapes, и Frame, чтобы нарисовать, обвести и добавить элементы для визуализации прототипа. Не забывайте время от времени поглядывать на загруженные материалы, чтобы учитывать их в дизайне.
  7. Добавьте элементы действий, такие, как кнопки и ссылки. Для создания кнопки нажмите на уже знакомую третью иконку с символом решётки Frame и нарисуйте на белом листе квадрат. Затем сразу задайте ему цвет заливки функцией Fill, чтобы он не потерялся на белом фоне. При необходимости воспользуйтесь функцией Stroke для обводки и функцией Corner Radius для закругления углов. Добавьте в кнопку текст, используя инструмент Text с иконкой Т слева вверху. В текст можно добавить ссылку, для этого выделите его **и выберите иконку ссылки в середине вверху (эту же функцию можно вызвать сочетанием клавиш Ctrl+K). Добавьте в открывшуюся чёрную панель нужную ссылку и нажмите Enter.
  8. Теперь покажите взаимосвязь элементов и страниц сайта с помощью режима Prototype. Для этого выберите Prototype в боковой панели справа вверху, а затем наведите курсор на экран или элемент, с которым нужно создать связь. Тогда появится кружок со знаком «+», который нужно протянуть к соответствующей странице будущего сайта — сейчас это белый лист с необходимыми элементами такой страницы. В таком случае элемент на одном «холсте» будет вести на конкретную страницу другого «холста».
  9. Используйте режим Present, чтобы запустить интерактивный прототип и просмотреть, как будет работать ваш сайт. Запустить его можно иконкой воспроизведения справа вверху экрана.
  10. Поделитесь прототипом с разработчиком, используя функцию Share — Copy link.

Обратите внимание, что для каждой страницы сайта нужен отдельный белый холст (Frame) с дизайном. Подпишите рядом с каждым холстом его название, чтобы не запутаться. Например: «Главная страница», «Каталог», «Карточка товара», «О компании», «Контакты». Так разработчику будет проще в дальнейшем верстать сайт, а вам проверять его работу.

Как выглядит новый проект в Фигме

 

Помощь дизайнера

Одной инструкции, чтобы сделать всё сразу, как надо, увы, недостаточно. Придётся потратить какое-то время, чтобы привыкнуть к интерфейсу и лично проверить каждую из функций по отдельности.

Несмотря на разнообразие возможностей, Фигма не сделает всё полностью сама — это всего лишь белый лист, который создан для творчества.

Если вы не готовы уделить этому внимание, попробуйте воспользоваться услугами дизайнера. Ему не придётся тратить время на обучение, если он уже сделал сотню-другую разных работ.

Всё, что требуется от вас в этом случае, это переслать дизайнеру все важные элементы, которые вы хотите видеть на сайте, показать ваш фирменный стиль и готовый прототип, который вы создали в Structura.app. А ещё рассказать, какие нужны анимация и функции элементов.

Брендбук Structura.app

 

Идеи для референсов

 

Не забудьте также поделиться подборкой готовых сайтов, которыми вы вдохновлялись во время создания прототипа. Этого будет достаточно, чтобы дизайнер начал работу.

Учли ли ваши пожелания

Когда дизайнер отправит вам готовую визуализацию, он будет ожидать её согласования.

Вот на что можно обратить внимание, когда вы будете проверять работу:

  1. Соответствует ли дизайн исходному прототипу. Для этого проверьте все элементы и расположение объектов, а также размеры и отступы.
  2. Есть ли у элементов интерактивность. Нажмите на кнопки, откройте ссылки, проверьте выпадающие списки и переходы между страницами. Важный момент: такая интерактивность будет возможна, если вы договорились о ней с дизайнером заранее.
  3. Адаптивен ли дизайн. Откройте его на разных устройствах. Проверьте, чтобы с изменением экрана элементы подстраивались под новый размер. Так как это ещё не готовый сайт, дизайн будет показываться как множество страниц внутри одного блока, меняющих свой размер со сменой размера экрана.
  4. Корректно ли перенесён текст. Посмотрите на все страницы и изучите описание каждой из них. Проверьте, что в отдельных блоках текст отображается без нахлёста и нет лишних символов, а сами слова написаны без ошибок.

Что может получиться

Более классным, чем рассказ о дизайне, может быть только его демонстрация. Давайте сравним «До» и «После».

Так выглядит прототип, который вы могли бы создать в Structura.app:

Прототип сайта в Structura.app

 

А вот так выглядит его визуализация в Фигме:

Визуализация прототипа для Structura.app

 

С таким результатом можно смело идти к разработчику. Дальше он сверстает дизайн и «перенесёт» сайт на сервер.

А если вы только задумываетесь о создании прототипа, попробуйте функции Structura.app На простую версию сайта понадобится всего 10 минут