What are these common Framer terms?

Assets tab

Under the assets tab, you can toggle between components and code files. Browse all your design and code components in the components tab and find code files and overrides in the code tab.

Backdrop

The backdrop is a property that is only available for certain transitions. Those include, Modal and Overlay. This is because the backdrop describes the color or tint that can been seen when a Modal or Overlay is triggered so it can be differentiated from the content under it.

Code components

Code components are blocks of code that can be rendered directly on the canvas. They can be as simple as basic HTML and CSS or advanced React components containing state and data. They can be created inside the Code tab of Framer X or imported from external sources.

Code overrides

Code overrides are JavaScript functions you can write yourself and apply to any Frame or component on your canvas. The functions act as transformers that get an element's properties from the canvas as inputs (props) and return them with modifications in the preview.

Design components

Design components are a powerful feature of Framer X to turn any part of your canvas into a re-usable element that propagates its changes to any instance. They allow you to create repetitive designs very efficiently. Design components can be composed out of purely visual elements like Frames and text but can also contain code components as children.

Direction

Direction is a property that is only available for certain transitions. Those include, Push, Overlay and Flip. This is because the direction determines from which side of the screen the next screen will come in from.

Frame

Frames are the most versatile tool in Framer. A Frame is essentially a container for other elements, so they can be anything, from screens to buttons to cards. They can also be nested inside other Frames to create larger user interface components.

Graphic tool

The graphic tool allows you to design illustrations and icons using an SVG-based vector editing toolset.

Handoff tab

The handoff tab allows you to extract clean, production-ready code for your developers. Three formats are currently supported in our first step toward a seamless handoff experience.

Master component

The master component is the first component created, whose duplicates are called instances. Any changes to the master (copy, layout, etc.) will change the same things in all instances.

Page tool

The page tool allows you to create swipeable content areas in your designs. You can link the Page tool to multiple Frames, and the content of the Frames will be reflected in the Page tool.

Previous frame

Previous frame is an option when you are on the second screen of a flow and you want to go back to the screen where you just came from. For example, selecting previous frame can be useful for a home button in a menu, using previous frame instead of manually linking to the previous screen on the canvas can help reduce clutter on the canvas.

Properties

Properties are style elements of your layers like size, radius, fill, multiple shadows, gradients and effects. In Framer, users can add custom properties to any code component they create.

Prototyping panel

The prototyping panel provides you with ways to turn static assets interactive, for instance by allowing you to navigate between screens after certain events or by adding code overrides to elements on the canvas.

Public packages

Public packages are a free and open-source library of useful design and code components. These are particularly useful for designers who wan to create hi-fi prototypes without diving into code.

Scroll tool

The scroll tool allows you to create scrollable areas. Once created, you can link this to any Frame, which will mirror the content inside of your scroll area. Make an update in the Frame and it will be reflected in your scrollable area immediately.

Shared colors

Shared colors provide a way to create, edit, and share colors. These colors can be published to a package, and can then be used in Frames, text, and more.

Prototype view

The Prototype view can be used to quickly share a permanently hosted url that leads anyone to your prototype. Your prototype will be fully interactive, and anyone can navigate through it. On top of that, the Prototype view provides you a way to quickly scan a QR code to allow previewing on mobile devices.

Stack tool

The stack tool will automatically align and distribute elements for you and ensure that they can easily be rearranged without spending time manually pushing pixels. For those familiar with CSS, this is like Flexbox, but in your canvas.

Target

The target refers to the element to which you are linking.

Team packages

Team packages are the best way to share and re-use work in your team or organization. By using Team packages you can manage versioning, dependencies, permissions, collaborate with your entire team on projects and design systems.

Text

In Framer text is added as a layer with some smart properties of its own. A text layer will align logically based on where it is placed on the parent frame. Text layers have two modes that affect their size: "Auto" and "Fixed". When set to "Auto", the width and height of the text layer will adjust according to the content and size of the text itself and can be adjusted via custom controls in the properties panel. When set to "Fixed", the size of the text box can be manually adjusted and will not change according to the content.

Transition

The transition refers to what action will occur between screens when a link is triggered.