lukasoppermann / design-tokens

🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.

Hi there 👋

I'm Lukas,

I work at GitHub 🐱🐙 on the primer team. (Which is great because I love cats and octopi)

🔭 I constantly refresh my portfolio try out new react stuff and work on my Figma plugins: design tokens & elevation scale

🌱 I am learning

• how to use screen readers
• productivly using an ANSI keyboard (I switched from a german layout)

🤔 I’m looking for help with my open source projects

• Figma design tokens export plugin
• Figma elevation system plugin
• HTML5 Sortable (drag & drop) package

💬 Ask me about

• design systems
• design tokens
• espresso based drinks

📫 Reach me on twitter: https://twitter.com/lukasoppermann

📚 Read my thoughts on medium.com/@lukasoppermann

🧪 Check out my work: https://lukasoppermann.com

😄 Pronouns: he/him

design-tokens's Issues

Font weight is wrongly detected as font style when generated as SCSS and CSS

Imagine I have this text style with "Extra Bold"

When using the Inspect feature in Figma, the equivalent CSS codes provided by Figma is (see how to the "Extra Bold" font style in Figma UI is translated as font-weight):

But when I do npm run transform-tokens, the following codes are generated:

$headline-font-style: Extra Bold;

Sending tokens to Github repo

I’m trying to push tokens to a Github repo.

I have created a repo, added the Server URL for that repo (in https://api.github.com/repo/:username/:repo format) and Access token. Upon sending my design tokens I receive a confirmation ‘Design tokens pushed to server!’, however I do not see any update in my repo.

The local exported file looks fine.

Replace filterByNameProperty

• apply filterByNameProperty in buildFigmaData.ts instead of individual extractors
• convert filterByNameProperty to a function that can be applied in an arrays filter method
• inject prefix as argument
• inject boolean for exclude or include to prepare for #27

Update Export UI

Add visual UI for export

• toggle each typo of token export (e.g. only export colors)

Add to settings UI

• toggle compression of json
• add csv list of token names for use in figma ("gap/10px")
  • add names for styles (fonts => typography)
• toggle main name (e.g. remove "fonts" from export)

comment:null leads to errors with style-dictionary

Hi,

thanks for this great plugin!

One thing I discovered in the latest version:

Missing comments are exported as comment: null, which leads to errors when using style-dictionary (I am using 2.10.3) to transform the styles. Changing these to comment: ""or removing them altogether leads to a working build.

Custom Transformers

Some things like easing function names don't match to languages → write example of custom transformer to changes those for the given languages (https://github.com/amzn/style-dictionary/blob/main/examples/advanced/custom-transforms/build.js#L21)

Empty export, previously worked.

I'm getting an empty file trying to export. Was working before. Here's the view link https://www.figma.com/file/35nU0g9gYNgOwhp6cqTEIs/style-guide?node-id=0%3A1

Unit tests

Create unit tests for all modules / functions

Missing:

• index.ts
• styleDictionaryTransformer.ts

Separate types into smaller files with a better structure

Settings: enable category prefix (e.g. color or typography)

Allow user to enable top level categories.
E.g. all colors are clustered below colors

Borders, don't show dash-pattern "" if none is set

Show error when github push fails

• 401
• 404
• check if other codes are available

Gradient exported with fill category

Hi!
First of all, thanks for this great plugin!

It seems that at one point, gradients were exported with the category gradient but it was then reverted to fill category.
See ea8503d

Is there a reason why ? And would it be possible to add back this feature ?

Thanks!

Motion design tokens

• easing curves
• duration

Does it still be maintained?

Is this project still maintained?

Settings: top level prefix

Allow user to add a prefix that is used for all tokens, e.g. token → --token-color-blue

Allow variants to be tokens

E.g. spacing, etc. where you have a variant base[sm], base[md], ...

Add versioning

Allow users to create a "commit" every time the tokens are changed / exported with a sem-version increase.

Rewrite to use react

Using react makes building the UI a lot easier.

Add better error messages for settings fields

Add custom error messages to html5 form

Shadow offset missing

Improve types

• improve naming of types
• cleanup types
• separate into even more files if it makes sense

Remove border styles with images or multiple strokes to not export

Close UIs on ESC

Add link to demo figma file

• Add link to demo figma file
• Improve demo figma file

Support gradients on colors

Add version number (+ named version) from figma file to exported file

Currently the figma file status can not be accessed from plugins.

Allow for custom tokens to be in groups, etc. not immediately within _token frame?

• currently custom tokens have to be an immediate child element of a _token frame

Duplicate #65

Update design token transformer to create a PR instead of committing straight away

• https://github.com/marketplace/actions/create-pr

The idea here is that instead of overwriting the design tokens here: https://github.com/lukasoppermann/design-token-transformer the github action should create a PR that allows manually checking the changes on github before merging.

Export to repository & automatically transform

Send json data to a url (e.g. a git repository) that automatically transforms the data using npm (e.g. style dictionary).

• add menu item to send exported json to a specified url
• add settings option to define url
• add implementation of sending json
• add action to transformer to automatically run the transformer npm script when hook is received

Support multiple fills

Roadmap

Roadmap

Beta

Colors

• solid fills only
• only one fill per color token

Borders

• solid fills only
• only one fill per token

Grids

• support multiple grids

Sizes

• only width is used

Effects

• support multiple effects

Version 1.0

• ignore styles that have a name starting with _

Colors

• support gradients

Workflow

• provide amazon style directory transformers for css & sass

Version 1.X

Primitives ?

• should primitives be included and used to build tokens? e.g. font-family, color (without opacity), typescale (separated from font itself)
• allow tokens that can be styles (e.g. text, color, etc.) to be created from elements as well?
  • this would allow to use core styles in other styles (e.g. core-color-primary could be used as the color for button-color-primary)
  • may allow for granular tokens, e.g. font-family or only font-size

Colors

• support multiple fills?

Borders

• support gradients
• support multiple fills?
• create reference if design token color are used

Sizes

Include different sizes, maybe the ones below (?):

• spacers (only width)
• padding (autolayout)
• width
• height

Others

• Maybe include motion properties?
• How can properties that are not applicable to figma be created and exported in figma?

Settings

• setting to choose if units should be added or not (12px or just 12)
• setting to include top level prefix (e.g. token or style)
• setting to include category level prefix (e.g. color or typography)
• setting to only import selected tokens e.g. only colors
• toggle between not converting styles prefixed with _ and only converting styles that are subitem of _tokens

Workflow

• provide webhook / push & example of repo that converts via github action
• allow for yaml files (https://www.npmjs.com/package/yamljs)

Testing

• implement tests #4

Amazon Style Directory Transformer

• change description to comment
• make any property with only one item in values return this without the sub-name e.g. color-fill = color
• convertUnits (incl. option to add add unit e.g. 'px' or '%')
• convertColor to rgba

Allow tokens within sub-frames & groups

Allow users to group tokens into sub-frames or groups.

Issues

• how does the plugin know which one is a token and which one is a group?

Settings: selectively export

Allow user to toggle what should be exported:

• effects
• text styles
• grid styles
• colors
• sizes
• radii
• borders
• all

Gtihub Action to run unit tests & linting

Add a github action that runs tests & linting on push & PR

Padding design token

Using auto layout

Settings: Add convert numbers to string (value + unit)

setting to choose if units should be added or not (12px or just 12)

Individual Radii are not exported

• On radius properties the individual corner radii are not exported to the json file.
• once exported they may need to be specially converted for amazon style dictionary

Show changes when plugin is used

• track plugin version
• store last opened version in user data
• when plugin is used
  • if minor bugfix: show notification at bottom
  • if new feature: show overlay with link to github release notes

Create reference if design token color are used in borders

• change names of all items to allow for dot notation referencing
  • extract separate function for naming
• add style id as string value and reference as property type
• loop through all values and if an ID is found do a search via api to look up ID
• if no comment, add comment with name of referenced token (as currently the reference may be replaced by a value)

// Does this need speed optimization? If so:
When detecting styleID on initial run, add reference to this element to some array

Collaboration with Theemo?

Gude aus Frankfurt 👋

After reading your very nice article about design tokens (Choices & Decisions) and your hint for this addon, I think we should collaborate on the two rather than brewing stuff on our own.

As this is kinda my research project from last year and theemo is one of the solutions I developed (for both figma and toolchain), I think the best what I can leave you here are my articles where I wrote down what I found out:

• https://gos.si/blog/from-figma-to-ember-to-storybook-with-2-clicks/ (the other articles are linked)
• https://gossi.github.io/theemo/

Sorry, if this is overwhelming 🙈 I will give your figma plugin a try over the weekend to understand how you approach this problem. At best, would prefer a call or so - what's the best way to reach out? Some slack or discord to join here?

gossi

How does the naming convention work?

I may be completely misunderstanding something, but I'm confused on two fronts. For one, it seems Amazon specifies a specific naming convention thats required to make "transforms" work, but this plugin doesn't seem to enforce that, right?

Secondly, in the readme example, the outputted fonts have, very nicely, a prepended "--font-" to them. This doesn't seem to be the default behaviour though. Are we supposed to put all our Figma font styles in a "fonts" folder? The Figma example you provided (albeit its for spacing) doesn't seem to have that naming convention.

Allow Frames to be used for custom tokens

Push to server not working when payload is too big

I have a fairly large generated JSON (just under 100k).

When trying to use the "Send tokens to url" feature I noticed that if the content is too big the request will fail. I didn't find the exact maximum payload in the github docs, but wanted to open an issue so this can be looked into.

I have a possible solution and will open a PR shortly.

Settings: toggle exclude and include for styles

Let user choose:

• only styles with a prefix of [user choice] (defaults to _tokens) are export
• all with the prefix are excluded (replaces current exclude any with _)

Third party contributions?

Hello,

My team is considering using this plugin and I'd like to know if you will accept contributions (new features, bug fixes, etc) from external users like us?

Thanks.

Investigate support for gradient on borders

Getting blank list on plugin while exporting json file

Getting blank list on plugin while exporting json file. This is the file I am trying to run it on https://www.figma.com/file/eteQ8PXhfQORP09r5XbiPG/TestingDesignTokenExport in case it helps to debug? I am wondering if this is because figma's file structure has changed in json? I am wondering if line 19 in buildFigmaData.ts needs to be just figma.document.children instead ? Purely basing this on the Figma API call though as the response looks like:

{ components: {...}, document: {id: "1", children: [{..}]...}, name: "blah",...}

Investigate Testing with fixed dataset

Can the figma api be mocked to test the whole plugin?