logo
Back

How to Convert Text from Figma, Sketch & Photoshop into SVG

2025-11-19
Text To Svg

When you hand off a design or ship it to production, live text can turn into a problem:

  • Missing fonts on the developer’s machine
  • Unexpected font substitutions
  • Licensing concerns about bundling fonts
  • Fabrication workflows (laser/CNC) that only accept pure paths

That’s why designers so often “convert to outlines.” But doing this inside Figma, Sketch, or Photoshop can be destructive (you lose editability) and exporting whole files to random online converters can be risky for privacy.

1. Why convert text to SVG paths at all?

Before we get into the “how,” let’s clarify the “why.”

1.1 Common reasons to outline text

  • Design handoff: Developers receive an SVG logo or UI asset that must look exactly like your design, regardless of fonts installed.
  • Brand consistency: Logotypes and wordmarks must remain pixel-perfect across platforms and devices.
  • Web performance: Sometimes you want a tiny inline SVG icon/label instead of loading an entire webfont.
  • Fabrication & making: Laser cutters, vinyl cutters, and CNC machines expect pure vector geometry (no live text).

1.2 Risks of the naive approach

Typical “quick fixes” often introduce new problems:

  • Rasterizing text Looks crisp at one resolution, but blurs on scaling/retina, and can’t be edited.

  • Outlining in the design file directly Figma/Sketch/PS can convert a text layer into vector shapes — but once you do this, that text is no longer editable. If the copy or language changes, you’re recreating it from scratch.

  • Uploading full design files to a random online converter This is the big one:

    • Your designs may contain unreleased features, client work under NDA, or personal info.
    • Some services store files on the server or log input data.
    • You have no idea who can access that content later.

For professional workflows, you want paths, but you also want to protect both your design system and your data.

2. What “safe” means in this context

When we talk about safely converting text to SVG paths, there are a few dimensions:

  1. Privacy & security

    • Your text (and any sensitive or unreleased content) should not leave your machine.
    • No uploads, no remote processing, no server-side storage.

  2. Visual fidelity

    • Kerning, ligatures, and letter spacing need to match your original design.
    • Curves should be clean, with enough Bezier precision to avoid jagged edges.

  3. Licensing

    • You don’t want to accidentally redistribute or embed fonts in ways that break licenses.
    • Many workflows prefer “rendered text as paths” over embedding full font files.

  4. Compatibility

    • The SVG should import cleanly into tools like Figma, Sketch, Illustrator, Affinity, or CAD software.
    • For fabrication, DXF or similar path-only formats are often needed.

TextToSVG.app is designed with these constraints in mind: it runs entirely in the browser, never uploads your text or fonts, and outputs clean SVG and DXF paths that import well in modern design tools.

3. Meet TextToSVG.app: a private text-to-path generator

TextToSVG.app is a free online tool that converts text into SVG vector paths (and DXF), with live preview and typography controls.

Key points that matter for safety and workflow:

  • 100% in-browser The site explicitly states that everything runs locally in your browser: no uploads, no storage, no tracking. Your text never leaves your device.

  • Google Fonts built-in You can browse and apply thousands of Google Fonts families and variants directly, without manual installation.

  • Typography controls

    • Size, tracking (letter spacing)
    • Kerning and standard ligatures
    • Separate characters or keep them as one combined shape
    • Bezier accuracy for smoother curves
    • Fill rule, fill color, stroke color, stroke width, non-scaling stroke

  • Production-ready output The SVG and DXF are optimized and import well into Figma, Sketch, Illustrator, Affinity, and CAD/fabrication tools.

This combination makes it ideal as a “bridge” between your design tool and a clean, shareable SVG path.

4. Safe workflow from Figma to SVG path

Let’s walk through a Figma-oriented workflow. The same logic applies to Sketch and Photoshop, and we’ll cover them right after.

4.1 Step 1 — Inspect your text in Figma

  1. Select the text layer.

  2. Note:

    • Font family (e.g., “Inter”, “Roboto”, “Montserrat”)
    • Font weight (e.g., Regular, Medium, Bold)
    • Letter spacing & line height (if you want to closely match them)

  3. Confirm that the font exists in Google Fonts (most popular UI fonts do). If your font is proprietary, consider:

    • Using a similar Google font for the SVG version, or
    • Generating the SVG inside your licensed environment (e.g., Illustrator) and then cleaning it.

4.2 Step 2 — Rebuild the text in TextToSVG.app

Open TextToSVG.app in your browser.

  1. Enter the text Paste the exact text from your Figma layer into the “Text” field.

  2. Choose the font family & variant

    • Select the Google Font that matches your Figma font.
    • Pick the appropriate variant (Regular, Medium, Bold, etc.).

  3. Adjust typography options

    • Size: set a convenient value; you can scale later in Figma.
    • Tracking: match your Figma letter spacing.
    • Kerning: turn this on if your original design relies on proper kerning.
    • Standard ligatures: enable if your text uses ligatures (fi, fl, etc.) and you want them preserved.

  4. Fine-tune the vector quality

    • Bezier accuracy: increase if you want smoother curves, decrease if you want fewer nodes.

    • Separate characters:

      • On if you want each character as its own path (useful for animation or micro-adjustments).
      • Off if you want a single combined path (simpler SVG).

  5. Set your SVG options

    • Units:

      • px for web/UI work.
      • mm or in if your output will go to fabrication.

    • Fill rule: nonzero is usually fine; only switch if you know you need evenodd.

    • Fill & stroke:

      • For typical text, use a solid fill and no stroke.
      • For outlined text, use stroke and optionally disable fill.

    • Non-scaling stroke: useful if you’re building icons or UI elements where stroke width should stay constant when scaling.

You’ll see a real-time preview as you tweak these options.

4.3 Step 3 — Export and bring it back into Figma

Once you’re happy with the preview:

  1. Copy the SVG code with “Copy to clipboard” or download the .svg file.

  2. In Figma, you have two common options:

    • Paste SVG directly:

      • Copy in TextToSVG → in Figma, simply paste (Cmd+V / Ctrl+V).
      • Figma will create a vector object from the SVG markup.

    • Import the .svg file:

      • Drag the .svg from your file explorer into your Figma canvas, or
      • Use File → Place image… and select the SVG (Figma will treat it as a vector asset, not a raster).

Now you have a pure vector path that:

  • Renders exactly as in the preview
  • Does not require the font to be installed
  • Can be handed off safely without font or privacy issues

You can keep your original Figma text layer as a hidden backup if you need to edit copy later.

5. Adapting the workflow for Sketch and Photoshop

The same TextToSVG workflow works well for other tools too.

5.1 Sketch

  1. In Sketch, select your text layer and note the font, weight, and spacing.

  2. Recreate the text and typography in TextToSVG.app as described above.

  3. Export the SVG:

    • Copy code → paste into a text editor and save as .svg, or
    • Download the file from the site.

  4. Bring it into Sketch:

    • Drag & drop the .svg onto your canvas, or
    • Use Insert → Image and select the SVG, which Sketch will treat as vector shapes.

You can now adjust color, apply masks, or use it as part of symbols/components.

5.2 Photoshop (PS)

Photoshop’s SVG handling is a bit different, but still straightforward:

  1. Generate the SVG paths in TextToSVG.app.

  2. Download the .svg file.

  3. In Photoshop:

    • Use File → Place Embedded… (or Place Linked) and select the SVG.
    • Photoshop will insert it as a vector smart object. You can scale it freely without loss.

  4. If you need raw paths:

    • Open the SVG in Illustrator or another vector editor.
    • Copy the paths, then paste into Photoshop as Shape Layer.

Either way, you avoid relying on missing fonts and keep the artwork resolution-independent.

6. Best practices for clean & future-proof SVG paths

No matter which design tool you use, a few best practices will make your SVGs easier to maintain:

6.1 Keep text editable somewhere

  • Don’t destroy your live text.
  • Keep a “master” Figma/Sketch/PS file where the text layer remains editable, and use TextToSVG-generated paths only in exported assets or a separate page/artboard.

6.2 Limit complexity when you can

  • Use just the options you need: fill, maybe stroke.
  • Avoid unnecessary effects or filters that inflate the SVG markup.
  • If Bezier accuracy is extremely high, you may get lots of points — consider dialing it back unless you need ultra-precise curves.

6.3 Choose units intentionally

  • px for web/UI and standard SVG use.
  • mm/in when exporting for DXF/laser/CNC, so sizes map predictably to physical dimensions.

6.4 Separate characters strategically

  • Separate characters if:

    • You plan character-level animations (e.g., SVG text reveals).
    • You need to manually tweak one glyph’s position or shape.

  • Keep them combined if:

    • You just need a simple logo wordmark or label with minimal markup.

6.5 Minify for production

For web use:

  • Run your SVG through an optimizer (e.g. SVGO) to remove unnecessary metadata and whitespace.
  • Inline small SVGs in your HTML or bundle them in an icon system.

7. A quick note on font licensing

TextToSVG.app gives you control over the rendered paths, but the font itself remains subject to its own license.

  • Most Google Fonts use the SIL Open Font License (OFL), which usually allows commercial use of rendered text, including in SVG paths.

  • However, this is not legal advice. Always:

    • Check the specific font’s license.
    • Make sure your use case (logo, product UI, fabrication, etc.) complies with that license.

The advantage of converting to paths is that you’re typically shipping graphics, not redistributing full font files — which often simplifies compliance.

8. Summary: a safer pipeline for text to SVG paths

To recap:

  1. Identify the font and styling in Figma/Sketch/Photoshop.

  2. Rebuild the text in TextToSVG.app using the matching Google Font and typography controls.

  3. Tune vector quality and styling (kerning, ligatures, Bezier accuracy, fill/stroke, units).

  4. Export clean SVG (or DXF) and import it back into your design tool as a vector object.

  5. Hand off or ship that SVG, knowing:

    • It doesn’t depend on local fonts.
    • Your original designs were never uploaded to any server.
    • The output is production-ready for web, print, or fabrication.

This approach gives you the best of both worlds: editability and safety during design, crisp and self-contained paths for delivery.

If you’re regularly handing off logos, UI icons, or fabrication-ready labels, adding TextToSVG.app to your workflow is an easy win for both privacy and quality.

Back