minerva-figma-plugin/src/plugin/controller.ts at master · cratebind/minerva-figma-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
figma.showUI(__html__, { width: 500, height: 700 });

const getComponents = (root, components = []) => {
  root.children.forEach(child => {
    if (child.type === 'COMPONENT') {
      components.push(child);
    }

    if (child.children && child.children.length > 0) {
      getComponents(child, components);
    }
  });

  return components;
};

const convertColor = color => {
  const { r, g, b } = color;
  return `rgb(${(r * 255).toFixed()}, ${(g * 255).toFixed()}, ${(
    b * 255
  ).toFixed()})`;
};

figma.ui.onmessage = msg => {
  // if (msg.type === 'create-rectangles') {
  //     const nodes = [];

  //     for (let i = 0; i < msg.count; i++) {
  //         const rect = figma.createRectangle();
  //         rect.x = i * 150;
  //         rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
  //         figma.currentPage.appendChild(rect);
  //         nodes.push(rect);
  //     }

  //     figma.currentPage.selection = nodes;
  //     figma.viewport.scrollAndZoomIntoView(nodes);

  //     // This is how figma responds back to the ui
  //     figma.ui.postMessage({
  //         type: 'create-rectangles',
  //         message: `Created ${msg.count} Rectangles`,
  //     });
  // }
  const components = getComponents(figma.root);
  const styles = {
    Button: {},
    Text: {}
  };

  console.log(components.map(component => component.name));

  components.forEach(component => {
    if (component.name === 'Buttons/Primary/Normal') {
      console.log(component);
      // console.log(component.children);
      // const [containerStyles, textStyles] = component.children;
      const containerStyles = component;
      const textStyles = component.children[0];
      const {
        fills,
        height,
        cornerRadius,
        verticalPadding,
        horizontalPadding
      } = containerStyles;
      const { fontSize, fontName, letterSpacing, lineHeight } = textStyles;
      console.log({ fills, fontName });
      styles.Button = {
        container: {
          backgroundColor: convertColor(fills[0].color),
          borderRadius: cornerRadius,
          height,
          paddingTop: verticalPadding,
          paddingBottom: verticalPadding,
          paddingLeft: horizontalPadding,
          paddingRight: horizontalPadding
        },
        text: {
          fontSize,
          letterSpacing,
          lineHeight
          // fontFamily: fontName.family,
          // fontWeight: fontName.style.toLowerCase()
        }
      };
    }

    if (component.name === 'Body Text') {
      const textNode = component.children[0];
      const { fontSize, lineHeight, opacity, fills } = textNode;
      const color = convertColor(fills[0].color);

      styles.Text = {
        fontSize,
        lineHeight: `${lineHeight.value}${
          lineHeight.unit === 'PIXELS' ? 'px' : '%'
        }`,
        opacity,
        color
      };
    }
  });

  if (msg.type === 'save-colors') {
    figma.ui.postMessage({
      type: 'export-styles',
      message: styles
    });
    // console.log(figma.getLocalPaintStyles())
  }

  // figma.closePlugin();
};