question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

What is the correct setup for sketch palette?

See original GitHub issue

I’ve included an example. I have the files created with the init build, everything else works (removed my js outputs). I don’t think the filter is working, but if someone has an example of sketch much appreciated 😃

  "source": [
    "properties/**/*.json"
  ],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "build/scss/",
      "files": [
        {
          "destination": "_tokens.scss",
          "format": "scss/variables"
        }
      ]
    },
    "sketch": {
      "transforms": ["color/sketch"],
      "buildPath": "build/sketch/",
      "files": [
        {
          "destination": "tokens.sketchpalette",
          "format": "sketch/palette/v2"
        }
      ],
      "filter": {
        "attributes": {
          "category": "color",
          "type": "base"
        }
      }
    }
  }
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
dbanksdesigncommented, Aug 12, 2019

Awesome! Yea a bit about those warnings. When Style Dictionary tries to build a file it will check for name collisions in the format, name collisions could happen because maybe a name transform is causing names to be duplicated. In your case it was because you didn’t have any name transform applied (my bad, I forgot that), and by default each token’s name is its’ key in the object. So having multiple keys of _40k even though they were at different parts of the object caused them to override each other when outputting a flat array like in a sketch palette. Although not much harm would have come, but just the names of the sketch colors would not be intelligible.

Here is the PR that added those warnings: https://github.com/amzn/style-dictionary/pull/273

0reactions
cjcheshirecommented, Aug 9, 2019

Okay, fixed it. It was my names: The winning config:

"sketch": {
      "transforms": ["name/cti/camel","attribute/cti", "color/sketch"],
      "buildPath": "build/sketch/",
      "files": [
        {
          "destination": "tokens.sketchpalette",
          "format": "sketch/palette/v2",
          "filter": {
            "attributes": {
              "category": "color"
            }
          }
        }
      ]
    }

Hopefully will help peeps in future and thanks for you help @dbanksdesign 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fusion 360 Help | Sketch Palette reference | Autodesk
The Sketch Palette dialog displays in the canvas when you create or edit a sketch in Fusion 360. The palette contains commonly used...
Read more >
Design workflow quick tip #5 — Color Palettes in Sketch
Open a new/ existing Sketch document · Go to Plugins>Sketch Palettes>Document Colors> Load Palette · In the window that opens, go to palette ......
Read more >
Creo Customization: Custom sketch palette - YouTube
You will learn how to create and define Custom sketch paletteIf you enjoy my content, please consider supporting what I do: Buy a...
Read more >
Sketch palette plugin for Sketch app - Loading palette - YouTube
A video for a blog post where I talk about a Sketch app plugin Sketch Palette. This video shows how to load a...
Read more >
How to save color palettes in Sketch - YouTube
Wishing there was a way to better manage multiple color palettes in Sketch without endlessly adding to your "Global Colors" area?
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found