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 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.
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 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.
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.
The graphic tool allows you to design illustrations and icons using an SVG-based vector editing toolset.
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.
The primary component is the first component created, whose duplicates are called instances. Any changes to the primary (copy, layout, etc.) will change the same things in all instances.
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 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.
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 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.
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 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.
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.
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.
The target refers to the element to which you are linking.
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.
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.
The transition refers to what action will occur between screens when a link is triggered.