style-dictionary to figma attribute transform

attribute-figma.ts

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;