Framer Team Handbook
Framer provides a way for your whole team to go from idea to execution, all in one place. In this guide, learn how your team can get the most value out of Framer.
What’s possible with Framer?
With Framer, anyone on your team can collaborate in the same file to deliver high fidelity prototypes. Framer fits as the all-in-one tool in your workflow, designing directly in Framer to make everything interactive from the start.
Collaboration comes first
Framer is a web app, with an optional desktop client for WIndows or MacOS. With Framer Web, teams can comment and collaborate on designs in real time.
- With commenting on web, you can drop comments anywhere on the canvas, create threads, and respond to existing comments making working from anywhere a breeze.
- Whenever collaborators are working in your project, their cursor will be visible if you are both looking at the canvas. Their avatars in the top-right will also give an indication which users have worked in your project and whether they are currently active or not.
- You can invite others to view, comment, and collaborate on your Framer project in real time. There’s no limit to the number of people who can simultaneously edit or view a project.
Easily share your projects and prototypes with people inside and outside of your organization. The sharing settings can be changed for different team members, stakeholders, or developers for collaboration.
- You can invite, view, and manage your project’s collaborators by clicking the Invite button in any file. For an extra layer of security, enterprise teams can choose to have only members and invited users open projects or only users with a company email open projects.
- The full preview of your prototype can be viewed and shared in Prototype view. This means your prototype will open in a new window with a unique URL and you can quickly share that link with anyone so they can view and interact with your fully functioning prototype. Additional security can also be added when sharing your prototypes. In the Share panel in your project you can choose to set a private link for each prototype you share. Your teams can also configure global team permissions to control all Prototype view links for all existing and future projects within the team.
- Sharing code and assets from your Framer project can be done in Handoff mode. While in Handoff mode, the canvas will display distances between layers, and the right panel will show your selected layer’s properties and transitions as Framer Motion or Swift code. Any collaborators in your files will also be able to use Handoff more freely so developers on your team have easy access to the specs they need to start building in production.
Anything from brand assets, design elements, to interactive components can be shared with your team. They are always secure, easily accessible, and can be synced from production.
- Once a Team account is activated, everyone with a seat in your organization will have access to the Team packages section of the Insert Menu in any team project.
- Anyone on your team can publish and install team packages that they create or import from the company’s design system.
- Teams can create and share Team Templates to support designed projects across the whole organization.
- Teams can share colors with with all members. To share colors, create a set of Shared Colors in the color picker modal and upload just as you would a team package.
- Team Fonts are uploaded via the team settings modal in the Framer dashboard, and will be available to every existing and new team project. Each member of your team will be able to use the font and viewers of any team projects will be able to view all custom fonts shared with your team.
Organization and Team settings
The organization entity provides support for multiple teams within your company in Framer. This level of hierarchy is perfect for multiple subsidiaries within a company, different product teams, multiple teams within a product team, and even agencies working with various clients. 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 team members, manage permissions, upload Team Fonts, and ensure everyone has everything they need to hit the ground running.
How to make Framer work for your needs
The power of Framer lies in the fact that design, prototyping, and development are all considered from the moment you create your first element in the canvas. In this section of the guide you can look at each focus individually, but remember everything is ultimately connected. By doing this, you can see what success looks like in the Framer workflow as a whole for your team.
Using responsive layout design, reusable components, and predictive vector editing, designers can iterate quicker and spend time on the creative composition of elements.
- Frames are used to create any design element and on top of that they have out of the box responsiveness and auto-nesting. Once your UI elements are created and styled using Frames, instead of spending time pixel pushing and making sure the spacing between elements is just right, designers can use stack layout property to reorder icons and components or drag and drop to snap them into place.
- The Insert Menu is a complete toolbox for anyone working in Framer. You can access thousands of in-app UI kits, interactive components, media players, popular icon sets, avatar generators, and more. To get an idea across quickly, you 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 everything provided by the Insert Menu early on to see the range and value it offers in the design process.
- The use of components takes the pain out of working with frequently used design elements. Creating components allows you to reuse tab bars, cards, and entire sections of your project by just dragging them onto the canvas. You can also add Variants and Variables(beta) to your components to create smart interactive components without code.
- Design beautiful illustrations and icons using an SVG-based vector editing toolset with predictive snapping, curve bending, and angle locking that allows you to create new icons and SVGs.
The prototyping phase in Framer can be done in parallel with design. Simple canvas tools, Smart Components, customizable motion effects, and access to thousands of pre-made interactive components ensure you are creating interactive prototypes from the start.
- Smart Components in Framer are fully interactive components made with Variants and Variables that require no code.
- Interactions are a way to trigger Transitions and other actions in your prototype. You can add interactions to Frames, Stacks, Graphic layers, Design Components, and Code Components.
- You can choose from seven different Transition types that determine how your prototype should animate between the Transition's origin and target, for a few of these you can also edit even further with custom spring and ease curves. The Magic Motion transition type is special, instead of animating the origin and target layers, it will animate the children of those layers.
- 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. Additionally, 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.
- With the out of the box interactive tools in Framer you can create everything from swipeable lists to iOS date pickers to 3D card transitions. And, you can make your prototypes feel even more real by adding interactive components. From Community packages or your team's own production component library, drag and drop animations, data, and rich media elements straight onto your canvas and 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 Insert Menu.
In Framer you can use code to enhance your workflow and prototypes. Although Framer has a rich set of visual tools to do the majority of advanced prototyping, sometimes you might want to drop into code to try things no visual tool can do.
- Framer provides 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 and 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 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.
- Any Code Component you create can also have unique UI controls that allow any designer to visually customize them, so you can reuse it across your projects and then package it up to share with your team. From colors and strings to files and numbers, every property can be surfaced and customized.
- You can also integrate production components from your design system within your prototyping workflow. Using Framer’s Component Importer, you can streamline the work that goes in to bringing components onto your canvas by automatically generating property controls based on how your components can be configured and used. With Framer Bridge, you can setup smart automation that will automatically publish the latest version of your components to your private team library whenever you release an update in production.
- Another way to bridge the gap between design and development on your team is to use the Framer Motion library, a set of helpers for designing physics-based animation, touch-based gestures, and components. Any animations and interactions you design can be used one-to-one in production, thanks to Framer Motion, the open source React library powering Framer.
Where to start for designers, UXers, prototypers
Framer is your all-in-one tool. Everything from wireframes, mockups, and icons to prototypes that behave just like real apps and websites - Framer has it all.
Useful components and community packages from the Insert Menu:
Where to start for developers or designers who want to extend prototypes with code
Code can be a powerful resource in Framer to help take your prototypes and workflow to the next level.
- 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.
- You can use your existing React-based 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.
- 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.
- Start prototyping with code, check out these guides on Code Components and Framer Motion, our open source, production-ready library that's designed for all creative developers.
Where to start for content creators, copywriters, marketers
Creating social asset mockups? What to test different versions of copy in your team’s new landing page? Framer isn’t just for designers.
Useful components and community packages from the Insert Menu:
Ready to expand Framer to your whole organization?
Try Framer on for size with the Pro plan, a full-featured but low commitment plan. Add more teammates as you go, then level up to Enterprise for personalized training, billing, and security features.
When your team is ready to grow, we offer more features for enterprise accounts.
- Full access to Framer app
- User Management Dashboard
- Private Team Store
- Dedicated Account Manager
- Training & onboarding
- Security/legal review
- Access Controls
- Groups & Spaces
- Developer seats
- Advanced Billing Options(billing per cost center)
Learn more about enterprise accounts
Learn how other teams have used Framer to streamline their design to development process, work with real prototypes, and build better products.