The Framer X-perience.

The stage for digital know-how.

Our expert tested the new interaction design software Framer X for you and shares his experience

Customer Experience

For some time now, a new software tool has been promoted on the most popular UX design blogs.
As UX designers of the Skillgroup Concept & Interaction at Merkle in Frankfurt, we are always happy to test new tools in order to implement digital products for our customers in the best possible way. Thus also this new tool. Framer promises to unite design and code and thus provide unlimited possibilities in the further processing of interactions and flows.
In the following article I would like to share my experiences with this new design program and present some key facts and special features. What is Framer X?

Framer X is a new UX & Interaction Design Software, which promises new application possibilities with current tools, functions and extended features in the code area.

Very advanced interactions can be animated compared to other design apps. For this, the latest version of Framer X (v14) introduces the built-in use of React components. Especially this code-based work promises new interactions that allow realistic prototypes for apps and websites. Designers & developers are thus getting closer to high-fidelity prototyping and can thus optimally convince the customer.

Frames

With the Frames Tool you can create screens and interface elements. It allows you to design a responsive layout. More preset sizes for popular devices are available. For example, the screens correspond to the standard iPhone and PixelPhone devices. From watch, to tablet, computer and TV resolutions there are several standard frames.

You can generate a frame by pressing F or the plus symbol on the left. Every frame you place on top of another one will automatically be shown as a subordinate element of the base level, so you have a clear hierarchy.
The frames will adjust automatically when you resize them. So you can use them together with UI elements as buttons and shapes.

Stacks

With the Stacks Tool, flexible interfaces can be designed. Stacks is especially useful for you, in connection with working with grids and lists. It works like a representation of flexbox and CSS-grid-technologies. You can automatically control the distribution and alignment in the designs and drafts. By pressing S and then making a selection over all the elements to be placed in it, you build a stack. This allows you to automatically align multiple elements horizontally or vertically. Also the distances between the elements are easily adjustable.

Linking

With the Link Tool you can create interactions and screen-to-screen flows in no time at all. By pressing L, you can also link an element - such as a button - from one frame to another.

Scrolling

The scrolling tool is used to generate scrollable content. This enables you to scroll this content horizontally or vertically in the prototype.

Page

If you want to create swipeable pages the Page Tool is the ideal choice. You simply link the page field with images to test it in the preview.

Graphics

For graphics and icons, it is best to use the Graphic Tools. To do so, press the G key to switch to Drawing Mode. In this mode you can choose from many standard shapes. You can also develop new graphics in Drawing Mode with the Vector Tool. So Framer X has all the functions you need to draw anything from user-defined symbols to complicated illustrations. The designs can be refined with the extended path editor and exported from the canvas.

Components

Components work similarly to the icons in Sketch. You can use them to create Master Components, which serve as the basis for the other instances. So all changes in the Master Component are automatically applied to the instances.

In contrast to Sketch, in Framer X these components are additionally interactive. This makes it possible to inherit actions to other instances.

Code Components:

A significant feature in which Framer X differs from other UX and IXD tools is the integration of a code editor. With this code editor you can optimize the components with code and adapt the design with the script language React.
With the React components it is possible for us designers & developers in Framer X to get even closer to high-fidelity prototyping.

React Documentation:

Interactive components are code components that are written in React. You render simple HTML elements and design with CSS. So setting up the first code component is easier than you think. In the Components menu on the left sidebar, click on the new "Component from Code" to create a component. You can rename it without spaces and select "Create and Edit". This new code-component can be dragged from the left sidebar into our framer document as "Hello World! Here an "Edit Code" button on the right property panel is used for direct editing in the editor.

Therefore it makes sense to install Visual Studio Code as an additional editor to work with Framer X.

Tutorial FramerX and Visual Studio Code:
(React Components in Framer X, Building your first code component using npm libraries)

For further processing, basic knowledge of HTML / CSS / Javascript is required. If you need a refresher or more information, a look at the React Getting-Started-Guide can help

Here you can find another tutorial by the designer Meng To. It's free and shows very well how to set up a project and the corresponding editor. Furthermore, more functions and detailed applications are explained in detail. Vivid videos complete the tutorial and give you a good introduction to the first work with code components.

Store

The so-called "Store" in Framer X offers you in the area of design software various additional tools and a wide range of components that you can immediately drag into your current Framer project. The Store Components range from the useful Youtube Player Package, which allows you to integrate videos live into the prototype, to interactive toolbars with standard iOS behavior, which can be used to animate almost anything.

Here, a short video, which should bring the store a little closer to you.

Conclusion

Why should you use Framer X?

Besides the variety of the store and the freedom of the code, I was convinced by the extended and for designers especially useful basic functions. Also the animation and prototyping is significantly supported by many useful functions and tools. Framer X is intuitive and therefore easy to learn. However, if you occupy yourself with the program for a longer period of time, it turns out that the actually positive factor of the numerous high-fidelity possibilities of coding often takes a lot of time.

But if you like to create User Experience and Interaction Design with a brand new tool and you are not afraid of coding, Framer X is a great tool for you. Especially outstanding is the fact that Framer X closes the gap between designer and developer for the first time. With the code components, designers and developers speak a common language. Instead of the designer creating a draft, which is then translated into code by the developer, Framer X allows a small part of the code to be completed. Furthermore, you can select and inspect all designs in the preview with a right click, and edit and copy the code directly.

After consultation with colleagues from the frontend, I have to mention that they can use the existing code in Framer X in a meaningful way and develop it further. This makes working with the program especially interesting with regard to the transfer between designer and developer. Nevertheless, Framer X does not in any way negate the valuable work of our developers, since React needs to be further developed in the project-specific preparation by the frontend coders.

I see the biggest advantage of Framer X in the genesis of a strong high-end prototyping. All UX and interaction design patterns can be customized down to the smallest detail. The well-known experiences of iOS and Android in the app area and web can therefore be designed in such a way that the customer and user will be lastingly convinced of the product and concept.

This realistic and success-oriented application scenario, which focuses on the customer and the optimal implementation of the prototyping, makes Framer X a design tool with a future.

Have fun & happy Prototyping!

Benjamin Sporer Published on 5. March 2020

Merkle: Get in contact

Discover how a robotics pioneer became a digital innovator

Curious? Contact us!

Top topics

Insights

Discover Merkle

The Framer X-perience

Frames

Stacks

Linking

Scrolling

Page

Graphics

Components

Store

Conclusion

More exciting blog posts.

Merkle CXM Data Accelerator

YOUR PRIVACY IS IMPORTANT TO US: OPT-IN FOR DATA USE

YOUR PRIVACY IS IMPORTANT TO US: OPT-IN FOR DATA USE

Headless CMS

How composable architecture improves customer experience