ProtoPie Genie

ProtoPie Genie is a Figma plugin designed to enhance your design workflow by enabling dynamic interactions within your Figma prototypes.

Overview

ProtoPie Genie simplifies dynamic interaction testing, accelerates prototype delivery, and elevates prototype experiences by offering:

• Fast prototype delivery: Transform static designs into interactive prototypes quickly.
• Dynamic interactions testing: Test various scenarios and interactions seamlessly.
• Impressive prototype experience: Impress your team, clients, and stakeholders with prototypes that feel alive.

How to Get Started?

Follow these instructions to install the ProtoPie Genie plugin.

1. Visit the Figma Community page.
2. Choose "Open in..." to select the appropriate file for future tasks.
3. Click “Run” to launch “ProtoPie Genie”.

In Figma, right-click, choose Plugins, run "ProtoPie Genie," and follow the interaction instructions.

How Does the ProtoPie Genie Plugin Work?

The "Interactive Input field" feature in ProtoPie Genie enables users to create dynamic input fields that respond to user interactions. These fields mimic real-world user experiences, making it easier to test and refine designs.

Using Interactive Input Fields

Adding an Interactive Input Field

1. Open the ProtoPie Genie plugin.
2. Select a text object within your Figma design that you want to convert into an input field.
3. Click the "+" button on the "Interactive Input Field" menu.

Adding an Output Field

1. Select the interactive input field you want to use as the value source.
2. Click the "+" button under the "Select output field" section.
3. Choose a text object within the Figma page to display the output.

Previewing Interactions

Previewing interactions in Figma using the ProtoPie Genie plugin is a straightforward process.

Previewing a Single Interaction

1. Select the interaction you wish to preview within the plugin.
2. Click the arrow button on the interaction's property panel.

Previewing a Figma Flow

1. Select a Figma flow from the options at the bottom of the ProtoPie Genie plugin.
2. Click the "Preview" button.

Supported Figma Objects

The ProtoPie Genie plugin supports a wide range of Figma objects, including:

• Text
• Rectangle
• Frame
• Group
• Component
• Instance
• Boolean
• Vector
• Ellipse

Supported Figma Interactions

The ProtoPie Genie plugin seamlessly converts "On Click" and "Navigate to" Figma interactions during the preview, ensuring a comprehensive understanding of your design's interactive elements.

Unsupported Figma Objects & Properties

Certain Figma objects and properties are not currently supported:

• Unsupported Objects: Star, Line, Polygon, Video.
• Unsupported Properties: Visibility, Lock, Position, Size, Rotation, Opacity, Constraints, Fill (solid color & image), Borders, Shadow.