Skip to content

Commit 3af0218

Browse files
lukasoppermannlukasoppermann
committed
fix
1 parent f34af99 commit 3af0218

File tree

9 files changed

+71
-27
lines changed

9 files changed

+71
-27
lines changed

‎_resources/Plugin Description.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
Allows you to export fimga styles and elements to a json file, that is Amazon Style Dictionary compatible.
2+
3+
Design Tokens
4+
You can create design tokens for the following properties:
5+
- colors
6+
- typograhy
7+
- grids
8+
- effects
9+
- sizes / spaces
10+
- radii
11+
- borders
12+
13+
Benefits
14+
✅ Actively developed
15+
✅ Compatible with Amazon Style Dictionary
16+
✅ Support for Figma Styles
17+
✅ Support for custom tokens
18+
19+
Usage & transformation
20+
Find out how to use the plugin to create custom tokens from the documentation. https://github.com/lukasoppermann/design-tokens
21+
22+
Get up to speed transforming your tokens using style directory with the transformer package. https://github.com/lukasoppermann/design-token-transformer
23+
24+
25+
Feature request & bugs
26+
Please create an issues in the repository. https://github.com/lukasoppermann/design-tokens/issues/new

‎dist/plugin.js

+24-16
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,24 @@
4444
};
4545
exports.convertRgbaObjectToString = (rgbaObject) => `rgba(${rgbaObject.r}, ${rgbaObject.g}, ${rgbaObject.b}, ${rgbaObject.a})`;
4646
});
47-
define("extractor/extractColors", ["require", "exports", "utilities/convertColor"], function (require, exports, convertColor_1) {
47+
define("utilities/getTokenStyles", ["require", "exports"], function (require, exports) {
48+
"use strict";
49+
Object.defineProperty(exports, "__esModule", { value: true });
50+
const excludeUnderscoreStyles = true;
51+
const getTokenStyles = (styles) => {
52+
if (excludeUnderscoreStyles === true) {
53+
return styles.filter(style => style.name.trim().substr(0, 1) !== '_');
54+
}
55+
return styles;
56+
};
57+
exports.default = getTokenStyles;
58+
});
59+
define("extractor/extractColors", ["require", "exports", "utilities/convertColor", "utilities/getTokenStyles"], function (require, exports, convertColor_1, getTokenStyles_1) {
4860
"use strict";
4961
Object.defineProperty(exports, "__esModule", { value: true });
5062
const extractColors = (tokenNodes) => {
5163
// get all paint styles
52-
return tokenNodes.map(node => ({
64+
return getTokenStyles_1.default(tokenNodes).map(node => ({
5365
name: node.name,
5466
// id: node.id,
5567
description: node.description || null,
@@ -64,7 +76,7 @@
6476
};
6577
exports.default = extractColors;
6678
});
67-
define("extractor/extractGrids", ["require", "exports"], function (require, exports) {
79+
define("extractor/extractGrids", ["require", "exports", "utilities/getTokenStyles"], function (require, exports, getTokenStyles_2) {
6880
"use strict";
6981
Object.defineProperty(exports, "__esModule", { value: true });
7082
const gridValues = (grid) => ({
@@ -110,7 +122,7 @@
110122
} })));
111123
const extractGrids = (tokenNodes) => {
112124
// get grid styles
113-
return tokenNodes.map(node => ({
125+
return getTokenStyles_2.default(tokenNodes).map(node => ({
114126
name: node.name,
115127
description: node.description || null,
116128
category: 'grid',
@@ -119,7 +131,7 @@
119131
};
120132
exports.default = extractGrids;
121133
});
122-
define("extractor/extractFonts", ["require", "exports", "utilities/roundWithDecimals"], function (require, exports, roundWithDecimals_2) {
134+
define("extractor/extractFonts", ["require", "exports", "utilities/getTokenStyles", "utilities/roundWithDecimals"], function (require, exports, getTokenStyles_3, roundWithDecimals_2) {
123135
"use strict";
124136
Object.defineProperty(exports, "__esModule", { value: true });
125137
const textDecorations = {
@@ -135,7 +147,7 @@
135147
};
136148
const extractFonts = (tokenNodes) => {
137149
// get raw text styles
138-
return tokenNodes.map(node => ({
150+
return getTokenStyles_3.default(tokenNodes).map(node => ({
139151
name: node.name,
140152
description: node.description || undefined,
141153
values: {
@@ -186,7 +198,7 @@
186198
};
187199
exports.default = extractFonts;
188200
});
189-
define("extractor/extractEffects", ["require", "exports", "utilities/convertColor"], function (require, exports, convertColor_2) {
201+
define("extractor/extractEffects", ["require", "exports", "utilities/convertColor", "utilities/getTokenStyles"], function (require, exports, convertColor_2, getTokenStyles_4) {
190202
"use strict";
191203
Object.defineProperty(exports, "__esModule", { value: true });
192204
const effectType = {
@@ -240,7 +252,7 @@
240252
});
241253
const extractEffects = (tokenNodes) => {
242254
// get effect styles
243-
return tokenNodes.map(node => ({
255+
return getTokenStyles_4.default(tokenNodes).map(node => ({
244256
name: node.name,
245257
description: node.description || null,
246258
category: 'effect',
@@ -596,7 +608,7 @@
596608
};
597609
exports.default = amazonStyleDictionaryTransformer;
598610
});
599-
define("exportTokens", ["require", "exports", "extractor/extractColors", "extractor/extractGrids", "extractor/extractFonts", "extractor/extractEffects", "utilities/getTokenFrames", "utilities/groupByName", "transformer/amazonStyleDictionaryTransformer"], function (require, exports, extractColors_1, extractGrids_1, extractFonts_1, extractEffects_1, getTokenFrames_1, groupByName_1, amazonStyleDictionaryTransformer_1) {
611+
define("exportTokens", ["require", "exports", "extractor/extractColors", "extractor/extractGrids", "extractor/extractFonts", "extractor/extractEffects", "extractor/extractSizes", "extractor/extractBorders", "extractor/extractRadii", "utilities/getTokenFrames", "utilities/groupByName", "transformer/amazonStyleDictionaryTransformer"], function (require, exports, extractColors_1, extractGrids_1, extractFonts_1, extractEffects_1, extractSizes_1, extractBorders_1, extractRadii_1, getTokenFrames_1, groupByName_1, amazonStyleDictionaryTransformer_1) {
600612
"use strict";
601613
Object.defineProperty(exports, "__esModule", { value: true });
602614
const transformer = {
@@ -623,9 +635,9 @@
623635
const tokenFrames = getTokenFrames_1.default([...figma.root.children]);
624636
// get tokens
625637
return [
626-
// ...extractSizes(tokenFrames),
627-
// ...extractBorders(tokenFrames),
628-
// ...extractRadii(tokenFrames),
638+
...extractSizes_1.default(tokenFrames),
639+
...extractBorders_1.default(tokenFrames),
640+
...extractRadii_1.default(tokenFrames),
629641
...extractColors_1.default(figma.getLocalPaintStyles()),
630642
...extractGrids_1.default(figma.getLocalGridStyles()),
631643
...extractFonts_1.default(figma.getLocalTextStyles()),
@@ -635,13 +647,10 @@
635647
const tokenExport = (figma, format = 'amazon') => {
636648
// get token array
637649
const tokenArray = exportRawTokenArray(figma);
638-
console.log('JSON TOKEN', tokenArray);
639650
// format tokens
640651
const formattedTokens = tokenArray.map((token) => transformer[format](token));
641-
console.log('formatted Tokens', formattedTokens);
642652
// group tokens
643653
const groupedTokens = groupByName_1.default(formattedTokens);
644-
console.log('grouped Tokens', groupedTokens);
645654
// write tokens to json file
646655
sendJsonToUi(groupedTokens);
647656
};
@@ -661,7 +670,6 @@
661670
// run different functions depending on the provided command
662671
//
663672
// EXPORT
664-
console.log('index.ts');
665673
// exports the design tokens
666674
if (figma.command === 'export') {
667675
exportTokens_1.default(figma);

‎src/exportTokens.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ const exportRawTokenArray = (figma: PluginAPI) => {
3737
const tokenFrames = getTokenFrames([...figma.root.children])
3838
// get tokens
3939
return [
40-
// ...extractSizes(tokenFrames),
41-
// ...extractBorders(tokenFrames),
42-
// ...extractRadii(tokenFrames),
40+
...extractSizes(tokenFrames),
41+
...extractBorders(tokenFrames),
42+
...extractRadii(tokenFrames),
4343
...extractColors(figma.getLocalPaintStyles()),
4444
...extractGrids(figma.getLocalGridStyles()),
4545
...extractFonts(figma.getLocalTextStyles()),
@@ -50,13 +50,10 @@ const exportRawTokenArray = (figma: PluginAPI) => {
5050
const tokenExport = (figma: PluginAPI, format: string = 'amazon') => {
5151
// get token array
5252
const tokenArray = exportRawTokenArray(figma)
53-
console.log('JSON TOKEN', tokenArray)
5453
// format tokens
5554
const formattedTokens = tokenArray.map((token: convertedPropertyObject )=> transformer[format](token))
56-
console.log('formatted Tokens', formattedTokens)
5755
// group tokens
5856
const groupedTokens = groupByName(formattedTokens)
59-
console.log('grouped Tokens', groupedTokens)
6057
// write tokens to json file
6158
sendJsonToUi(groupedTokens)
6259
}

‎src/extractor/extractColors.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import extractorInterface from '../../types/extractorInterface'
22
import { colorPropertyInterface, colorRgbaType, propertyType } from '../../types/propertyObject'
33
import { convertPaintToRgba } from '../utilities/convertColor'
4+
import getTokenStyles from '../utilities/getTokenStyles'
45

56
const extractColors: extractorInterface = (tokenNodes: PaintStyle[]): colorPropertyInterface[] => {
67
// get all paint styles
7-
return tokenNodes.map(node => ({
8+
return getTokenStyles(tokenNodes).map(node => ({
89
name: node.name,
910
// id: node.id,
1011
description: node.description || null,

‎src/extractor/extractEffects.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import extractorInterface from '../../types/extractorInterface'
22
import { effectPropertyInterface, propertyType } from '../../types/propertyObject'
33
import { roundRgba } from '../utilities/convertColor'
4+
import getTokenStyles from '../utilities/getTokenStyles'
45

56
const effectType = {
67
"LAYER_BLUR": 'layerBlur',
@@ -56,7 +57,7 @@ const shadowValues = effect => ({
5657

5758
const extractEffects: extractorInterface = (tokenNodes: EffectStyle[]): effectPropertyInterface[] => {
5859
// get effect styles
59-
return tokenNodes.map(node => ({
60+
return getTokenStyles(tokenNodes).map(node => ({
6061
name: node.name,
6162
description: node.description || null,
6263
category: 'effect',

‎src/extractor/extractFonts.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import extractorInterface from '../../types/extractorInterface'
22
import { fontPropertyInterface, textDecorationType, lineHeightUnitType, textCaseType, propertyType, numericUnits } from '../../types/propertyObject'
3+
import getTokenStyles from '../utilities/getTokenStyles'
34
import roundWithDecimals from '../utilities/roundWithDecimals'
45

56
const textDecorations = {
@@ -17,7 +18,7 @@ const textCases = {
1718

1819
const extractFonts: extractorInterface = (tokenNodes: TextStyle[]): fontPropertyInterface[] => {
1920
// get raw text styles
20-
return tokenNodes.map(node => ({
21+
return getTokenStyles(tokenNodes).map(node => ({
2122
name: node.name,
2223
description: node.description || undefined,
2324
values: {

‎src/extractor/extractGrids.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import extractorInterface from '../../types/extractorInterface'
22
import { gridAlignmentType, gridPatternType, gridPropertyInterface, propertyType } from '../../types/propertyObject'
3+
import getTokenStyles from '../utilities/getTokenStyles'
34

45
const gridValues = (grid: GridLayoutGrid) => ({
56
pattern: {
@@ -56,7 +57,7 @@ const rowColumnValues = (grid: RowsColsLayoutGrid) => ({
5657

5758
const extractGrids: extractorInterface = (tokenNodes: GridStyle[]): gridPropertyInterface[] => {
5859
// get grid styles
59-
return tokenNodes.map(node => ({
60+
return getTokenStyles(tokenNodes).map(node => ({
6061
name: node.name,
6162
description: node.description || null,
6263
category: 'grid',

‎src/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ figma.showUI(__html__, {visible: false})
1212
// run different functions depending on the provided command
1313
//
1414
// EXPORT
15-
console.log('index.ts')
1615
// exports the design tokens
1716
if(figma.command === 'export') {
1817
exportTokens(figma)

‎src/utilities/getTokenStyles.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const excludeUnderscoreStyles = true
2+
3+
const getTokenStyles = (styles: BaseStyle[]): BaseStyle[] => {
4+
if (excludeUnderscoreStyles === true) {
5+
return styles.filter(style => style.name.trim().substr(0, 1) !== '_')
6+
}
7+
return styles
8+
}
9+
10+
export default getTokenStyles

0 commit comments

Comments
 (0)