Add Figma metadata to config object

formats/figma.json.js

@@ -0,0 +1,19 @@
+const tinycolor2 = require('tinycolor2');
+
+module.exports = (result) =>
+  JSON.stringify(
+    result.toJS().props.map((prop) => {
+      const {name, value, meta} = prop;
+
+      const returnValue = {
+        name,
+        value: tinycolor2(value).toRgb(),
+      };
+
+      if (meta && meta.figmaName) {
+        returnValue.figmaName = meta.figmaName;
+      }
+
+      return returnValue;
+    }),
+  );

formats/tokens.js

@@ -17,7 +17,11 @@ function tokenify(scheme) {
     const palette = colorFactory(theme, scheme, configArg);
 
     const yml = Object.entries(palette).reduce((accumulator, [key, value]) => {
-      return `${accumulator}  - name: ${key}\n    value: '${value}'\n`;
+      const figmaName = findFigmaName(configArg, key);
+
+      return `${accumulator}  - name: ${key}\n    value: '${value}'\n${figmaMetaData(
+        figmaName,
+      )}`;
     }, '');
 
     return `props:\n${yml}global:\n  type: color\n  category: background-color\n`;
@@ -34,4 +38,23 @@ function tokensToJson(data) {
   );
 }
 
+function figmaMetaData(name) {
+  return name == null ? '' : `    meta:\n      figmaName: ${name}\n`;
+}
+
+function findFigmaName(config, key) {
+  if (config == null) return null;
+
+  let returnValue;
+  Object.values(config).forEach((variants) => {
+    const found = variants.find((variant) => variant.name === key);
+
+    if (found && found.meta && found.meta.figmaName) {
+      returnValue = found.meta.figmaName;
+    }
+  });
+
+  return returnValue;
+}
+
 module.exports = {tokenify};

gulpfile.js

@@ -80,6 +80,7 @@ const {tokenify} = require('./formats/tokens');
 theo.registerTransform('theme', ['color/hex']);
 theo.registerFormat('light.yml', tokenify('light'));
 theo.registerFormat('dark.yml', tokenify('dark'));
+theo.registerFormat('figma.json', require('./formats/figma.json.js'));
 
 const colorSchemes = [
   {transformType: 'raw', formatType: 'light.yml'},
@@ -90,6 +91,7 @@ const colorSystemFormats = [
   {transformType: 'web/js', formatType: 'json'},
   {transformType: 'android', formatType: 'android.xml'},
   {transformType: 'ios', formatType: 'ios.json'},
+  {transformType: 'raw', formatType: 'figma.json'},
 ];
 
 gulp.task('themes', (done) => {
@@ -125,7 +127,7 @@ gulp.task('palettes', (done) => {
           .pipe($.rename(addPrefix))
           .pipe(
             $.theo({
-              transform: {type: transformType},
+              transform: {type: transformType, includeMeta: true},
               format: {type: formatType},
             }),
           )