diff --git a/pages/variables/_meta.en.json b/pages/variables/_meta.en.json index 282c9cb..b016b18 100644 --- a/pages/variables/_meta.en.json +++ b/pages/variables/_meta.en.json @@ -1,4 +1,5 @@ { "creating-variables": "Creating variables", - "references": "References" + "references": "References", + "importing-variables": "Importing variables" } diff --git a/pages/variables/importing-variables.en.mdx b/pages/variables/importing-variables.en.mdx new file mode 100644 index 0000000..5aebc4b --- /dev/null +++ b/pages/variables/importing-variables.en.mdx @@ -0,0 +1,57 @@ +# Importing variables + +import Callout from 'nextra-theme-docs/callout' + +Importing Variables Into Tokens Studio for Figma= + +Already have variables setup in your file but want to sync them into Tokens Studio for Figma? You can find the `Import Variables` option in the Styles & Variables menu at the bottom of the plugin. Once you click on ‘Import Variables’, you are presented with two options in the following modal. `Convert Numbers to Dimensions` and `Use REM for Dimension Values`. + +## Convert Numbers to Dimensions +--- +Converting Number Variables to Dimension Tokens + +With ‘Convert Numbers to Dimensions’ selected, number variables are converted to tokens under the `Dimension` type. + +**Note:** Spacing variables aren’t converted into tokens under the ‘Spacing’ type but are instead created as a token-group named `Spacing`, under the `Dimension` type. +If the option is unchecked then the same will be imported but under the `Number` type. + +## REM for Dimension Values +--- +Converting Number Variables to REM Tokens + +Selecting the ‘Use REM for Dimension Values’ option converts all your variables using numbers by dividing back for isntance a value of `16` to be `1 rem`. + +## Using References As Values +--- + + + - If your number value is a reference, then when have both import options checked the plugin's going to create tokens with the following value, `NaNrem` (Not a Number). + + - If you have numbers to dimensions unchecked and rem for dimensons checked, the plugin's going to create tokens with `Obeject Object` as values. + + +**NOTE:** To have the correct number references created as tokens, you need to have the option `Convert to Dimensions` checked and `REM for Dimension` unchecked. + +### NaNrem +NaNrem As Token Value With Incorrect Option Checked + +### Object Object +Object Object As Token Value With Incorrect Option Checked + +## Import Structure +--- +Translation of Variable Modes and Collections to Tokens Studio + +- Variable collections are imported as folders in the plugin +- Modes are imported as sets under their respective folders + +Converting Number Variables to REM Tokens + +## Limitations +- If you've imported variables and then create variables from tokens will not update your existing variables but will instead delete the collections. +- If any changes were made to your variables, you need to use the `Import Variables` function and not the `Sync Variables` function to update your tokens. + + + Importing variables doesn't officialy link/connect to tokens. So applying tokens won't apply its corresponding variable, yet. + + diff --git a/public/import-updated-variables.png b/public/import-updated-variables.png new file mode 100644 index 0000000..e51af6a Binary files /dev/null and b/public/import-updated-variables.png differ diff --git a/public/import-variables.png b/public/import-variables.png new file mode 100644 index 0000000..3088bfe Binary files /dev/null and b/public/import-variables.png differ diff --git a/public/modes-collections.png b/public/modes-collections.png new file mode 100644 index 0000000..4a87853 Binary files /dev/null and b/public/modes-collections.png differ diff --git a/public/number-to-dimension.png b/public/number-to-dimension.png new file mode 100644 index 0000000..8b8247f Binary files /dev/null and b/public/number-to-dimension.png differ diff --git a/public/rem-for-dimensions.png b/public/rem-for-dimensions.png new file mode 100644 index 0000000..ec5febb Binary files /dev/null and b/public/rem-for-dimensions.png differ diff --git a/public/value-nanrem.png b/public/value-nanrem.png new file mode 100644 index 0000000..a37b97b Binary files /dev/null and b/public/value-nanrem.png differ diff --git a/public/value-object-object.png b/public/value-object-object.png new file mode 100644 index 0000000..0d18a6d Binary files /dev/null and b/public/value-object-object.png differ