diff --git a/figmaExtractor/figmaExtractor.js b/figmaExtractor/figmaExtractor.js
index 4937ac4f..f1d5956d 100644
--- a/figmaExtractor/figmaExtractor.js
+++ b/figmaExtractor/figmaExtractor.js
@@ -17,7 +17,8 @@ const config = {
       frame: 'FRAME',
       group: 'GROUP',
       text: 'TEXT',
-      rectangle: 'RECTANGLE'
+      rectangle: 'RECTANGLE',
+      component: 'COMPONENT'
     },
     styleTypes: {
       color: 'color',
@@ -41,6 +42,7 @@ const config = {
 
     const figmaData = await figmaApi(apiConfig);
     const figmaFrames = getFigmaFrames(figmaData, config);
+
     const figmaJson = getFigmaJson(figmaFrames, config);
 
     writeJson(figmaJson, config);
diff --git a/figmaExtractor/figmaJson.js b/figmaExtractor/figmaJson.js
index a47c0185..9a28f52b 100644
--- a/figmaExtractor/figmaJson.js
+++ b/figmaExtractor/figmaJson.js
@@ -31,16 +31,17 @@ const buildFinalJson = (children, finalJson, figmaType, styleProperty, config) =
   while (children.length > 0) {
     const child = children.pop();
 
-    if (child.type === figmaType) {
+    if (child.type === config.figma.childTypes.component) {
+      const realChild = child.children[0];
       let value;
 
       if (styleProperty === config.figma.styleTypes.color) {
-        value = rgbaToHex(child.fills[0].color);
+        value = rgbaToHex(realChild.fills[0].color);
       } else if (styleProperty === config.figma.styleTypes.fontSize) {
-        value = child.style.fontSize;
+        value = realChild.style.fontSize;
       }
 
-      finalJson[child.name] = {
+      finalJson[realChild.name] = {
         value: value
       };
     } else if (child.type === config.figma.childTypes.group) {
@@ -77,4 +78,5 @@ module.exports = (frames, config) => {
       }
     }
   };
+
 };