🎨 Sketched

Parse design tokens from .sketch files

npm install --save-dev sketched

Requirements

• File should have page named "Tokens"
• Page "Tokens" should have 3 artboards:
  • Palette
  • Typography
  • Spacers
• Palette layer:
  • Name will be used as name of color
  • Fill style as value of color
• Typography layer:
  • Name will be used as name of typography style
  • Text settings will be exported
• Spacers layer:
  • Name will be used as name of spacer
  • Width and height should be equals
  • Width will be used as size of spacer

Run

skecthed --file ./example/design.sketch

Output

{ "palette":
   [ { "name": "Red", "color": "rgba(1, 0, 0.1768002717391308, 1)" },
     { "name": "Blue", "color": "rgba(0, 0.5889945652173916, 1, 1)" },
     { "name": "Green", "color": "rgba(0.1693274456521741, 1, 0, 1)" } ],
  "typography":
   [ { "name": "Header 1",
       "font": "OpenSans-Bold",
       "size": 44,
       "lineHeight": 60 },
     { "name": "Header 2",
       "font": "OpenSans-Bold",
       "size": 32,
       "lineHeight": 43 },
     { "name": "Header 3",
       "font": "OpenSans-Semibold",
       "size": 24,
       "lineHeight": 33 },
     { "name": "Paragraph 1",
       "font": "OpenSans",
       "size": 16,
       "lineHeight": 22 } ],
  "spacers":
   [ { "name": "xs", "size": 8 },
     { "name": "s", "size": 16 },
     { "name": "m", "size": 24 },
     { "name": "l", "size": 32 },
     { "name": "xl", "size": 48 },
     { "name": "xxl", "size": 64 } ] }