Switching from Sketch to Framer
Switching tools doesn't have to be a headache. Explore this guide to make your transition a breeze.
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
While the Framer interface might not look too different from the tools you’re used to, there are a few key things to keep on mind.
Name in Sketch | Description | Name in Framer |
---|---|---|
Artboard | Screens/Frames/Scenes | Screen |
Symbol | Reusable elements | Component |
Prototype | A property to start drawing links | Interactions |
Hotspots | Create a clickable area that’s larger than a single Layer | Create a 'hotspot' using Frames |
Start Points | Let you choose which Artboard your Prototype starts with when you preview it | Home Frame |
Components | The collective name for Symbols, Text Styles, Layer Styles, and Color Variables | Design components, Code components, Shared colors |
Create Symbol | Turn any layer into a Symbol Source allowing it to be reused and updated | Create component Command + k |
Image tool | Allows you to insert an image on the Canvas from a location on your computer | Frame |
Insert Window | A smaller, separate window designed for easy and fast browsing and inserting of Components | Insert Menu |
Mask tool | Used to apply a mask to a layer that will clip the contents above it to the shape’s outline | n/a |
Pencil tool | Create freehand paths | Drawing mode - Path |
Polygon tool | Draw a polygon shape on the Canvas | Drawing mode - Poly |
Rectangle tool | Draw a rectangle shape on the Canvas | Frame |
Sketch Preview | An iOS counterpart application used for prototyping playback and viewing Artboard previews from Sketch | Framer Preview |
Star tool | Draw a star shape on the Canvas | Drawing mode - Star |
Learn more about the Framer interface
Shortcuts
Action | Shortcut in Sketch | Shortcut in Framer |
---|---|---|
Toggle grid | ⌃ G | ⌃ G |
Toggle rulers | ⌃ R | ⌃ R |
Grouping | Command + G | Command + enter |
Enter Rectangle | R | F |
Enter Artboard | A | F |
Select all siblings | n/a | Shift + Command + A |
Select all children | n/a | Option + Command + A |
Workflow essentials
Mastering a new workflow is half the battle. Continue reading for tips on how to make your new workflow in Framer the most streamlined it’s ever been.
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.
Learn more about Team Settings in Framer
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
Framer helps your prototypes get closer to real products by providing handoff that’s ready for production.
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.
Bring your best ideas to life
Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.