18 Figma-плагинов для создания и настройки прототипов

С помощью этих плагинов вы сможете создавать User Flows, скелетон-экраны, прототипы всех уровней, настраивать взаимодействия между ними, конвертировать готовый проект обратно в вайрфрейм, чтобы сосредоточиться на взаимодействиях и не отвлекаться на визуальную составляющую. В подборку мы также включили 3 библиотеки готовых компонентов для прототипирования
Дарья Райт
Редактор, переводчик. Пишу о дизайне

Prototyper — создаёт анимированные интерактивные прототипы с использованием JavaScript

Prototyper

Wireframe — помогает быстро создавать вайрфреймы с помощью библиотеки готовых компонентов

Wireframe

Hand Wireframe — создает нарисованный «от руки» прототип

Hand Wireframe

Protofly — создаёт и позволяет повторно использовать разные взаимодействия для прототипов

Protofly

Autoflow — позволяет легко рисовать потоки. Просто выберите 2 объекта, нажмите горячую клавишу, и между ними появится линия

Autoflow

Arrow Auto — помогает быстро добавлять направляющие стрелки и связующие линии при создания User Journey Maps. Просто выделите два объекта или экрана, выберите тип линии, её направление и кликните Link

Arrow Auto

Draw Connector — рисует связи между слоями в User Flow

Draw Connector

Useberry — инструмент для онлайн-тестирования прямо в Figma. Создаёт тепловые карты и схемы движения на основе действий пользователя

Useberry

Lazy Load — в пару кликов генерирует скелетоны (шаблоны макетов для показа во время загрузки контента)

Lazy Load

Ghost — генерирует скелетон-экраны (заглушки загрузки) на основе проекта

Ghost 

Wire Box — преобразовывает фреймы в их lo-fi версии, нарисованные одним цветом, чтобы было проще думать об архитектуре и взаимодействиях, не отвлекаясь на визуальную составляющую

Wire Box

Sankey Connect — создаёт визуализацию нодовых связей

Sankey Connect

ProToFlow — конвертирует взаимодействия прототипа в стрелки между экранами

ProToFlow

Wireframer — генерирует псевдотекст в SVG-формате для прототипов с возможностью настройки цвета, количества строк, высоты и выравнивания

Wireframer

Turbo Design — библиотека шаблонов проектирования, в которой есть экраны как для мобильных, так и для настольных приложений

Turbo Design

Paper Wireframe Kit — набор для прототипирования, стилизованный под рисунок от руки

Paper Wireframe Kit 

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

Overflow

MockFlow — импортирует элементы вайрфрейм-прототипов из Figma на платформу и обратно

MockFlow
Поделиться
Отправить
Запинить

Обсуждение