The end result? A simple text logo and mark that will set the tone for your brand.
4 simple steps separate you from a gorgeous brand identity:
Choose a color palette
Choose a Google Font
Choose an icon (your logo mark)
Combine it all together in Figma
I'll be designing a logo for an app called BugTracker - a tool that helps companies report, keep track of, and squash bugs in their products.
Let's get started!
1. Choose a color palette
A color palette is a set of colors used across your website - and thus your logo.
When it comes to choosing a color palette, I prefer to rely on the wisdom of the crowd. ColorHunt is a website where users submit their own color palettes and vote on their favorites. A great starting point is the "popular" section (click on the dropdown menu at the top of the page).
My process usually involves browsing around, "liking" a few of my favorites, and then choosing a winner. For this tutorial, I'll use this palette:
Note the hex colors (ex. #F9F7F7) that appear when you hover over a color - you'll need those later.
You don't have to use all the colors from your chosen palette - maybe you'll only use one! But it's good to have these defined ahead of time so you're not choosing a different shade of blue on every page of your site.
2. Choose a Google Font
Unless you're writing a 4th grade book report, you probably shouldn't use Comic Sans or Times New Roman. But you might not know where to look for one that does work.
Google Fonts logos are the way to go - Google offers hundreds of fonts available for you to use, completely free. Start by typing your company name as it will appear in your logo at the top of the page - you'll see what your logo would look like in each font.
Maybe you'll spot something you like as you scroll down the page. If not, I'll start by recommending some of my favorites (in no particular order):
Pathway Gothic One
Alfa Slab One
Source Sans Pro
3. Choose an icon
Facebook has the blue and white "F", Instagram has the camera, and Twitter has the blue bird. We don't have the time (and let's face it, the design chops...) to design our own mark. But there are some great ones available online for free that we can customize.
Let's start for "bug" on Flaticon. I'm not made of money, so I'll apply the "free" filter:
This one's caught my eye! Click the green "SVG" button to download your icon as an SVG file. Because it's an SVG, we'll be able to easily modify it in the next step in Figma.
You'll notice that Flaticon gives you a line of code to put on your site to attribute the source on Flaticon:
Icons made by <a href="http://www.freepik.com/" title="Freepik">Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com </a>
Click the "+" button in the top right to create a new file:
In your new file, start by creating a new frame:
A figma frame is like a smaller workspace within the larger canvas. Frames help you organize your work. Make it about 2000px by 2000px to start.
Pro tip: with the frame selected, you can easily change its height and width in the top of the right toolbar:
4b) Add Logo Text
Click the "T" text icon in the upper left.
Click in your frame and drag to create a text box.
Before clicking away, type your company name into the text box.
The font probably looks microscopic with the size of the frame. To fix this, highlight your text and change the font size to around 80 or 100.
At this point, our logo looks like this:
Now change the font to the Google Font you chose in step 2. Highlight the text and change your font using the Text section in the right toolbar:
Figma is pre-loaded with a large collection of Google Fonts. But if you don't see yours, you can follow these instructions to import it.
Next, change the font color to match the palette you chose in step 1. I picked this blue color: #3F72AF. Highlight the text, click on the black square underneath Fill in the right toolbar, and type the color code in the text input:
4c) Add Logo Mark
Click on the square icon in the upper left, and then Place Image:
Select your SVG file and click on the frame to paste it there.
To resize your image, first select it by clicking on it. Then, while holding down shift, click one of the corners of the image and move your mouse to resize the image proportionally.
Then move the image to approximately where you want it relative to your text. It should look something like this:
Much better! I love a red ladybug as much as the next guy, but I'd rather create a new bug species that more closely matches our branding. Here's where that SVG comes in handy...
You can see that your SVG mark is actually made up of a bunch of layers:
When one of these layers is selected, you'll see the corresponding section of the SVG highlighted in the frame.
I want to change the fill color for the red sections to match the blue I use in my font. In my case, the red shell was made up 3 different red vectors. I found them by clicking around, then changed their colors just like I did with my logo text.
It's starting to look like a logo!
4d) Extra Credit: Let's get fancy
At this point, you might be happy with what you have. And that's fine - it looks great! But before the paint dries, let's explore a couple ways to spice it up a bit:
A stroke is like an outline for your text. You can set the color, transparency, thickness, and a few more advanced options.
Add a shadow or a blur. Here's what mine looks like with a basic drop shadow:
4e) Export from Figma
Resize your text box so it just barely covers the text. We don't want the text box to be much larger than the text inside it.
Group layers together - While holding down the command key on Mac OS or Ctrl on Windows, click both layers in the left toolbar so that they're both selected. Then right-click on the selected layers and click Group Selection.
Rename the group - it'll default to Group 1. To change it, select the layer --> right-click --> Rename.
Export - With the group selected, click Export in the bottom of the right taskbar. Leave the default image quality (1x), and choose your preferred file type. Then click the Export Logo button (I named my group "Logo").
Voilà - you're officially a professional logo designer!
OK, not quite... but you can put your website or app out into the world with a polished brand you can feel proud of.
Build beautiful products, faster than ever
Be the first to know when we release new App Templates, Building Blocks, and MVPs.
Thank you! Click the link in your inbox to confirm your subscription.
Oops! Something went wrong. Email us at firstname.lastname@example.org if this keeps happening.