Prototyping in Framer: Choosing Workflows

Framer prototypers will end up coding a bit. The question is what can be done before the interaction work begins.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

This article explain the various ways one can begin a design in Framer and anticipates the caveats of each available option.

Designing in Framer

Using external tools

Framer can import from Sketch and Photoshop with a little pain, but be prepared for the following issues:

Flattened images

Which blocks the manipulation of Layer properties.

Text as images

Text becomes image as well, so forget TextLayer manipulations.

Distorted dimensions

Flattened shadows and other effects will change expected size.

No Design Tab

Framer won’t import designs, but exposes them in its Code Tab.

Using Framer’s Design Tab

Design Tab has been at the center of recent Framer updates. They are doing a good job, but some friction still occurs:

No importing

Framer cannot communicate designs with Sketch or Photoshop.

No vector tools

Framer will not help you on vector and path operations.

No pages or symbols

Some handy Sketch features will be completely out of Framer.

No plugins

Framer modules are like plugins, but work essentially for code.

Design directly on Code Tab

This is probably the most powerful approach. Framer does provide handy tools, though it still generate excessive amounts of code:

Mixed concerns

Design code is sometimes bigger then interaction code itself.

Feels overwhelming

A simple layer group can easily generate ~20 lines of code.

Demands organization

As project grows, code organization will become necessary.

Wrong place to design

Code Tab isn’t the ideal environment to design from scratch.

Overview

External tools

• Pros: Use favorite tools; Faster for simpler prototypes.
• Cons: Underuses Design Tab; Flattened text & fx.

Design Tab

• Pros: Familiar workflow; Easy to learn.
• Cons: Duplicated work; Limited IDE.

Code Tab

• Pros: Single way to go; Large scale prototypes.
• Cons: Too much code; Requires organization.

Conclusion

The importing capabilities wont’t unlock Framer’s full potential. The workaround requires some duplicated work.

Design Tab is limited when compared with other matured design tools. Code Tab can draw but dramatically increases code size.

Until Team Framer delivers an environment to rival Sketch, designing in Framer will always result in some friction.

The advantages of Framer come with a price. So it's important to evaluate workflow options before dedicating time to it.

Next

Design Tab takeaways

What does Framer offer in its Design Tab. What are the exclusives and what seems to be coming next.