Why you should design your brand guide in Figma.
As a traditional graphic designer, I have always seen brand guides built in InDesign and shared in a PDF form. You make a change, update it in your company’s file management system, and hope that no one has the old one saved on their machine. There are so many ways an outdated brand guide can get passed around and used when it’s a static document.
Granted, you probably don’t need to be making changes weekly, but working at a start-up can mean lots of change in the course of a few years. Phaidra is evolving and growing and needed a system for our internal teams to have the most up-to-date brand guide when moving quickly. I think any team would want the latest and greatest guide regardless of company growth.
This was not an original idea of mine, but one that I adapted from REI. They created a digital Brand Hub as a shared Figma Prototype. This was such a new concept to me when I saw it and it inspired me to make one for Phaidra. It housed the basics needed for internal teams, while also having a baseline for the REI Story and Visual strategy.
Having our Brand guidelines in an interactive format with visuals and links to resources was a better solution than having multiple notion pages and Figma files that needed to be updated. Having the guide in one consistent place was a Game changer. Yes, I could have linked a PDF in notion, but that means I have to remember to update that page each time there is a change. Also having the ability to scroll and click on sections makes for a much better user experience when people are looking for information. I don’t want to scroll for 100 years to get to the page that’s relevant to me. Side note: This was also a great way for me to improve my prototyping skills.
Let’s face it, there are also some pretty major UX flaws with InDesign when trying to create brand guides. Maybe I didn’t do my due diligence with all the shortcuts and tricks, but after using Figma for a few years there are a few things that really bug me in terms of consistency and ease of use.
Where is section spacing?
When I am designing a 1-sheeter, no biggie. But when I am putting together multiple sections of content I want to have consistent white space between the elements. This is not just applied to type styles. (that’s a whole other can of words) I want the ability to build it quickly and change it on the fly. Using grids could work, but that’s still a manual change or update down the road.
Auto Layout is Helvetica of the 2020s.
Maybe I want to move a section below something for more relevancy, that would be a lot of hassle in a long InDesign document if the pages are not separated by section. I might also forget to select something if it wasn’t grouped. I’d CTRL-Z myself out of there. If I have an auto-layout page it’s a breeze to update and I’m not missing elements because they are framed neatly in one place.
Color is a pain to change all at once.
Color styles certainly exist in InDesign, but what if you want to look for any colors that are lingering and not in your brand guide? Maybe you put a neutral background shape behind some brand elements but forget to change the color to YOUR neutral color. It isn’t the end of the world, but Figma makes it so easy to select an entire frame and see exactly where your color errors are, and even easier to fix them with your styles in a click or two. Even with a pretty organized Library of colors in InDesign, I still find myself wishing this feature was implemented when designing print documents.
It really will depend on the type of design system and assets you have set up for your brand, but if you are product-focused, you likely have a lot of components already living in Figma. If you don’t have elements in Figma set up such as color, logo, type, and supporting visuals you can always make a small library that you can pull from just for this use case.
I remember when Sketch introduced the function of components that would change across your whole file. It blew my mind. Of course, we had linked files for Adobe, but it wasn’t the same. The same idea for components made so much sense for a brand guide. Not only could I link all the logos, colors, icons, etc. from our design system library and have them update instantly to a file that was live, but I could also link headers and sections that could have swappable content. I would still need to update the brand guide manually for copy changes or rules, but for the most part, everything would be synced. I could also add new pages with no changes to where it was saved or who had access to my update.
We live in a digital age so It makes sense to start moving documentation and brand guides into formats that are less static and easy to be changed without interruption. I guess the only downside is if you don’t have internet access and reaaaally need to get that hex code there may be some delay. But otherwise, I hope this helped open up the possibilities of living documents for all kinds of use cases, particularly brand guidelines. Happy Figma-ing.
* This is of course my own opinion. I’d love to hear if it works for you.
