Skip to content

Instantly share code, notes, and snippets.

@mihkeleidast
Created July 18, 2022 11:27
Show Gist options
  • Save mihkeleidast/4c05f75f61fa52ac80a56de35b4a6beb to your computer and use it in GitHub Desktop.
Save mihkeleidast/4c05f75f61fa52ac80a56de35b4a6beb to your computer and use it in GitHub Desktop.
style-dictionary to figma attribute transform
import { Named, Transform } from 'style-dictionary';
const transform: Named<Transform> = {
name: 'attribute/figma',
type: 'attribute',
matcher: (token) => {
const category = token.attributes?.category ?? '';
return ['color', 'size', 'shadow', 'fontFamily', 'fontWeight', 'font'].includes(category);
},
transformer: (token) => {
const category = token.attributes?.category ?? '';
const type = token.attributes?.type ?? '';
switch (category) {
case 'color': {
token.type = 'color';
break;
}
case 'shadow': {
token.type = 'boxShadow';
break;
}
case 'size': {
switch (type) {
case 'spacing': {
token.type = 'spacing';
break;
}
case 'font': {
token.type = 'fontSizes';
break;
}
case 'lineHeight': {
token.type = 'lineHeights';
break;
}
default: {
token.type = 'size';
break;
}
}
break;
}
case 'fontFamily': {
token.type = 'fontFamilies';
break;
}
case 'fontWeight': {
token.type = 'fontWeights';
break;
}
case 'font': {
token.type = 'typography';
break;
}
}
return token.attributes || {};
},
};
export default transform;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment