design-tokens: Cant Export Spacing as Single Value

We are using Tailwind. For things like spacing, we only need the following json schema to configure it for tailwind.

{
   "4": "4px",
   "8": "8px",
   "16": "16px"
}

and so on.

Right now, the spacing export exports with the assumption we need tokens for top, left, right, bottom. We end up with this after running style dictionary

{
  "4": {"top":4,"bottom":4,"left":4,"right":4},
  "8": {"top":8,"bottom":8,"left":8,"right":8},
  "12": {"top":12,"bottom":12,"left":12,"right":12},
  "16": {"top":16,"bottom":16,"left":16,"right":16},
  "24": {"top":24,"bottom":24,"left":24,"right":24},
  "32": {"top":32,"bottom":32,"left":32,"right":32},
  "40": {"top":40,"bottom":40,"left":40,"right":40},
  "48": {"top":48,"bottom":48,"left":48,"right":48},
  "64": {"top":54,"bottom":54,"left":54,"right":54},
  "96": {"top":96,"bottom":96,"left":96,"right":96}
}

Could there possibly be an option to export spacing with just the spacing value? so instead of…

"4": {
    "description": null,
    "type": "custom-spacing",
    "value": {
      "top": 4,
      "bottom": 4,
      "left": 4,
      "right": 4
    },
    "extensions": {
      "org.lukasoppermann.figmaDesignTokens": {
        "exportKey": "spacing"
      }
    }
  }

We’d be able to get…

"4": {
    "description": null,
    "type": "custom-spacing",
    "value": 4,
    "unit": "px",
    "extensions": {
      "org.lukasoppermann.figmaDesignTokens": {
        "exportKey": "spacing"
      }
    }
  },

About this issue

Original URL
State: open
Created 2 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

@lukasoppermann sorry. Been swamped with standing up our design system, but gonna hopefully start on this soon

sir-captainmorgan21 on Jun 30, 2022

Hey, I merged the changes now. Android is done, so you can use that as an example.

I also added a transform:android script that runs the example.

We still need to add it for iOS and web and of course for your examples. And we need to adjust the documentation on this project and the transformers to tell people about it.

lukasoppermann on Apr 6, 2022

Nice. I think it would make most sense to create a separate repo so people can download it and use it without having the whole plugin code in their npm. What do you think?

lukasoppermann on Mar 29, 2022

Hey, sorry, somehow this got lost. You can just fork and send a PR.

The transformers are not published via npm, no. But this is a good idea. Maybe a repo with transformers would be really helpful, what do you think?

Did you get around writing any transformers yet?

lukasoppermann on Mar 3, 2022