{"id":13775060,"url":"https://github.com/here-erhe/Design-Token-Exporter","last_synced_at":"2025-05-11T07:31:47.316Z","repository":{"id":44805254,"uuid":"190185084","full_name":"here-erhe/Design-Token-Exporter","owner":"here-erhe","description":"Export Design Tokens from your Sketch project","archived":true,"fork":false,"pushed_at":"2022-01-23T13:01:34.000Z","size":13477,"stargazers_count":65,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-02-14T19:31:43.976Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/here-erhe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-04T11:06:38.000Z","updated_at":"2023-11-21T23:49:57.000Z","dependencies_parsed_at":"2022-09-13T08:00:35.223Z","dependency_job_id":null,"html_url":"https://github.com/here-erhe/Design-Token-Exporter","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/here-erhe%2FDesign-Token-Exporter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/here-erhe%2FDesign-Token-Exporter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/here-erhe%2FDesign-Token-Exporter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/here-erhe%2FDesign-Token-Exporter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/here-erhe","download_url":"https://codeload.github.com/here-erhe/Design-Token-Exporter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253533648,"owners_count":21923488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T17:01:33.335Z","updated_at":"2025-05-11T07:31:46.459Z","avatar_url":"https://github.com/here-erhe.png","language":"JavaScript","funding_links":[],"categories":["Tools","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Collections"],"readme":"![alt text](images/gitcover.jpg)\n\n# This project is not maintained anymore\n\n## Design Token Exporter\n\n**Export Design Tokens from your Sketch project.**\n\n- You can export Design Token file either JSON or YAML format. Token file follow Salesforce [Theo](https://github.com/salesforce-ux/theo) spec.\n- Layers naming format is type/category/tokenname (e.g. color/background-color/bg-light)\n\n**Available categories:**\n\n| Category                     | Sketch Layer type              | Value\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n| ---------------------------  | ------------------------------ | --------------------------------------------------------- |\n| `spacing`/`space`/`spacer`   | Shape Layer            \t\t| Layer height \t\t\t\t\t\t\t\t\t\t\t\t|\n| `sizing`/`size`              | Shape Layer            \t\t| Layer height \t\t\t\t\t\t\t\t\t\t\t\t|\n| `font`                       | Text Layer             \t\t| Font weight (type=number) /  Font Family (type=...)\t\t|\n| `font-style`                 | Text Layer            \t\t \t| Font style\t\t\t\t\t\t\t\t\t\t\t\t|\n| `font-weight`                | Text Layer           \t\t\t| Font weight \t\t\t\t\t\t\t\t\t\t\t\t|\n| `font-size`                  | Text Layer             \t\t| Font Size \t\t\t\t\t\t\t\t\t\t\t\t|\n| `line-height`                | Text Layer           \t \t\t| Line height \t\t\t\t\t\t\t\t\t\t\t\t|\n| `font-family`                | Text Layer          \t \t\t| Font Family \t\t\t\t\t\t\t\t\t\t\t\t|\n| `border-style`               | Shape Layer           \t\t \t| Border style \t\t\t\t\t\t\t\t\t\t\t\t|\n| `border-color`               | Shape Layer           \t\t \t| Border style or Fill color \t\t\t\t\t\t\t\t|\n| `radius`                     | Shape Layer                  \t| Radius  \t\t\t\t\t\t\t\t\t\t\t\t\t|\n| `border-radius`              | Shape Layer            \t\t| Radius \t\t\t\t\t\t\t\t\t\t\t\t\t|\n| `hr-color`                   | Shape Layer  \t\t\t\t\t| Fill color \t\t\t\t\t\t\t\t\t\t\t\t|\n| `background-color`           | Shape Layer       \t\t\t \t| Fill color \t\t\t\t\t\t\t\t\t\t\t\t|\n| `gradient`                   | Shape Layer              \t\t| Fill gradient \t\t\t\t\t\t\t\t\t\t\t|\n| `background-gradient`        | Shape Layer    \t\t\t\t| Fill gradient \t\t\t\t\t\t\t\t\t\t\t|\n| `drop-shadow`                | Shape Layer            \t\t| Shadows \t\t\t\t\t\t\t\t\t\t\t\t\t|\n| `box-shadow`                 | Shape Layer             \t\t| Shadows \t\t\t\t\t\t\t\t\t\t\t\t \t|\n| `inner-shadow`               | Shape Layer      \t\t\t\t| Inner Shadows \t\t\t\t\t\t\t\t\t\t\t|\n| `text-color`                 | Shape Layer or Text Layer      | Text color or Fill color \t\t\t\t\t\t\t\t\t|\n| `text-shadow`                | Shape Layer or Text Layer      | Layer shadow \t\t\t\t\t\t\t\t\t\t\t\t|\n| `time`                       | Text Layer                   \t| Text layer value \t\t\t\t\t\t\t\t\t\t\t|\n| `media-query`                | Text Layer          \t\t\t| Text layer value \t\t\t\t\t\t\t\t\t\t\t|\n| `z-index`                \t   | Text Layer          \t\t\t| Text layer value \t\t\t\t\t\t\t\t\t\t\t|\n| `any`                \t   \t   | Shape Layer          \t\t\t| Fill color  (type=color)\t\t\t\t\t\t\t\t\t|\n\n\n**Export variables from your Sketch project. You can export colors, text, spacing variables and text styles.**\n\n- You can choose file format: SCSS, CSS, LESS, JSON, JavaScript (Object/Variables)\n- You can choose color format: HEX or RGBA\n- You can choose text value: font family, font size, font weight, line height or letter spacing \n- You can choose units: Absolute (px) or Relative (rem)\n- You can choose naming (kebab-case, camelCase or part of layer name)\n\n## Features \n\n1. Export Tokens\n2. Export Color Variables\n3. Export Text Variables\n4. Export Spacing Variables\n5. Export Text Styles\n\n### 1. Export Tokens\n\nSelect layers or one artboard and go to `Plugins -\u003e Design Token Exporter -\u003e Export Tokens`\n\n![alt text](images/exportTokens.gif)\n\n**Example output - tokens.yml**\n\n```yml\nprops:\n  gray_1:\n    value: \"#fafaf9\"\n    type: \"color\"\n    category: \"gray\"\n  gradient_background:\n    value: \"linear-gradient(180deg, #FAFAF9 0%, #F3F2F2 100%)\"\n    type: \"...\"\n    category: \"gradient\"\n  spacing_m:\n    value: \"16px\"\n    type: \"number\"\n    category: \"spacing\"\n  font_size_l:\n    value: \"24px\"\n    type: \"number\"\n    category: \"font-size\"\n```\n\n### 2. Export Color Variables\n\nSelect layers and go to `Plugins -\u003e Design Token Exporter -\u003e Export Color Variables`\n\n![alt text](images/colors.gif)\n\n**Example output - colors.scss (SCSS, HEX)**\n\n```scss\n$primary1: #b39ddb;\n$primary2: #673ab7;\n$primary3: #512da8;\n$primary4: #311b92;\n$secondary1: #b2dfdb;\n$secondary2: #4db6ac;\n$secondary3: #009688;\n$secondary4: #00796b;\n$grey1: #cfd8dc;\n$grey2: #90a4ae;\n$grey3: #607d8b;\n$grey4: #37474f;\n```\n\n### 3. Export Text Variables\n\nSelect layers and go to `Plugins -\u003e Design Token Exporter -\u003e Export Text Variables`\n\n![alt text](images/fontsize.gif)\n\n**Example output - fontsize.json (JSON, Font size, Absolute(px))**\n\n```json\n{\n\t\"fontSize\": {\n\t\t\"xxl\": \"64px\",\n\t\t\"xl\": \"48px\",\n\t\t\"l\": \"32px\",\n\t\t\"m\": \"24px\",\n\t\t\"s\": \"20px\",\n\t\t\"xs\": \"16px\",\n\t\t\"xxs\": \"12px\"\n\t}\n}\n```\n\n### 4. Export Spacing Variables\n\nSelect layers and go to `Plugins -\u003e Design Token Exporter -\u003e Export Spacing Variables`\n\n![alt text](images/spacing.gif)\n\n**Example output - spacing.css (CSS, Relative(rem))**\n\n```css\n:root {\n   --spacing-xxs: 0.25rem;\n   --spacing-xs: 0.5rem;\n   --spacing-s: 1rem;\n   --spacing-m: 1.5rem;\n   --spacing-l: 3rem;\n   --spacing-xl: 4rem;\n   --spacing-xxl: 8rem;\n}\n```\n\n### 5. Export Text Styles\n\nSelect layers and go to `Plugins -\u003e Design Token Exporter -\u003e Export Text Styles`\n\n![alt text](images/textstyles.gif)\n\n**Example output - textstyles.js (JavaScript Object, Absolute(px))**\n\n```js\nconst textStyles = {\n\th1: {\n\t\tfontFamily: \"Museo Sans\",\n\t\tfontSize: \"64px\",\n\t\tfontWeight: 300,\n\t\tlineHeight: \"64px\",\n\t\tletterSpacing: \"normal\",\n\t\ttextTransform: \"none\",\n\t},\n\th2: {\n\t\tfontFamily: \"Museo Sans\",\n\t\tfontSize: \"48px\",\n\t\tfontWeight: 300,\n\t\tlineHeight: \"48px\",\n\t\tletterSpacing: \"normal\",\n\t\ttextTransform: \"none\",\n\t},\n\th3: {\n\t\tfontFamily: \"Museo Sans\",\n\t\tfontSize: \"32px\",\n\t\tfontWeight: 300,\n\t\tlineHeight: \"48px\",\n\t\tletterSpacing: \"normal\",\n\t\ttextTransform: \"none\",\n\t},\n\th4: {\n\t\tfontFamily: \"Museo Sans\",\n\t\tfontSize: \"24px\",\n\t\tfontWeight: 500,\n\t\tlineHeight: \"36px\",\n\t\tletterSpacing: \"normal\",\n\t\ttextTransform: \"none\",\n\t},\n\ttitle: {\n\t\tfontFamily: \"Museo Sans\",\n\t\tfontSize: \"20px\",\n\t\tfontWeight: 700,\n\t\tlineHeight: \"36px\",\n\t\tletterSpacing: \"1.5px\",\n\t\ttextTransform: \"uppercase\",\n\t},\n\tbody: {\n\t\tfontFamily: \"Museo Sans\",\n\t\tfontSize: \"16px\",\n\t\tfontWeight: 500,\n\t\tlineHeight: \"24px\",\n\t\tletterSpacing: \"normal\",\n\t\ttextTransform: \"none\",\n\t},\n\tcaption: {\n\t\tfontFamily: \"Museo Sans\",\n\t\tfontSize: \"12px\",\n\t\tfontWeight: 500,\n\t\tlineHeight: \"18px\",\n\t\tletterSpacing: \"normal\",\n\t\ttextTransform: \"none\",\n\t},\n}\n```\n\n\n## License\n\nThis project is licensed under the terms of the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhere-erhe%2FDesign-Token-Exporter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhere-erhe%2FDesign-Token-Exporter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhere-erhe%2FDesign-Token-Exporter/lists"}