Прототипирование в Figma

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

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

Обложка статьи Прохоров Кирилл
Обложка статьи Прохоров Кирилл

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

1. Возможность продолжить создание дизайна на основе прототипа. Создание адаптивной сетки. Можно даже заморочиться и сделать прототип на мобильном устройстве.

Адаптивность дизайна в Figma

2. Разворачивающиеся списки, попап-окна с затемнением фона, а также эффекты анимации появления блоков. Это фишки, которые недавно появились в Figma и делают этот инструмент привлекательнее других приложений. Также, можно сделать элементы статичными при скроллинге, но в этом нет ничего особенного, это позволяют делать и другие приложения.

Списки, попап-окна и другие фишки

3. Конечно же, наличие компонентов, которые помогают автоматизировать процесс создания гиперссылок.

Компоненты и гиперссылки

4. Возможность клиенту оставлять комментарии прямо в прототипе.

Комментарии в прототипе

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

Если есть вопросы – пишите!

20
31 комментарий