- Open Sketch source files stored in Frontify directly from within Sketch
- Push changes to Sketch source files directly to Frontify Workspace
- Easily push your Sketch artboards to different folders in your Frontify Workspace
- Sync your typography and brand colors from the Frontify Style Guide into Sketch
1. How to install the Frontify Sketch Plugin
First, you need to download the latest version of the Frontify Sketch Plugin. Simply unzip the downloaded file and install with a double click. You will see a success message once the Installation is done - which will literally take a second ;)
2. How to start the Frontify Sketch Plugin
You will then find the Frontify Sketch Plugin in the 'plugin' section in the menu bar. Alternatively, you can use the handy keyboard shortcut to jump right to the artboard or Sketch source file functionality:
- Control + Shift + F (⌃⇧F)
3. Sign in to your Frontify environment
Signing in is straight forward: Enter your Frontify domain, your personal credentials and authorize Sketch to access your Frontify account.
4. Navigate between your brands, projects a project folders
Once you've successfully signed in, you can change the brand and projects by clicking on the logo next to the brand title. If you haven't any projects in a specific brand yet, you can create one right within the plugin by clicking on 'Create project'. To navigate within different project subfolders trigger the change folder dialogue.
5. Add a Sketch source file to Frontify Workspace
Adding a Sketch source file to Frontify Workspace is straight forward. Save your work, trigger the plugin's source file functionality and make sure you're in the right project (see 4.). Press 'Add current Sketch file' - that's it.
6. Open a Sketch source file from Frontify Workspace
Similarly, if you want to open a source file from Frontify Workspace, trigger the plugin's source file functionality, navigate to the project where the source file is located (see 4) and press 'Open' (see 7).
7. Push changes of a Sketch source file to Frontify Workspace
Once you're done with your changes, simply click 'Push Changes' next to the Sketch source file name in the Frontify plugin. Your file is now on Frontify Workspace and accessible to all the people that have access to the project.
8. Upload single or multiple Sketch artboards to Frontify Workspace
You can either upload single or multiple artboards to Frontify Workspace. Within the Frontify Sketch plugin, navigate to the brand, folder, and subfolder where you want to upload your artboards (see 4). Push either 'Upload' right next to the artboard if you want to upload a single artboard. Alternatively, click 'Upload All Artboards'. If there is already an older version of the artboard in the same folder, Frontify automatically creates a new version for you. The same is true for Sketch source files.
Artboards can be easily selected in bulk in the Sketch environment and they will be automatically selected in the plugin for you to upload in a group with the ‘Upload selected’ or simply uploaded all together using the ‘Upload all’ button.
9. Use Sketch Libraries with the Frontify Sketch Plugin
A library is actually an ordinary Sketch file containing symbols that can be used in other Sketch documents. If you make changes to the library file, your colleagues will be notified that updates are available for the instances they referenced in their documents. They can then preview, check and confirm changes. They only have to pull the most recent library file using the Frontify Sketch plugin to make use of this feature.
10. Sync your brand fonts into Sketch
You can access all the fonts you defined in your Frontify Style Guide directly from within Sketch. There is an easy option to either download all the fonts, or to just push them to your Sketch Text Styles.
11. Access your brand colors from Sketch
Similarly, you can access all colors defined in your Frontify Style Guide. Navigate to the ‚Color‘ section within your ‚Brand Assets‘ tab to find your color palettes. You can select and use those colors immediately by clicking on them or you can add them to your document colors or to your global colors.
12. Access the images in your Media Library
On the next tab – similarly to accessing Colors and Typography – you can locate images from your Media Library directly in the Sketch plugin. Search for specific images from the library or scroll through the list to find what suits your designs.
The plugin will randomly load 100 assets from your Media Library; if you’re looking for a specific image, you can use the ‘Search’ bar to look for it.
When you’ve found the desired image, simply click on it to be inserted on the canvas.
While you have the option to drag and drop an image from the plugin to your canvas, the resolution will be at the smallest size necessary to render it on screen. With resizing, this will remain the same. To ensure the highest quality possible, it’s recommended you click on the image, then apply it to a shape for the full image resolution.
13. Obtain official brand logos
The Frontify plugin is also equipped with your official logos from the Style Guide. With all logos in view within the plugin, scroll through them to easily select the preferred one. Click on a logo once to add it to your active design. You can also search for logos using the ‘Search’ bar.
15. Make use of your Icons
As you can with all of the other brand assets available with the plugin you can access the icons from your library. Search or scroll through them and add to your designs by clicking directly on them, or drag and drop the selected icon to the desired placement within your creative.
The main icon file type in Frontify is SVG; that's how they will appear in the plugin for Sketch, making them easily adaptable. This means there won’t be any loss of quality when the icon is dragged into your design file.
16. Know if someone is working on the same file
To prevent sync conflicts right from the beginning, Frontify will trigger a notification to let you know if someone is working at the same Sketch source file.
What do you think? Is there anything missing or something else we can help you with? Just let us know.