Framer Platform for UX

For Prototyping / Usability Testing

Read in Russian

At the very beginning,
Framer was created in 2014 by former designers from Facebook and Google for prototyping using code, based on JavaScript and CoffeeScript. Its core features included animation and interaction.

Official Promo Video

For us as designers, Framer is particularly interesting for prototyping and usability testing of small features — for example, creating responsive data lists or small scenarios where users can navigate from one page to another using a browser. The complexity and depth of such prototypes can far exceed what’s achievable in Figma because Framer is inherently a page builder.

What can we do with Framer?

1. Real Web Pages
   Anything related to the web can be recreated in Framer to some extent.
2. Design and Components
   Create components for interface elements, just like in Figma.
3. Export and Hosting
   Generate independent prototype links and host websites for quick previews.
4. Responsive Layouts
   Each page can have multiple breakpoints, and even individual components can be made responsive.
5. Developer Presentations
   A straightforward way to demonstrate how the design should function in a real environment, addressing potential issues before implementation.
6. Additional Interactive Components for Pages
   Framer enables advanced interactive functionality that enhances prototype perception for end-users.

Examples include:

• Video playback
• Language switching
• Navigation and breadcrumbs
• Pop-up menus
• Forms that can collect data
• And other interactive features.

The Framer interface is simple and intuitive: the layers panel is on the left, and the properties panel is on the right.

Framer Motion
Framer Motion is a simple and intuitive API for creating complex animations and micro-interactions. The library enables designers and developers to work within a unified environment, allowing them to create animated prototypes with minimal effort.

Tags and Using the Framer Motion Library in React

What Are the Drawbacks of Figma?

1. Limited Interactivity. Prototypes in Figma are 100% static.

2. Less Realistic Behavior .Since Figma offers prototypes as static pages in a single size, it’s challenging to predict how the flow will appear to the end user.

3. No Responsiveness. Lack of adaptive design capabilities.

4. No Code Support. It’s not possible to embed code snippets directly into the page.

5. Other Limitations. Restrictions on creating dynamic and interactive components, such as animated lists or complex transitions.

6. Usability Testing. Figma doesn’t always allow for comprehensive usability testing due to certain limitations.

In Contrast, Framer Provides:

• Prototypes that look and function like real websites and applications.
• More capabilities.
• Direct import from Figma.
• Responsiveness across various screen sizes, allowing adaptive testing.
• Integration of prototypes with real data.

For usability testing, I used the UserTesting.com service, which I described in this article. Here, I provide examples of test scenarios for the “Matching Flow,” where the user is required to go through the process from registering on the platform to booking their first lesson.

During testing, I analyzed how users interact with the service, compared the old and new designs of teacher cards, and tried to understand how new tags like “Great for Advanced” or “Tech Savvy” influence their choices.

This is an example structure of the report that can later be used by other members of your team or decision-makers.

During the testing process, I suggest going through several stages of searching for a teacher using the Framer prototype and leaving a voice feedback on each point related to the tested elements:

1. How would you describe the teacher based on the information provided in the teacher’s card?
2. Is it clear to you what badges like “Great for Advanced” mean?
3. Did these badges influence your decision when choosing a teacher?

Examples of questions asked during testing on usertesting.com.

The result of the research will be a comparative table which will include:

• Testing plan, including lists of questions;
• Detailed report on each response from individual users;
• Links to recordings of the testing process;
• Overall positive feedback from the user group;
• Overall negative feedback from the user group;
• Recommendations voiced by the users;
• Conclusion from the test moderator.

Framer, as an alternative tool, can assist in testing complex scenarios and allows the creation of components with embedded data, which makes testing lists possible.

Additionally, for obtaining quality testing results, details are often crucial. For example, since the teacher cards included an interactive introduction video, we were able to fully test the scenario where the user could evaluate the informativeness of the card by utilizing all of its elements.

Framer is far from a perfect solution, but as an alternative tool, it can perform a number of important and useful tasks.

Read more

UI Accessibility for Designers(read article)

AI for Experience Designer Job(read article)

UserTesting Platform Review(read article)

UX & Product Dictionary(read article)

Your Career in Digital(read article)

Subscribe to my Telegram channel, I repost my writing there + really useful content from other authors. Also on YouTube