Switching from Sketch to Framer
Think about your current designs in Sketch. Does it make sense to redo them in Framer and start fresh? Or would your team be more successful by importing your current designs and building off of them? The nice thing about moving from Sketch to Framer is that you can keep all of your old designs if you want. Our Sketch import allows you to copy and paste your artboards into Framer so you don’t have to fully start from scratch when you move. Learn more about how the Sketch importer works.
On the other hand, some teams have found that starting fresh when transitioning to Framer was more beneficial. Starting on a new project or feature is often a great time to go all in with Framer. This is because in Framer your designs are interactive from the start, closer to the real deal, and allow you to use the same hierarchy and formatting as engineers do in production so you are aligned from the beginning.
Learning the Framer interface and workflow essentials
While the Framer interface might not look too different from the tools you’re used to, there are a few key things you need to know to set yourself up for success. For example, the differences between components in different tools as well as how to use Frames and set your start point (Home Frame) in Framer.
Find tool definitions and keyboard shortcuts in the original post →
Setting up your team
In your Framer dashboard you can control the settings for your team. Select your team on the left-hand side of the dashboard. Next to your team name, select Team Settings under the ... icon.
To invite members to your team, go to the Members section of the Team Settings modal, enter their email address and select Admin, Viewer, or Editor. Your new team members will be notified through email and you can start prototyping together in no time.
Here you can also control privacy settings in the Permissions section. This is where team admins can set team permissions for inviting members, project access, and prototype access. With these permissions all your files can be completely private and only accessible to those with your company’s email domain.
Finally, In the Team Settings section of your dashboard, team admins or editors can upload Team Fonts to share with the entire team and ensure all team members are using the correct fonts in their projects.
Creating and sharing components
In Framer there are two types of components. A Design Component is a Frame that is optimized for reusability. A Code Component is an advanced type of component. It is similar to a Design Component, except that its primary is written in code. All the components you create in your project will appear in the left hand panel under Components. Here you can drag and drop to quickly use them in your project.
If you’ve created Design Components, Code Components, or even Shared Colors you’d like to share with the community or your team, you can do so by publishing them as a package from Framer’s desktop app. When you publish a package, you are essentially publishing your project file. The components and Shared Colors in your project will be recognized and bundled up to be included in the package. Read more to learn how to publish packages with Framer’s desktop app.
Learn more about components in Framer →
Prototyping
You can now wireframe, design, and prototype all in one place. Framer gives you the power to create more unique prototypes with out-of-the-box transition types. Link from one frame to the next by choosing your target on the canvas. Once the link is created the default transition, Magic Motion, will be selected. Magic Motion is a transition type that allows you to customize the movement of content across screens with your desired spring and ease curves, giving you the most customization. However, if that’s not the transition you’re looking for you can also choose from Instant, Flip, Fade, None, Modal, or Overlay.
Interactive components are readily available for you to use from the Insert Menu. Search from hundreds of ready-to-use components. To add a component to your project, click on the component and then click Insert.
To use real data in Framer all you need is a single component. Install the Data Component from the Insert Menu to populate your designs with data from any source. Learn more about best practices for the Data Component.
Learn more about prototyping in Framer →
Handoff and sharing
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 code so your developers have everything they need to start building. One of the most useful things about Handoff mode in Framer is that if a selected layer includes a transition, you will see the transition’s animation as either Framer Motion, our production library, or Swift code. Viewers and editors have access to Handoff mode in Framer. This means anyone you invite, such as developers, can copy the code they need to start building.
Sharing in Framer starts in the canvas. Since Framer is on the web you can collaborate with your team members in real time while you design. Anyone can leave comments in the canvas as well to deliver feedback easily and efficiently.
Sharing your files and prototypes is as easy as sending a link. You can invite team members to see your files by clicking Invite and added their emails. Here, you can also specify whether they will have view-only or edit rights. To share just your prototype, click the share icon, choose your permission settings, and copy and send the link.
Originally published at https://www.framer.com.
