Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Import design tokens from Figma instead of XD #1175

Closed
3 tasks
jattasNI opened this issue Apr 10, 2023 · 3 comments
Closed
3 tasks

Import design tokens from Figma instead of XD #1175

jattasNI opened this issue Apr 10, 2023 · 3 comments
Labels
tech debt

Comments

@jattasNI
Copy link
Contributor

jattasNI commented Apr 10, 2023 •
edited
Loading

🧹 Tech Debt

Our documented process to get colors and sizes into nimble-tokens is to import them from Adobe XD. However the tooling for that process stopped working and we're moving away from XD towards Figma.

The Figma components spec has token values in it too: we should figure out how to import values from there instead. One option to consider is this design tokens Figma plugin.

  • figure out and implement new process
  • migrate existing tokens
  • document new process
@jattasNI jattasNI added tech debt triage New issue that needs to be reviewed labels Apr 10, 2023
@m-akinc m-akinc removed the triage New issue that needs to be reviewed label Apr 11, 2023
@jattasNI jattasNI mentioned this issue Apr 12, 2023
Merged
1 task
jattasNI added a commit that referenced this issue Apr 19, 2023
@jattasNI @rajsite
Clean up process to modify design tokens (#1183)
203525b 
# Pull Request

## 🤨 Rationale

This started as [a joke to modify some token
values](https://60e89457a987cf003efc0a5b-fftmbqhrah.chromatic.com/?path=/story/tests-button--button-theme-matrix)
but turned into refactoring how we source our design tokens when I
wrapped my head around the problems with our current approach:

1. our documentation describes importing tokens from Adobe XD and using
the Design System Provider but those processes no longer work
2. our Style Dictionary configuration and build scripts were in the
`dist` directory when they should be source
3. the process to generate Style Dictionary output (the platform
specific token files) was manual and the build output was checked into
source

The new approach is to remove DSP, make Style Dictionary JSON files in
this repo our source of truth for design token values, and generate
token output as part of the build.

The changes I'm making here should make #1175 easier too. (The Figma
plugin linked in that issue can output Style Dictionary JSON files).

## 👩‍💻 Implementation

1. Remove everything about storing tokens in XD and Design System
Provider. The source of truth is now Style Dictionary JSON files.
2. Move Style Dictionary build configuration to the `source` directory.
This required some changes to get lint to pass since some of these files
weren't previously linted. (See comments in PR)
3. Generate Style Dictionary output as part of `npm run build` instead
of checking it in to source
4. Update CONTRIBUTING docs to describe the current process
5. Pull token values for base tokens story from JS build output instead
of JSON source. This changed the order of the tokens in the story.

## 🧪 Testing

Made token changes and verified that the built components uptake them.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: rajsite <[email protected]>
@jattasNI jattasNI self-assigned this Apr 19, 2023
@jattasNI
Copy link
Contributor Author

I researched this during innovation days last week. You can see progress in this branch.

Takeaways:

  • this looks possible using the design tokens Figma plugin described above. I documented the process in a contributing document in that branch.
  • There are some problems that still need to be solved:
    • the token hierarchy from Figma isn't currently respected by our Style Dictionary generation process, which results in build errors due to tokens with identical names (e.g. "Fail>>Dark>>Fail 100" and "Fail>>Light>>Fail 100" are both called "Fail 100"). We could fix this by changing our token naming or updating the token generation script. The latter seems preferable but requires some work.
    • the plugin has some bugs, for example Doesn't preserve camel casing in export lukasoppermann/design-tokens#197. These aren't showstoppers but if not fixed they may impact our token naming strategy.
    • the token names have changed between XD and Figma. This will require a one-time manual remapping of all the usages. This seems worth doing rather than going back to the less organized XD naming scheme.

We decided we still want to do this but it might make sense to wait a little while for our Figma usage to stabilize. Right now we're still filling in a lot of missing tokens/components and figuring out the right organization.

@jattasNI jattasNI removed their assignment Apr 25, 2023
@jattasNI
Copy link
Contributor Author

Brandon mentioned at team meeting today that he's considering renaming the meaning of tokens in Figma. A lot of the colors like "Black15" aren't actually "black at 15% opacity". It could be good to take this opportunity to make their names match their values. This will be a bigger breaking change but could be worthwhile to do as part of the transition.

@jattasNI jattasNI mentioned this issue Mar 7, 2024
Closed
@jattasNI
Copy link
Contributor Author

It doesn't seem like a high priority to align on naming conventions, token hierarchies, etc between design and dev. It'll also be costly to adopt tooling to export/import tokens. Closing this as low ROI.

@jattasNI jattasNI closed this as not planned Won't fix, can't repro, duplicate, stale Mar 13, 2024
@m-akinc m-akinc moved this from Backlog to Done in Nimble Design System Priorities Jul 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
tech debt
Projects
Nimble Design System Priorities
Status: Done
Milestone
No milestone
Development

No branches or pull requests
2 participants
@m-akinc @jattasNI