Handle opacity scope

README.md

@@ -47,6 +47,7 @@ The plugin converts Figma variables into design-tokens JSON that are compatible
     - [Handle modes](#handle-modes)
   - [Variables types conversion](#variables-types-conversion)
   - [Design tokens types](#design-tokens-types)
+  - [Scopes lemitations](#scopes-lemitations)
   - [Style Dictionary support](#style-dictionary-support)
   - [Contribution 🚧](#contribution-)
   - [Feedback](#feedback)
@@ -517,6 +518,15 @@ In order to validate types, the plugin uses the [Design Tokens types](https://gi
 
 ---
 
+## Scopes lemitations
+
+In order to convert `FONT-WEIGHT` and `OPACITY` types into valid values you should specify thme as scopes in the Figma variables. The plugin will read the first scope and convert it into the valid value. If there are multiple scopes, the plugin will take the first one.
+
+- `FONT_WEIGHT` scope will be converted into `string` type.
+- `OPACITY` scope will be converted into `number` type.
+
+---
+
 ## Style Dictionary support
 
 There is a set of utils for [Style Dictionary](https://github.com/tokens-bruecke/sd-utils).
@@ -656,4 +666,9 @@ If you have any questions or suggestions, feel free to [create an issue](https:/
 
 **2.2.2**
 
-- Do not convert the value to PX units if the variable scope is `FONT_WEIGHT`
+- Do not convert the value to PX units if the variable scope is `FONT_WEIGHT`
+
+
+**2.2.3**
+
+- Convert `OPACITY` scope to valid value using this formula `value / 100`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokens-bruecke",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "license": "MIT",
   "author": {
     "name": "Pavel Laptev",

src/app/SettingsView/index.tsx

@@ -672,7 +672,7 @@ export const SettingsView = (props: ViewProps) => {
               <Text>Documentation</Text>
             </a>
             <a href={config.changelogLink} target="_blank">
-              <Text>v.2.2.2</Text>
+              <Text>v.2.2.3</Text>
             </a>
           </Stack>
         </Panel>

src/utils/normalizeValue.ts

@@ -42,6 +42,8 @@ export const normalizeValue = (props: PropsI) => {
   if (variableType === "FLOAT") {
     if (variableScope.length === 1 && variableScope[0] === "FONT_WEIGHT") {
       return `${variableValue}`;
+    } else if (variableScope.length === 1 && variableScope[0] === "OPACITY") {
+      return Number(variableValue) / 100;
     } else {
       return `${variableValue}px`
     }

src/utils/normilizeType.ts

@@ -3,16 +3,19 @@ export const normilizeType = (type: VariableResolvedDataType, variableScopes: Va
     case "COLOR":
       return "color";
     case "FLOAT":
-      if (variableScopes.length === 1 && variableScopes[0] === "FONT_WEIGHT") {
-        return "string";
+      if (variableScopes.length === 1 ) {
+        if (variableScopes[0] === "FONT_WEIGHT") {
+          return "string";
+        } else if (variableScopes[0] === "OPACITY") {
+          return "number";
+        }
       } else {
         return "dimension";
       }
     case "STRING":
       return "string";
     case "BOOLEAN":
       return "boolean";
-
     default:
       return "string";
   }

src/utils/variablesToTokens.ts

@@ -105,7 +105,7 @@ export const variablesToTokens = async (
     });
   });
 
-  console.log("emptyCollection", emptyCollection);
+  // console.log("emptyCollection", emptyCollection);
 
   const mergedVariables = emptyCollection.reduce((result, collection) => {
     return {