How to Design a Logo in Figma — a Beginner's Step‑by‑Step Guide

Figma is free, runs in the browser and still has everything a proper logo needs: vector curves, boolean operations, typography and export to any format. Here is the whole journey step by step — from an empty file to an SVG + PNG kit ready for use.

Why Figma works for logos

A logo must be vector — otherwise it blurs when scaled (why raster works that way: vector vs raster). Figma is a vector editor, so the requirement is met automatically. Compared to Illustrator it has fewer specialized illustration tools, but for 90% of logos — geometric marks and type compositions — the toolset is more than enough, and the learning curve is incomparably gentler.

Step 1File setup

1. Create a new design file.
2. Make three frames (F): 512×512 — working, 48×48 and 16×16 — control. The small frames are where you check whether the mark survives at icon and favicon sizes.
3. Enable a Layout Grid on the working frame — an 8-pixel grid, say: snapping disciplines composition.

Step 2The mark: shapes, not drawing

The main secret of clean logos: they are not drawn freehand but assembled from simple shapes — circles, rectangles, arcs. Look at the marks in our catalog: the Telegram paper plane is triangles; the Sber chevron is a circle segment.

The working tools:

• Shapes (O — ellipse, R — rectangle) — the base of any composition.
• Boolean operations (top panel: Union, Subtract, Intersect, Exclude) — subtract one circle from another and you get a crescent; intersect shapes and you get lenses and segments. This is the core tool of logo design.
• Corner radius — drag the corner handle or set a radius in the right panel.
• Pen (P) — for forms shapes can't produce. Rule: the fewer anchor points, the cleaner the curve.

Step 3The wordmark

1. Text tool (T), type the name. On choosing a typeface — with all the licensing traps — see choosing a logo font: commercial use requires an open or purchased license.
2. Adjust tracking (letter spacing): logos almost always benefit from slightly more or less tracking than default — compare variants.
3. Outline the text before final export: right‑click → Outline Stroke / Flatten (⌘E). Otherwise the SVG opens without your font on any machine where it isn't installed. Keep a copy with live text for future edits!

Step 4Color

Assign colors and save them as Color Styles — this fixes the exact HEX codes for your future visual identity. Guidance: color psychology in logo design and brand colors of famous companies. Make three versions of the mark right away: color, black and white (check the white one on a dark frame) — you'll need monochrome more often than you think.

Step 5Size testing

Copy the mark into the 48×48 and 16×16 control frames (vector scales losslessly):

• At 48 px the mark must read instantly.
• At 16 px it must remain a recognizable silhouette: fine details will merge, which is fine if the shape holds. If not — simplify: big brands keep separate simplified marks for small sizes — we cover why everyone simplifies separately.

Also view the mark in grayscale (a plugin or a temporary fill) — the composition must work without color's help.

Step 6Export

In the Export panel add formats:

• SVG — the main deliverable: the scalable master for the web and for handing to designers — we explain why SVG separately. Before export make sure text is outlined, hidden layers deleted, the mark grouped.
• PNG — export at 1x, 2x and 4x with transparent background for platforms that reject vector; we cover which sizes you need for each platform separately.

Run the exported SVG through an optimizer — Figma is generous with redundant attributes; how to optimize SVG is a separate guide.

Common beginner mistakes

1. Strokes instead of fills. A stroke‑built mark behaves unpredictably on export and scaling. Flatten the final version (⌘E), turning strokes into fills.
2. Too much detail. The 16×16 frame trims excess better than any mentor.
3. Non‑outlined text. An SVG with live type breaks on someone else's computer.
4. One file instead of a kit. The output should be several versions: full, compact, monochrome — the kit contents are listed in our piece on types of logos.
5. Copying references verbatim. Being inspired by the catalog is fine and encouraged; replicating someone's mark is not.

What's next

With the logo done: test it on real media (avatar, site header, app icon), assemble a mini guideline with color codes, and consider trademark registration if the brand is commercial. If drawing from scratch isn't your thing, there's the AI generation route with a Figma polish afterwards, and a survey of all DIY paths in how to make a logo yourself.