Prototyping design animations with Framer X
Understanding the capability and the workflow of creating high-fidelity prototypes with Framer’s newest tool.
What is Framer X?
A little bit of history, Framer.js was released about three years ago with the goal to provide an animation tool with fine-grained control on the motion properties without setting up a production-level environment. Over the last couple of years, it gained adoption among designers comfortable with front-end development but it poses a steep learning curve for others. Recently, “Framer X” was released as the next evolution of the Framer tool, which is built on React and includes a powerful design tool with features like adaptive layout and flexible stacks.
The move to React enables a more component-based workflow within Framer X and the workflow is reinforced by the tool’s component library as well as its component store. In addition, the new workflow opens up the possibility for tighter collaborations with engineers who already use the React library in production.
Prototyping without coding
Screen linking with transitions
Framer X comes with a set of transitions to help you prototype screen transitions directly in the design 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
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
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).
Applying custom animation with code overrides
Code overrides may sound a bit foreign for designers. The main idea is to apply a piece of javascript function to your design frame/layer so you can manipulate the properties of the layer with code. It can be as simple as changing the color of the background or as complicated as making a layer clickable and animates to different locations. Code overrides are highly shareable and the workflow to apply an override involves coding an override in a separate editor and linking the code functions to your design frame via the property panel.
When to use code override?
If you are looking to prototype animation based on certain user events then code override may be able to help. While code override is powerful, it has its limitations. For instance, at this time you can only override or animate a frame’s values such as its position, dimension, color hex, and opacity. This means that you can apply a style override to any frame, similar to the process of applying a document text/color to a layer in Sketch. The benefit of applying style with an override is that you can treat it as a style symbol that can be linked to multiple elements to ease the pain of future updates.
A more common use case for override is to create and apply an animation event to elements such as scaling the size of an element on tap. Given that the design editor only allows you to connect screens based on clicks, code override is another method to listen to user events and create animated responses.
The limitations of code override
For the most part, you should be able to prototype a variety of animation effects with the code override feature. Framer’s animation library is sufficiently powerful but there are some user events it does not capture yet such as swipe, and pinch. Therefore, if you need to attach animations to these user inputs then you have to go down the code component route.
You can learn more about the code override feature on Framer’s documentation page.
Code components
You are likely familiar with how design component works within Framer because it operates as a design symbol in Sketch or other design tools. A design symbol can be re-used in different design files and there may be properties (e.g. change text, toggle to different variations) available. When created, code components work exactly the same way but the catch is that a code component is a React component and it has to be created separately with a code editor.
Why use code components
Creating a Framer code component is basically writing code, which requires a certain level of proficiency with React. The power of the code component is that it gives you flexibility to implement functionalities into your component with less limitations. Compared to the code override which has to connect to the design layer and therefore limited by its output, we control both the styling and behavior of the design from the code component.
The component store
The beauty of the component is that it can be reused for other design project and by other people. Framer’s component store facilitate the process of organizing and sharing components. By allowing anyone to publish their components to the store, others can leverage these pre-built components, especially the coded component that may have embedded functionalities. One example is the YouTube player component, which renders a fully playable video player within your design prototype and all you have to do is to supply a YouTube link. There are other powerful components in the store and more are contributing to the store every day by other people. Over time, this component ecosystem should allow designers to build highly interactive prototypes by dragging and dropping components.
