mikaelvesavuori / figmagic

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.
https://docs.figmagic.com
MIT License
807 stars 71 forks source link

Can't output graphics as wrapped React elements. #102

Closed jmak closed 3 years ago

jmak commented 3 years ago

Describe the bug Reading documentation I have an impression that outputting graphics (elements that are placed on Graphics page in Figma file) as wrapped react elements is build into the Figmagic library. I manage only to export everything as svgs. I tried to use custom template but with no success.

My config

"figmagic": "^4.0.15"

{
  "fontUnit": "rem",
  "remSize": "10",
  "outputFileName": "figma.json",
  "outputFolderBaseFile": ".figmagic",
  "outputFolderTokens": "tokens",
  "outputFolderElements": "elements",
  "outputFormatGraphics": "svg",
  "outputFolderGraphics": "./src/icons",
  "outputGraphicElements": true,
  "outputGraphicElementsMap": true,
  "syncGraphics": true,
  "outputFormatCss": "mjs",
  "outputFormatTokens": "mjs",
  "spacingUnit": "rem",
  "usePostscriptFontNames": true,
  "templates": {
    "templatePathGraphic": "./node_modules/figmagic/templates/graphic",
    "templatePathReact": "./node_modules/figmagic/templates/react",
    "templatePathStyled": "./node_modules/figmagic/templates/styled",
    "templatePathStorybook": "./node_modules/figmagic/templates/story"
  }
}

When I run: "figmagic:graphics": "node ./node_modules/figmagic/build/index.js --syncGraphics" I get only svg files.

When I run "figmagic:sync": "node ./node_modules/figmagic/build/index.js --syncElements --syncGraphics" I get one element that I have in Elements page but I don't get wrapped React elements for svg files

Expected behavior SVG icons placed on Graphics page in Figma are exported as React components

Desktop (please complete the following information):

mikaelvesavuori commented 3 years ago

Hi!

Given that you set "syncElements": true in the config (or use --syncElements) you should be getting a result similar to the attached image.

figmagic-wrapped-svg

mikaelvesavuori commented 3 years ago

Hi @jmak,

I will be closing this since this should be able to be corrected as per above. I will look into updating docs to clarify!

jmak commented 3 years ago

@mikaelvesavuori Thanks for your explanation.