How to Design a Logo in Figma: Step-by-Step Guide

Step 1: Set Up Your Figma File

Open Figma in your browser at figma.com or in the desktop app and create a new design file. Before drawing anything, set up frames that will organize your logo variations. Press F (or use the Frame tool in the toolbar) and draw a frame on the canvas. In the right panel, set the frame dimensions to 1000 by 1000 pixels. Name this frame "Primary Logo" by double-clicking its name in the left layers panel.

Create additional frames for each logo variation you plan to create: a horizontal version (set to 2000 by 600), an icon-only version (500 by 500), and a monochrome test version (1000 by 1000). Having these frames from the start forces you to consider how the logo adapts to different contexts as you design, rather than treating adaptability as an afterthought.

Set up your color styles before you start designing. Click the canvas (not any frame), then in the right panel under "Local Styles," create color styles for your brand colors. Name them descriptively: "Brand Primary," "Brand Secondary," "Brand Dark," "Brand Light." Defining styles rather than applying raw color values means you can change a brand color once and have it update everywhere in the file instantly.

Enable Layout Grid on your primary frame (select the frame, click "+" next to Layout Grid in the right panel). A 10-pixel grid helps you align elements consistently. You can toggle grid visibility with Ctrl/Cmd+Shift+4 while working.

Step 2: Build Your Logo Mark with Shapes and Booleans

Most logo marks are constructed from simple geometric shapes combined through boolean operations, not drawn freehand. Figma's shape tools (shortcut: R for rectangle, O for ellipse, Shift+L for line) let you place precise shapes that form the building blocks of your design.

Start by placing the basic geometric shapes that form your concept. Use the right panel to set exact dimensions rather than dragging to approximate sizes. For example, if your logo concept involves overlapping circles, create each circle with exact dimensions (say, 200 by 200 for the large circle and 120 by 120 for the small circle) and use the alignment tools to position them precisely relative to each other.

Once your shapes are positioned correctly, select the shapes you want to combine and use Figma's boolean operations from the top toolbar. The four operations are Union (merges shapes into one), Subtract (removes the top shape from the bottom shape), Intersect (keeps only the overlapping area), and Exclude (removes the overlap, keeps everything else). Boolean operations in Figma are non-destructive by default, which means you can double-click the resulting boolean group and still move or resize the original shapes inside it. This is a significant advantage over Illustrator, where pathfinder operations are destructive unless you hold Alt/Option.

Build up your logo mark by layering boolean operations. A common workflow is to start with Union to merge your main shapes, then use Subtract to cut out interior details, then Union again to merge the result with additional elements. Each boolean operation creates a boolean group in the layers panel that you can expand and edit non-destructively until you flatten it.

When your mark looks correct, right-click the boolean group and select "Flatten" to convert it to a single path. Only flatten when you are confident in the shape, because flattening is not undoable (you would need to use Ctrl/Cmd+Z to undo it). The flattened path is cleaner, more efficient, and easier to export.

Step 3: Refine with the Pen Tool and Vector Editing

After constructing the basic mark with shapes and booleans, you will often need to refine individual curves and points. Double-click any shape or flattened path to enter vector editing mode. In this mode, you can see and manipulate individual anchor points and bezier handles.

Figma's pen tool (shortcut: P) works similarly to pen tools in other vector editors. Click to place straight-line anchor points. Click and drag to place curved anchor points with bezier handles. The handles control the direction and intensity of the curve entering and leaving each point. To add a point to an existing path, hover over the path until you see a "+" cursor and click. To delete a point, select it and press Delete/Backspace.

Use the Bend tool (visible when hovering over a straight segment between two points) to convert straight segments to curves without manually placing bezier handles. This is faster than switching to the pen tool for simple curve adjustments.

Pay attention to point count. A clean logo mark uses as few anchor points as possible. Each unnecessary point adds a potential wobble or inconsistency to the curve. After refining, zoom in to 400% or more and examine each curve segment for smoothness. If a curve looks slightly uneven, check whether moving or deleting an anchor point improves it.

Press Escape or click outside the shape to exit vector editing mode and see the final result at normal scale.

Step 4: Add Typography for Your Wordmark

Press T to activate the text tool and click on your frame to create a text layer. Type your brand name and select an appropriate typeface from the right panel's font dropdown. Figma provides access to all Google Fonts by default, and you can use local fonts installed on your system through the Figma desktop app or the Figma Font Installer.

Adjust letter spacing (tracking) in the right panel under "Letter Spacing." For logo wordmarks, you almost always need to adjust spacing from the font's default because display sizes reveal spacing inconsistencies that are invisible at body text sizes. Increase letter spacing slightly for all-caps wordmarks, and decrease it for tight, modern wordmark styles. The goal is visually even spacing, which is not the same as mathematically even spacing because different letter shapes create different amounts of visual space between them.

For individual letter kerning adjustments, place your text cursor between two letters and hold Alt/Option while pressing the left or right arrow keys. This adjusts the spacing between that specific letter pair without affecting the rest of the word. Common pairs that need manual kerning include "AV," "WA," "To," and "LT."

If you need to modify individual letterforms (rounding a corner, extending a stroke, connecting letters), select the text layer and use Type > Flatten in the menu (or right-click and select "Flatten"). This converts the text to vector paths that you can edit point by point. Be aware that flattening is permanent for that layer, so duplicate the text layer first and hide the copy as a backup.

Position the wordmark relative to your logo mark using Figma's alignment tools (select both elements and use the alignment options in the top bar). Maintain consistent spacing between the mark and wordmark, and test the alignment at multiple sizes to ensure it holds.

Step 5: Apply Color and Test Variations

Select your logo elements and apply the color styles you created in Step 1. Click the fill color in the right panel, then click the "Style" icon (four dots) and select the appropriate brand color style. Using styles instead of raw color values keeps everything connected, so a brand color change propagates everywhere.

Create essential logo variations by duplicating your primary logo into the other frames you set up. In the monochrome frame, change all fills to solid black (#000000) and verify the logo reads clearly without color. Try reversing it: set the frame background to black and change the logo to white (#FFFFFF). If any detail disappears or becomes confusing in monochrome or reversed, the logo design needs structural adjustment. Color should enhance a logo, not be required for it to work.

Test the logo at small sizes by duplicating the frame and scaling it down to 32 by 32 pixels (favicon size), 48 by 48 (app icon size), and 100 by 100 (social media thumbnail). At these sizes, fine details disappear and thin strokes may vanish. If the logo is not recognizable at small sizes, consider simplifying the icon variant by removing details, thickening strokes, or using a simplified version of the mark.

Check contrast ratios if your logo will appear on colored backgrounds. Figma plugins like "Contrast" or "A11y - Color Contrast Checker" can verify that your logo colors meet accessibility standards against common background colors.

Step 6: Export Production-Ready Files

Select the frame containing your primary logo. In the right panel under "Export," click "+" to add an export setting. Set the format to SVG for web use. SVG preserves the vector quality of your logo and scales perfectly at any size in web browsers. Click "Export [frame name]" to save the file.

Add additional export settings for PNG at multiple sizes. Click "+" again, set format to PNG, and set the suffix to "@1x" at 1x scale. Add another at 2x (produces a file at double the frame dimensions), and another at 4x for high-resolution use. This gives you PNG files at 1000, 2000, and 4000 pixels wide from your 1000-pixel frame.

For all export settings at once, use File > Export Frames from the menu. This batch exports every frame in your file with its configured export settings, which efficiently produces all logo variations and sizes in a single operation.

Important limitation: Figma does not export EPS files or print-ready CMYK PDFs. If your logo needs these formats (and most professional logos do), export SVG from Figma and open it in Adobe Illustrator or Affinity Designer to create the print-specific deliverables. The SVG will maintain all vector paths and can be color-converted to CMYK and exported to EPS or PDF without redrawing anything.

For team handoff, share the Figma file directly with stakeholders using the "Share" button. They can view, comment, and inspect the logo without installing any software, which makes Figma uniquely convenient for client review and approval.