Flex has three modes (Design, Animate, and Preview), each used during a different stage of the design process. Each of Flex's modes has unique UI elements and options tailored to its overall purpose.
Use the Modes toggle in the top-center of the Flex workspace to toggle between modes. Listed below are the three modes and their use cases.
Design Mode
Design mode is the first mode you use when creating content in Flex. It allows you to:
Add new pages to your experience and adjust layers using the Pages & Layers Panel
Apply Object States
Set position and size settings, as well as edit the visual and layout settings of selected content using the Inspector Panel
Create new responsive variants
Apply Breakpoint Overrides to your variants
Animate Mode
Animate mode is similar to Design mode, but the options in the Inspector Panel are changed to allow you to add and configure:
Interactions
Preview Mode
The purpose of Preview mode is to allow you to test the responsiveness of your experience before publishing. You can use the blue adjustment handles to manually resize the width and height of your experience.
Additionally, you can select a responsive variant to display or input exact width and height dimensions using the Sizing Panel in the top-right corner of the Preview mode workspace.