3 полезных плагина для Figma: прототипы

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

Рассказываем, какие плагины для Figma помогут вам работать с прототипами.

Prototyper

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

Как пользоваться

1. Скачайте плагин по ссылке.

2. Выделите все объекты внутри фрейма, для которых вы хотите сделать прототип, — они должны быть компонентами с двумя вариантами: выделение активно и неактивно. Нажмите Ctrl (⌘) + P и выберите Prototyper.

3. В появившемся окне во вкладке Link укажите, как именно пользователь будет переключаться в меню: через стики, триггеры или крестовину. Также здесь можно выбрать тип контроллера: PlayStation, Xbox или Nintendo Switch.

4. В окне плагина в пункте Swap Variant укажите, какое именно свойство должно меняться. Например, в нашем случае это выглядит так: Active, no → yes. Также при необходимости вы можете настроить тип и параметры анимации.

5. Нажмите кнопку Generate и проверьте результат.

Prototype This!

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

Плагин всегда указывает тип анимации Instance. Если вы хотите её настроить, то придётся делать это вручную.

Как пользоваться

1. Скачайте плагин по ссылке.

2. Выделите фреймы, между которыми вы хотите сделать переходы.

3. Нажмите Ctrl (⌘) + P и выберите Prototype This.

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

Protofly

Плагин похож на Prototype This, но с пресетами анимации. Пользователь выбирает фреймы и выбирает тип перехода в небольшой коллекции плагина. Также вы можете сделать и свой пресет анимации — чтобы тратить меньше времени на однотипные переходы.

Как пользоваться

1. Скачайте плагин по ссылке.

2. Выделите фреймы, между которыми вы хотите сделать переходы. Если у вас есть кнопки, то в качестве стартового фрейма нужно выбирать их.

3. Нажмите Ctrl (⌘) + P и выберите Protofly.

4. В появившемся окне выберите тип перехода и проверьте результат.