When utilizing the Figma outline stroke function, it does not generate separate paths for every letter within the

I'm trying to convert a word into SVG and have individual paths for each letter.

However, my SVG file contains only one path for the entire word.

I am using Figma on a Windows desktop.

Here are the steps I have followed:

  1. Create text word
  2. Outline stroke
  3. Remove fill
  4. Export as SVG
<svg width="292" height="122" viewBox="0 0 292 122" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M55.7757 116.258L56.499 117.5H57.936H73.632H78.0449(...)89.1537 20.2398 91.3616 22.4478Z" stroke="#FFFDFD" stroke-width="5"/>
</svg>
csssvgfigma

Answer №1

If your font is displaying issues with curves and Figma cannot resolve it through the outline function, Adobe Illustrator typically provides a better solution.

Here's what you can do in such situations:

  1. Create or edit the design in Adobe Illustrator, then outline the object.
  2. Copy and paste the outlined object into Figma.
  3. Ungroup and create "unions" according to your requirements.

Below is the SVG code where each letter has "separate paths":

<svg width="100%" height="100%" viewBox="0 0 292 122" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M291.22 120.58H268.26V70.94C268.26 64.43 266.74 59.54 263.74 56.39L263.65 56.29C260.73 53.16 256.65 51.61 251.23 51.61C245.81 51.61 241.46 53.22 238.29 56.54C235.2 59.86 233.62 65.05 233.62 71.96V120.59H210.52V4.02002H233.62V36C234.72 35.29 235.87 34.64 237.08 34.05L237.17 34.01C242.38 31.51 248.29 30.23 254.68 30.23C261.43 30.23 267.65 31.74 273.16 34.71C278.81 37.65 283.29 42.18 286.45 48.14C289.61 53.92 291.21 60.97 291.21 69.07V120.58H291.22ZM273.26 115.58H286.22V69.07C286.22 61.82 284....
.
.
.
.
</svg>

Answer №2

When exporting from Figma with an outside stroke, it's important to note that the SVG format only supports center strokes, resulting in paths that are not separate.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for eliminating the border from a Card that has been selected in Bootstrap 5

As I work on creating a website with the Bootstrap 5 framework, I've been experimenting with "Bootstrap Cards". I noticed that when I click on a card, a border appears. To address this, I thought about using the pseudo element :focus to overwrite it. ...

htmlcssfocusbootstrap-5bootstrap-cards

Could someone please provide guidance on customizing the appearance of bs5-lightbox?

Looking for some assistance here from the experts :) Currently, I'm utilizing Bootstrap 5 along with this Lightbox library called To activate it, I'm using data-toggle="lightbox" and it's functioning flawlessly. <a href=&quo ...

cssbootstrap-5bootstrap-lightbox

Tips on creating a clickable div container

Is it possible to add a hyperlink to an entire div element along with its background color and other styles? The goal is for the hyperlink to execute whatever is attached to the id when the selected div is clicked: <div class="className" style= ...

htmlcssasp.net

Printing long contents on Chrome's ion-modal-view is not supported on every page

I have tried various solutions found in articles but have not been successful. Here is an example of one such attempt: @media print { .modal { position: absolute; left: 0; top: 0; margin: 0; padding: 0; visibility: visible; / ...

javascriptcssprintingmodal-dialogionic-v1

How come I am unable to squeeze in 4 columns with cards on a compact screen while utilizing Bootstrap 4?

After several attempts, the 4 columns still refuse to conform to a smaller screen size. The final column ends up being displayed horizontally at the bottom of the cards. @media (max-width: 575px) { .crd-group { flex-wrap: wrap; } .cr ...

htmlcssbootstrap-4

Scrollbars in Jquery are not visible anymore when adjusting the size of a div element, causing them to expand

I'm facing an issue with a layout containing a div that expands to the screen size upon clicking a button. Initially, the div has enough content to necessitate scrolling. However, after collapsing back to its original size, the scroll bar disappears a ...

jqueryhtmlcss

Searchable dropdown -

Can someone please help me with an issue I am facing? When I try to focus and select from the up and down arrow keys, it is not working as expected. Below is a snippet of my code: <!DOCTYPE html> <html lang="en"> <head> < ...

htmljquerycss

What is the method for creating a rectangle with text inside using HTML and CSS?

Hello, I need help with achieving this design using HTML and CSS. Can you assist me, please? https://i.stack.imgur.com/xOHVX.jpg This is what I have attempted so far: Below is my CSS code: .line-lg{ width:120%; text-align: center; border-bot ...

htmlcss

What steps can I take to make this menu more leisurely?

I've been experimenting with creating a horizontal menu using HTML and CSS. <section class="latest-albums-area section-padding-100"> <div class="container"> <div class="row"> ...

htmlcsswebweb-deployment

The issue with the sticky table header functionality is that it is not functioning properly within the Angular Materials mat

Hi there, I'm currently facing some challenges with html/css tables and sticky headers in combination with Angular Material. Within my project, I am utilizing Angular Material's sidenav components such as <mat-sidenav-container>, <mat- ...

cssangularhtml-tableangular-materialsticky

Tips for creating item cards arranged in rows of three

I'm trying to create an e-commerce site and I want to display 3 items in a row. However, when I use flex, the cards stack on top of each other instead of forming a row. How can I align them properly? I believe the issue lies with the .product-item cla ...

htmlcss

Tips for adjusting the width of a table

add your image description hereImagine a scenario where there is a table featuring two columns. <table> <tr><td>Email</td> <td></td></tr> <tr><td>Full name</td> <td></td></tr> ...

htmlcss

Font Modifications in Rails 4 Are Ineffective

While everything appears correctly on localhost, the font is not displaying correctly on Heroku deployment. Here is how it should look -> On Heroku, it looks like this -> View Project on Heroku Github Repository -> Here The font is specified in ...

cssruby-on-railsfontsruby-on-rails-4

Emptying the form input fields

[![output image][1]][1] I am facing an issue on my webpage where input fields are not getting cleared even after clicking the submit button. I have written a code to read data from a JSON file, display it, take input from users, and display it along with ...

javascripthtmlcssangularjs

Maintaining the relative position of an SVG while scaling within a div element

I am in the process of incorporating my custom SVG knob icons into an electron application using flexbox. The challenge lies in keeping them centered within the rectangle icon regardless of browser size, as shown here. Ideally, the icons should adjust thei ...

htmlcsssvgelectronscaling

Iterating through a SASS map and retrieving the next item in the loop

I am working with a color array that looks like this: $colors: ( 'primary': '#aaa', 'secondary': '#bbb', 'color-3': '#ccc', 'color-4': '#ddd', 'color-5': & ...

csssass

Using createStyles in TypeScript to align content with justifyContent

Within my toolbar, I have two icons positioned on the left end. At the moment, I am applying this specific styling approach: const useStyles = makeStyles((theme: Theme) => createStyles({ root: { display: 'flex', }, appBar: ...

javascriptcssreactjstypescriptmaterial-ui

The CSS styles are not recognized by the Windows 2003 server

After deploying my webapp, which was created using asp.net, to a testing server (Windows 2003 SP2, IIS6), I encountered an issue. When I accessed the default page, none of the CSS styles were applied. Only plain text or formatting from the .aspx file was v ...

c#asp.netcss

Styling elements based on a condition with CSS

Is there a way to confirm the truthiness of a TypeScript variable using CSS? I am attempting to determine if I am on a particular page so that I can adjust the height accordingly. Appreciate any help! ...

cssangulartypescriptionic-framework

HTML content does not reflect changes made to CSS class

My eCommerce store is on WordPress and we recently switched from Opencart. We're facing some challenges related to product descriptions. Each product has its own unique CSS in the description, similar to how it was done in Opencart with CSS tags start ...

htmlcsswordpresswoocommerce