Skip to main content
Question

How is stored a "dash" stroke?

A

Hi everyone,

I am trying to re-use some parts of a component designed in Figma. I do this with the REST api.
I generally find what I am looking for just by looking at the response, but for the “dash” setting for a stroke, I am out of luck.
It seems to be “dashPattern” before, but I cannot find it in the current response (cf a part of the response below).

Do you know where I can find this information?
Cheers,
Adrien

      "document": {
        "id": "94:18",
        "name": "Label",
        "type": "TEXT",
        "scrollBehavior": "SCROLLS",
        "blendMode": "PASS_THROUGH",
        "absoluteBoundingBox": {
          "x": -627,
          "y": 33,
          "width": 66,
          "height": 17
        },
        "absoluteRenderBounds": {
          "x": -626.3544921875,
          "y": 35.91015625,
          "width": 63.7265625,
          "height": 10.2265625
        },
        "constraints": {
          "vertical": "SCALE",
          "horizontal": "SCALE"
        },
        "fills": [
          {
            "blendMode": "NORMAL",
            "type": "SOLID",
            "color": {
              "r": 0.27843138575553894,
              "g": 0.5764706134796143,
              "b": 0.6392157077789307,
              "a": 1
            }
          }
        ],
        "strokes": [],
        "strokeWeight": 1,
        "strokeAlign": "OUTSIDE",
        "styles": {
          "fill": "88:4",
          "text": "94:4"
        },
        "effects": [],
        "characters": "testabc",
        "style": {
          "fontFamily": "Roboto",
          "fontPostScriptName": "Roboto-Medium",
          "fontWeight": 500,
          "textCase": "UPPER",
          "textAutoResize": "WIDTH_AND_HEIGHT",
          "fontSize": 14,
          "textAlignHorizontal": "CENTER",
          "textAlignVertical": "CENTER",
          "letterSpacing": 0.75,
          "lineHeightPx": 16.40625,
          "lineHeightPercent": 100,
          "lineHeightUnit": "INTRINSIC_%"
        },
        "layoutVersion": 0,
        "characterStyleOverrides": [],
        "styleOverrideTable": {},
        "lineTypes": [
          "NONE"
        ],
        "lineIndentations": [
          0
        ]
      },
      "components": {},
      "componentSets": {},
      "schemaVersion": 0,
      "styles": {
        "88:4": {
          "key": "db6ff595584355a6a8565602019f6b468f57c42e",
          "name": "Primary/Primary",
          "styleType": "FILL",
          "remote": true,
          "description": ""
        },
        "94:4": {
          "key": "1c628e268d85489a948ca5579fdc9fbb0a1b759b",
          "name": "14 sp • BUTTON",
          "styleType": "TEXT",
          "remote": true,
          "description": ""
        }
      }

5 replies

tank666
  • tank666
  • 4858 replies
  • March 8, 2023

First: your text node doesn’t have a stroke.
Second: in REST API this property is called strokeDashes.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
A

Yes, sorry about that, you can find below the full “Button” (not just the text). There is no strokeDashes either.

{
  "constraints": {
    "vertical": "TOP",
    "horizontal": "LEFT"
  },
  "children": [
    {
      "constraints": {
        "vertical": "SCALE",
        "horizontal": "SCALE"
      },
      "characterStyleOverrides": [],
      "lineTypes": [
        "NONE"
      ],
      "characters": "testabc",
      "strokeWeight": 1,
      "styleOverrideTable": {},
      "strokeAlign": "OUTSIDE",
      "absoluteRenderBounds": {
        "x": -626.3544921875,
        "y": 35.91015625,
        "width": 63.7265625,
        "height": 10.2265625
      },
      "absoluteBoundingBox": {
        "x": -627,
        "y": 33,
        "width": 66,
        "height": 17
      },
      "lineIndentations": [
        0
      ],
      "name": "Label",
      "type": "TEXT",
      "blendMode": "PASS_THROUGH",
      "style": {
        "lineHeightUnit": "INTRINSIC_%",
        "fontPostScriptName": "Roboto-Medium",
        "textAutoResize": "WIDTH_AND_HEIGHT",
        "textCase": "UPPER",
        "fontFamily": "Roboto",
        "textAlignVertical": "CENTER",
        "letterSpacing": 0.75,
        "fontWeight": 500,
        "lineHeightPercent": 100,
        "fontSize": 14,
        "lineHeightPx": 16.40625,
        "textAlignHorizontal": "CENTER"
      },
      "id": "94:18",
      "effects": [],
      "styles": {
        "fill": "88:4",
        "text": "94:4"
      },
      "strokes": [],
      "scrollBehavior": "SCROLLS",
      "fills": [
        {
          "blendMode": "NORMAL",
          "type": "SOLID",
          "color": {
            "r": 0.27843138575553894,
            "g": 0.5764706134796143,
            "b": 0.6392157077789307,
            "a": 1
          }
        }
      ],
      "layoutVersion": 0
    }
  ],
  "strokeWeight": 3,
  "strokeAlign": "INSIDE",
  "absoluteRenderBounds": {
    "x": -654,
    "y": 21,
    "width": 120,
    "height": 40
  },
  "absoluteBoundingBox": {
    "x": -654,
    "y": 21,
    "width": 120,
    "height": 40
  },
  "name": "State=Active, Variant=Default, Size=Default, Color=Default",
  "background": [
    {
      "blendMode": "NORMAL",
      "visible": false,
      "type": "SOLID",
      "color": {
        "r": 1,
        "g": 0.03750002384185791,
        "b": 0.03750002384185791,
        "a": 1
      }
    },
    {
      "opacity": 0.20000000298023224,
      "blendMode": "NORMAL",
      "visible": false,
      "type": "SOLID",
      "color": {
        "r": 0,
        "g": 0,
        "b": 0,
        "a": 1
      }
    }
  ],
  "type": "COMPONENT",
  "blendMode": "PASS_THROUGH",
  "cornerRadius": 4,
  "id": "94:17",
  "effects": [],
  "clipsContent": false,
  "strokes": [
    {
      "blendMode": "NORMAL",
      "type": "SOLID",
      "color": {
        "r": 1,
        "g": 1,
        "b": 1,
        "a": 1
      }
    }
  ],
  "scrollBehavior": "SCROLLS",
  "backgroundColor": {
    "r": 0,
    "g": 0,
    "b": 0,
    "a": 0
  },
  "fills": [
    {
      "blendMode": "NORMAL",
      "visible": false,
      "type": "SOLID",
      "color": {
        "r": 1,
        "g": 0.03750002384185791,
        "b": 0.03750002384185791,
        "a": 1
      }
    },
    {
      "opacity": 0.20000000298023224,
      "blendMode": "NORMAL",
      "visible": false,
      "type": "SOLID",
      "color": {
        "r": 0,
        "g": 0,
        "b": 0,
        "a": 1
      }
    }
  ]
}
tank666
  • tank666
  • 4858 replies
  • March 8, 2023

Judging by the documentation, this property is only available for some nodes: VECTOR, BOOLEAN_OPERATION, STAR, LINE, ELLIPSE, REGULAR_POLYGON, RECTANGLE, TEXT, SHAPE_WITH_TEXT, CONNECTOR, WASHI_TAPE.
https://www.figma.com/developers/api#vector-props

That is, the current version of the REST API does not support the strokeDashes property for other nodes.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
A

Alright, that’s unfortunate. Thanks for your research.

A

I will keep running this topic open for a bit, so that if by any chance someone from Figma’s developer team would want to provide some context to this.

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings