Vectorization Fundamentals
If you're redesigning a raster logo or importing a sketch, start with vectorization. Figma's Image Trace (Image > Trace) converts raster to vector paths, but quality depends on the source. For hand-drawn logos
- Prepare the raster: High contrast, remove background noise, and ensure clean edges before tracing.
- Adjust trace settings: Experiment with Threshold (controls detail) and Tolerance (smooths paths). Higher tolerance = simpler paths, smaller file size.
- Review and refine: Trace produces rough output. Manually simplify paths with the Pen tool, remove redundant nodes, and ensure consistent stroke weights.
- Test at small sizes: Export at 16px to verify the logo remains legible as a favicon.
Creating Logo Variants
Every logo system needs at least these variants
- Horizontal (lockup): Logo + wordmark side-by-side. Standard use case.
- Stacked (vertical): Logo above wordmark. Used in narrow layouts (mobile, sidebars).
- Icon only: Logo without wordmark. For favicons, app icons, social media avatars.
- Monochrome (black): Single-color version. For embroidery, etching, minimal contexts.
- Monochrome (white): Inverted for dark backgrounds. Required for print, merchandise.
- Outline: Stroke-only version for cut vinyl or laser applications.
Build each variant as a component in Figma with consistent naming: `logo-horizontal`, `logo-stacked`, `logo-icon`, `logo-mono-black`, `logo-mono-white`, `logo-outline`.
Stroke Consistency and Pixel Alignment
For logos with strokes, consistency is critical
- Stroke weight: Choose one (commonly 2px for web, 1.5pt for print). Apply uniformly across all elements.
- Stroke alignment: Set to Center for predictable scaling. Inner/Outer alignment can cause misalignment at small sizes.
- Pixel alignment: Enable Pixel Snapping in Figma export settings. Prevents anti-aliasing artifacts.
- Corner radius: Use consistent corner styles (rounded vs sharp) to reinforce brand identity.
Export Specifications
Create an export manifest for your brand guidelines
SVG (Web): Horizontal, stacked, icon at 1x. Outline text if wordmark includes type.
PNG (App/Social): Icon variant at @1x, @2x, @3x (16px, 32px, 48px; 128px, 256px, 512px for social).
PDF (Print): All variants at 300 DPI. Include full-color, monochrome, and knockout (white-on-dark) versions.
Minimum size: Test all variants at 16px. If icon breaks legibility, redesign or document size restrictions.
Brand Guideline Asset Prep
When exporting for guidelines, include
- Clear space: Minimum padding around the logo. Mark as a dotted box in Figma, export with guides.
- Size restrictions: Minimum width in pixels (e.g., "never smaller than 80px on web").
- Color specs: Export the primary brand color as hex, RGB, and Pantone (if print).
- Incorrect usage: Create a variant showing common mistakes (stretched, rotated, modified colors). This prevents future misuse.
- File organization: Export to folders by type: `horizontal/`, `stacked/`, `icon/`, `monochrome/`, `print/`.
Testing and Delivery
Before finalizing
- Scale test: Export at 16px, 32px, 64px, 256px. Verify legibility at all sizes.
- Format test: SVG in browsers (Chrome, Safari, Firefox), PNG in all applications.
- Color accuracy: Print a proof. RGB-to-CMYK conversion can shift colors significantly.
- File naming: Use consistent, version-controlled names (`logo-v2-horizontal-color.svg`, not `logo_final_FINAL_2.svg`).
Deliver as a Figma project with shared library access for teams. Export all variants into a zip file with a README documenting sizes, color values, and usage restrictions.