Onboard your team in Framer

20m

Intermediate

Framer provides a new way for your team to go from idea to execution, all in one place. Adopting Framer can streamline your workflow and allow designers and developers to collaborate with each other in the same tool.

In many ways, Framer will look familiar to other design tools. But since Framer can do so much more than other tools, it might take a bit of planning to get the most out of the new workflow.

This guide provides guidance and best practices on how to successfully validate Framer as your team’s new design tool.

Why do teams choose Framer?

With Framer, designers and developers can collaborate in the same file to deliver high-fidelity prototypes. Choose how you want Framer to fit in your team workflow: import from existing graphics tools like Sketch or Figma, or design directly in Framer to make everything interactive from the start. On top of that, teams can also take collaboration further by using shared packages, along with sharing and commenting on the web.

For Collaboration

Framer for web

Framer is OS-agnostic and works in the browser, with an optional desktop client for offline use. Framer Web makes it easy for teams to comment and collaborate on designs, as well as share files with people inside and outside of the organization. Leave comments anywhere on the canvas, create threads, and respond to existing feedback. Quickly share web links to invite people to your project. When sharing your files with teammates or clients, you can control permission levels by granting editing or viewing only access. The sharing settings can be changed for different team members, stakeholders, or developers for collaboration. Whenever collaborators are working in your project, their cursor will be visible if you are both looking at the canvas. The avatars in the top-right corner will also indicate which users have viewed or worked in your project and if they are currently active or not.

This product is still in beta - learn more here

Team packages

Brand assets, design elements, and interactive components can created and shared with others as team packages. These packages are always secure, easily accessible, and can be synced from production. Once your team account is activated, everyone with a seat in your organization will have access to the team packages panel. Anyone on the team can publish and install team packages that they create. Or import components from your company’s existing design system. The owner of a package will have the ability to update the package and push a notification to the rest of the team, ensuring everyone is always working with the most up-to-date assets.

To stay organized, your team will get a single dashboard to manage billing and add user seats as you scale. Here, you can send invites to new teammates and ensure everyone has everything they need to hit the ground running.

Tip: To learn more about using team packages, watch this official Framer course for teams.

For Design, Prototyping and Development

Next, let’s look at how Framer works across the three design product design disciplines. By doing this, we can see what success looks like in the Framer workflow as a whole for your team.

Design

With access to responsive frames, reusable components, and predictive vector editing, designers can iterate quicker and spend time on the creative composition of their prototypes. Everything designed in Framer is based on frames, which have out-of-the-box responsiveness, auto-nesting, and can be used to create any design element. Furthermore, instead of spending time pixel-pushing and making sure the spacing between elements is just right, designers can use the stack tool to reorder icons and components or drag and drop to snap them into place.

By using public packages, designers can access thousands of in-app UI kits, popular icon sets, avatar generators, and more. To get an idea across quickly, team members can compose entire interfaces with free resources, generated by one of the largest design communities in the world. It is helpful to get acquainted with public packages early on to see the range and value that they can offer in the design process.

The use of design components take the pain out of working with frequently-used design elements. Creating components allow designers to reuse tab bars, cards, and entire sections of your project by just dragging them onto the canvas. Design components also have a master and instance relationship that allows overrides and updates to a single property without creating a new component.

Need to create icons and SVGs? Framer allows you to design beautiful illustrations and icons using an SVG-based vector editing toolset. Some standout features include predictive snapping, curve bending, and angle locking.

Prototyping

Here’s where Framer truly shines. Simple canvas tools, customizable motion effects, and access to thousands of pre-made interactive components allow you and your team members to create quick high-fidelity prototypes.

Anyone involved in prototyping can use out-of-the-box tools such as the link tool, scroll tool, and page tool. The link tool allows you to create connections between screens directly on the canvas. Then use the dropdown in the properties panel to customize unique transitions. Adding scrolling to your prototypes is as easy as defining a scrollable area and then connecting it to any frame of content. The properties of the scroll tool also allow horizontal and vertical scrolling in the same frame. Lastly, the page tool allows you to create swipeable content areas in your designs. It’s perfect for carousels or sliders, where you can create simple page transitions or customize the direction, momentum, and more.

Using these simple but powerful interactive tools in Framer you can create everything from swipeable lists to iOS date pickers and 3D card transitions. And, you can make your prototypes feel even more real by adding interactive components. Browse Framer’s in-app repository of public packages or your team’s own production component library. Install and drag and drop animations, data, and rich media elements straight onto your canvas. Then customize everything through custom UI. All components can be backed by code, bringing you that much closer to development.

Even if your team does not have a production library of components, you can install dynamic maps, YouTube players, working inputs, and draggable sliders all from the in-app packages. Framer public packages are a free resource, powered entirely by the community and teams like Dropbox, Snapchat, Twitter.

Development

Another way Framer stands out is by providing a new way to directly render React and HTML/CSS as design elements on the canvas. Designers or developers on your team can turn basic HTML/CSS or advanced React components into visual elements. Since the Framer canvas is basically a browser, you can render anything you would on the web, so your team can even prototype and design with elements from your design system.

In Framer you can also use code to add logic and data, then go back to the canvas to tweak style. Since you’re using code in the design and prototyping phases, the gap between design and development begins to close.

The code editor in Framer allows developers to add unique UI controls to any components created. This allows any designer to visually customize components as they use them, increasing reusability, and maintaining brand guidelines across your team. From colors and strings, to files and numbers, every property can be surfaced and customized.

Another way to bridge the gap between design and development is to use the Framer Library, a set of helpers for designing physics-based animation, touch-based gestures, and components. Any animations and interactions you design or use can be used one-to-one in production, thanks to Framer Motion, the open-source React library powering Framer.

Pain Points

Now that you understand some of Framer’s capabilities, it’s time to consider the tool in relations to your own team’s current workflow. Understanding what currently prevents you from your ideal work setup is a great first step in validating Framer for your team. For example, some pain points might include:

  • Teams are not able to go beyond static designs
  • Teams need to be able to show interactivity and micro interactions to present to stakeholders
  • High fidelity prototypes are needed to close gap between design and development
  • Teams need better feedback from user testing
  • Teams need a single source of truth for component libraries
  • Designers need to be able to design with real data

This post outlines exactly how Framer is able to help solve each pain point

Goal Statement

Once you’ve collected your team’s current pain points, set a goal for what you want to achieve and how Framer can address your current blockers. Your goal could be several things or you could just be looking to address one specific issue in your workflow. Whatever the case, here are some example goals to get your team thinking:

  • With Framer we can accelerate design to developer workflow
  • With Framer we can create and maintain our design system by keeping in-sync production code and code components in Framer
  • With Framer we can clarify how we communicate micro / interaction and motion to our developer teams and reduce communication burden + get better quality faster

Take time with your team to set a goal and make sure you refer to it in order to see if it is being validated through your onboarding process.

Organize your process

Trial Framer with a small team and establish roles of responsibility

As a general practice, teams see the most success when a small group of up to five users is the first to set everything up for the rest of the team. Be it importing a design system or creating design components to publish, this team sets up everyone else for the best possible experience in the tool.

Keep it simple

Choose something easy to start with, but also something that has value and will utilize the unique potential of Framer.

For example, try dissecting a few interactions that you can’t prototype in your current tools of choice.

Imagine you are trying to recreate the homepage of your app: where do you need to start? Think of the tasks that are now possible for you to try in Framer. Your logo as an SVG, an interactive input field or a button with different states.

A small initial win offers your team a better opportunity for long-term success. Generally, teams see success when you are trying to redo an existing page or feature from your app, website, interface, etc.

Set small and realistic goals for the specific project

Figure out the building blocks that you need to achieve your overall goal with Framer. For example, list your general goals and some incremental to-do’s that would help you achieve them:

  • Designers’ goals and their criteria for evaluation
  • Developers’ goals and their criteria of evaluation
  • Other team members’ goals and their criteria of evaluation

Set clear timelines and stick to them

Timelines create commitment from the team. Goals without timelines have less influence. Assign a mutually agreed upon deadline for every task that your team decides to accomplish in Framer.

Take advantage of team packages

In order to bring more visibility to everyone’s progress, it’s a good idea to publish component packages so all members of your team can see. Even if they are unfinished components or early-stage prototypes, it is a useful way to inspire and hold all team members accountable. Encourage further collaboration by updating and allowing others to install packages from the team.

Tip: How to get the most out of Team Packages Organizing your packages

Involve developers

Framer allows for collaboration across disciplines, so involving developers in the project from the get-go is a good way to test this workflow.

  • Developers can start by importing some existing React components and publishing them as team packages with the Framer desktop app, which others will then be able to design and prototype with.
  • Here is our documentation around bringing your React components into Framer.
  • Developers will see the true value of the ecosystem that is possible due to Framer.fx files. Due to this file structure, developers can use version control through Git and import local production components.

Tip: Use Framer at least 3 times a week. This has proven to be successful with teams getting started with Framer. It can be easy to revert back to the tool you are familiar with, so it is important to try to accomplish your weekly tasks in Framer.

Getting Started

A nice place to start for designers

Many teams find initial success by prototyping an easy and popular flow. Designers can choose to copy and paste a common flow from Sketch, or use the Figma plugin to build off of pre-existing designs.

Log In Flow

Search Flow

Checkout Flow

Tip: Check out this guide to learn about useful packages to help you get started

A nice place to start for developers

Instead of designing something completely from scratch, start by importing your design system and composing interfaces with your production React components.

You can use your existing React design system in Framer and add interface elements to control the props for every component from the canvas. This way, designers are able to use your production components right on the canvas to compose new product ideas. Your team can use your components in Framer, by importing them through adding your design system from NPM as a dependency to the Framer project. See more in these step by step instructions Once your team has exposed the components your designers want to use in Framer, the package or packages can be published as a team package, so everyone in your organization can access it. The process of bringing your design system to Framer can be automated by using Framer Bridge, a new command line interface (CLI) that allows you to automatically publish and distribute components to designers. If you team would like to test the Framer Bridge process there is a starter kit available on Github.

Tip: Take advantage of shared colors to sync color tokens

Once you’ve created a set of colors, you can share them with others by publishing them as part of a package. To learn more about publishing shared colors, check out this session. You’ll find shared colors installed from packages in the color picker as well, and you can use them in the same way. By clicking on the dropdown menu, you’ll be able to toggle between your presets and any installed package that contains shared colors. To prevent any accidental local changes, shared colors from packages can only be edited by their author. If you maintain a package of shared colors, updating it will reflect the new colors for everyone, keeping them in sync across multiple projects.

What will adoption look like on your team?

Teams use different methods for spreading Framer across their organizations. Some examples include:

  • Creating a Framer slack channel
  • Joining our public slack for real time help
  • Sending a company-wide invite for a one-hour demo presented by a Framer product specialist
  • Organizing a designated day to learn and teach Framer eg. Framer Fridays
  • Inviting colleagues to Framer meetups in your area

How with you maintain and expand use?

  • Framer Support: Using Framer X
  • Framer Learn
  • Sketch Copy-Paste paired with the replace with feature. This feature makes it easy to switch out layers for components in Framer. Replace With automatically matches the new layer size and position with the original layer. It’s especially useful when going from a wireframe or static mock-up to an interactive design. You can easily replace a design component or frame with a code component from a Package or even a production component from your design system.
  • Figma Plugin (coming soon)

What to do if you’re still facing push back from your team

What you might be hearing from your team:

  • Framer is too technical
  • Our current workflow is fine
  • We already have too many tools
  • How do we know Framer will fit our needs?
  • We don’t need prototyping
  • We already use click-through prototypes

We can counter these concerns and show value directly. If your teammates are concerned that Framer is too hard you can ask if they have seen new no-code features that are being added all the time such as the Switch component. If team members don't see the value of prototyping, think about the benefit of showing a fully functional prototype to your CEO versus static mockups. Interactive and high fidelity prototypes have beneficial impacts on your workflow and they are now easier than ever to make in Framer.

Learn how other teams tackled these issues and have now successfully used Framer to help streamline their design to development process.