without coding

Screen linking with transitions

X comes with a set of transitions to help you prototype screen transitions directly in the view.

In the properties panel on the right, the link section allows you to attach a connection to another frame (screen) and set a basic transition such as push or overlay.

Most of the transition effects work as you would expect. The overlay and modal transition only allow you to choose the direction of the transition as well as the backdrop color and opacity. Once the links are created, you can preview the transition (Shortcut ⌘ + P ) to see your prototype in action.

Note that you can only set up a click/tap to transition at the time of this writing with Framer X v10.

Prototype scrollable area

Page scroll feature embeds a frame with content into a scrollable area

Most prototypes include common interactions like scrolling. That’s where the scroll feature comes in to make our lives easier. To make an area scrollable, you start by drawing out a scrollable area using the interactive tool in the “+” menu. You also have to create a separate frame that contains all the content and then link it to the scroll area. This workflow may seem redundant as it adds additional frames to your canvas but it has itsadvantage of being a independent module for you to switch between different content frames with ease.

Page tool

The page tool makes it easy to create swipe transitions

Another handing tool available in the design editor is the page tool, which lets you create swipe carousel like pattern by just connecting multiple frames together. This feature does more than just building a traditional carousel slider. Given that it enables a slide to reveal action, you can use it to prototype things like swipe row to delete or the iOS native dropdown picker for example.

Limitations with the design editor

The design editor has a similar prototyping workflow as other screen linking tools on the market such as Sketch, Invision and Marvel. You can quickly create a click-through prototype with Framer X or a slightly more interactive prototype with the page and scroll area feature. That being said, if you are looking to create something that is a little more complex or has custom animation effects then you have to get your hands on the code editor or use the component store (more on that later).

Source link


Please enter your comment!
Please enter your name here