Frontify positions itself as the all-in-one brand management software that increases brand consistency through centralized platform collaboration. There is a lot of really cool things that Frontify can do. Here’s some of the main categories:
Since there’s so much to cover in this product review we will only focus on the style guide. Check back in the future as we review some of the other amazing features.
Brand Management or Design System Software?
Don’t get too caught up on the brand management phrase. This is absolutely one of the best pieces of software out there to build out your style guide for your design system. Being able to manage your brand and manage your design system in the same place is where I feel Frontify is killing competitors.
After this review make sure to check out our InVision Design System Manager (DSM) review for a comparison.
When you build out a style guide you want it to look and feel like something that was custom developed for your company. When someone either internal or external sees your style guide, they recognize your brand instantly. Frontify allows you to customize your login page, colors, fonts, button styles, and more. Here’s an example of a cover page for the PetSmart brand.
It’s easy to quickly define all the basic customization settings to get the overall look of your style guide to match your brand.
Access and Targets
You have several different options when it comes to users accessing the style guide. You can choose to make the style guide fully public, or you can have users sign in to access the content. When users go to sign in you can also enable SSO, and then allow external users to also get access by being able to set them up with an account. You can even set account expiration dates if you have contractors that need access who aren’t tied in with your company’s SSO.
A target is a specific group that you have defined. You may define a target as “Europe” where you show content specific to that region. A good example is if you use different photo styles for different regions. Here’s an example of selecting what targets can view a specific piece of content.
To keep things organized and easy to navigate you have several different options. Along the top is where you can create documents and libraries. Think of these as major navigational items. Along the left you have categories and pages. Categories are just for labeling purposes to help categorize your pages. Pages are unique pages that have content living on them. In the example below you can see that the Buttons page in the navigation drawer also has another tier of items which is Usage and Anatomy. Those are sections which get generated by simply adding a new H1 content item on the page.
Between documents & libraries, categories, pages, and sections you have almost any scenario covered that you can think of to organize your content.
When it comes to style guide content for your design system it is tough to find software that would have everything you need. Frontify is the closest you’ll come without developing your own custom solution. Going into detail about each content item you could choose from is a lot, but here’s an image to show just a few options you have.
You can add in audio, video, an icon font, annotations, code snippets, fonts, type styles, and so much more. Design systems are evolving, and they include all kinds of different content. Most style guides can’t easily show examples for motion design, audio snippets for voice UX (VUX), or event simple do and don’t scenarios. There’s a lot of cool things to play around with here.
To put content in perspective when comparing it to competitors such as InVision here’s what DSM offers for content:
Treating your design system like a product is important to ensure it succeeds. Part of that means tracking the overall usage. Frontify has built in analytics to tell you how each page is performing. You can track both page views and downloads. Here’s what the built-in analytics looks like.
Need more when it comes to analytics? Frontify has an integration with Segment that allows you to send the data straight to your Google Analytics account. I’ve used this feature in the past and it really allowed us to explore how our style guide was being used versus how we thought it would be used.
If you’re a Sketch user, then you can also take advantage of the Sketch Frontify plugin. You can select which style guide you want to pull from, and it will load in all of the colors and fonts that were defined in your style guide. You can also export screens from Sketch into a Frontify project. We didn’t cover projects as part of this review, but that’s a whole different side of Frontify that will let you comment, prototype, manage, and do a whole lot more with putting things through workflows.
There’s one major downside to the Sketch plugin. You cannot sync anything straight into your style guide. If you’re familiar with InVision’s Craft plugin, then you probably know about being able to create a component library that you can share with other designers, and now with DSM you can have those components upload straight to your style guide.
In my use case I also want to upload demo content straight from Sketch and have it upload and update my live pages. An example is that I show how to use buttons in different scenarios on my buttons page. Right now, I have to export the image from Sketch, go to the page in Frontify, and manually replace the image each time. If I update the color of a button that is used in examples all across different parts of the style guide, then this becomes a major task.
Frontify is something that is definitely worth checking out. They have several price tiers that allow everyone to take advantage of it. They don’t quite hit the 5-star mark, but they’re pretty close and once they allow things such as syncing components and screens, then they’ll probably be there.