Designing with your brand in Figma

Designing with the real brand. Finally.

How to pull your brand straight into Figma, and stop the small frustrations that quietly eat your day.

You know that moment. You open a new Figma file for a client. You need their brand colors. You open the PDF brand guide. You copy the first hex code. You paste it into Figma. You go back to the PDF. You copy the next one. You paste. You go back. The third one is hard to read because the screenshot is blurry. You squint, type it manually, and hope you got it right.

Then comes the typography. Which weight was it again? Was that the heading font or the body font? You scroll through the PDF, find the right page, and try to remember the name correctly enough to type it into Figma.

And then the logos. You search through old folders. You find the file. It is named logo_FINAL_v3_USE_THIS.png. You hope it actually is the right one. You drag it into Figma. The resolution is wrong. You go look for the SVG. It is somewhere in a different folder, sent six months ago, in an email you can no longer find.

Twenty minutes later, you have set up your file. You have not designed anything yet. You have just prepared.

This is the part of the job nobody talks about. It is small, it is dull, and it happens every single time you start something new.

We made it stop.

The BrandDeck plugin for Figma is officially live in the Figma Community. It pulls your brand straight into your Figma file in a few clicks. Colors land as paint styles and variables. Fonts become text styles. Logos drop in as image nodes. All organised under your brand name and always in sync with what is in BrandDeck.

No more PDFs. No more folder hunting. No more guessing.

Three steps. A few clicks. Done.

Step 1: Open the BrandDeck plugin in Figma

Open Figma and start a new or existing file. In the top menu, go to Resources (or right click anywhere on the canvas) and search for BrandDeck. You can also find it directly on the Figma Community page.

Click Open in and select the Figma file you want to use. The plugin opens inside your file, ready to connect.

Step 2: Add your brand

In the BrandDeck plugin window, click Add brand. Paste the brand guide URL of the BrandDeck brand you want to use, for example https://yourbrand.branddeck.co. Click Connect.

The plugin pulls in everything that is available in your brand guide. You can add multiple brands and switch between them, perfect if you are working on multiple clients.

Step 3: Choose what to import

Once your brand is connected, you see a clear overview of what is available: Colors, Fonts and Logos. Each with a count next to it so you know exactly what is coming in.

Tick the elements you want and click Import. Done. Colors are added as paint styles and variables, fonts as text styles, logos as image nodes. All organised under your brand name in the file.

Watch how it works

We made a short video that walks through the whole process. Less than two minutes, no voice-over, just the plugin doing its thing.

Link

What changes when you work this way

Once your brand is in Figma, day to day design work gets a lot simpler.

Design with the real brand from the start. No more guessing hex codes from a PDF or copying values from a website screenshot. The colors, fonts and logos are right there in your file as native Figma styles.

Set up new client files in minutes. Start a new file, run the plugin, import the brand. The whole foundation of your design is in place before you draw a single rectangle.

Stay in sync with the brand guide. When the brand updates in BrandDeck, you can re-import to pick up the changes. No more outdated logos hiding in old Figma files.

Work cleanly across multiple clients. Each brand sits under its own name in your Figma file, so you can switch between projects without mixing things up.

Good to know

Officially listed on Figma Community. BrandDeck is approved by Figma and lives in the Design tools, Import and export category. You can install it like any other Figma plugin.

Works with any BrandDeck brand. As long as you have the brand guide URL, the plugin can pull it in. Public or private brands both work, as long as the URL is accessible to you.

Re-import any time. Brand updates over time. You can re-run the import to refresh styles, fonts and logos in your file without redoing your design work.

Try it today

The BrandDeck plugin for Figma is free to install and works with every BrandDeck plan. Find it in the Figma Community or follow the steps in your BrandDeck environment.

Setting up a Figma file used to mean twenty minutes of copying, pasting and hoping. Now it takes three clicks. That is twenty minutes you get back. Every project. Every client. Every time.

Small change, big difference.