├── .gitignore ├── CHANGELOG.md ├── README.md └── artwork ├── cover art.png └── widget icon.png /.gitignore: -------------------------------------------------------------------------------- 1 | # Node 2 | *.log 3 | *.log.* 4 | node_modules 5 | 6 | out/ 7 | dist/ 8 | code.js 9 | .DS_Store -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.4 - 8 jul 2023 (version 6) 2 | 3 | - Added settings tab 4 | - Add setting to switch color format in json output to HEX 5 | - When opacity is 100% the hex color will just be #000000 6 | - When opacity is < 100% the hex color will contain 2 extra values for the a channel (0-255) e.g 30% black = #0000004D 7 | - Add settings to exclude collections and variables that start with an underscore 8 | 9 | # v1.0.3 - 27 jun 2023 (version 5) 10 | 11 | - Fixed a bug when loading a alias from a different Collection 12 | - Added support for resizing the plugin window 13 | 14 | # v1.0.2 - 26 jun 2023 (version 4) 15 | 16 | - Support for exporting local styles (Typography, Effects, Grids) 17 | 18 | # v1.0.1 - 25 jun 2023 (version 3) 19 | 20 | - Added proper UI with Light and Dark theme 21 | - Added support for exporting to a `json` file 22 | - Added link to github for feedback and issues 23 | - Support for all variables introduced on Figma Config 2023 24 | 25 | # v1.0.0 - 22 jun 2023 (version 2) 26 | 27 | - Basic export functionality 28 | - No UI 29 | 30 | # v0.0.1 - 21 jun 2023 (version 1) 31 | 32 | - Initial release with super basic functionality 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ![Cover artwork](https://github.com/mark-nicepants/variables2json-docs/blob/main/artwork/cover%20art.png?raw=true) 3 | 4 | # Figma plugin: variables2json 5 | `variables2json` is a plugin for Figma that simplifies the process of exporting publishable variables and saving them in a JSON file. 6 | 7 | With this plugin, you can easily view and export variables of various types, including color, number, string, boolean, and aliasses are automatically resolved. 8 | 9 | When combined with code generation tools it provides a powerful way to integrate Figma designs with your codebase. 10 | 11 | ## Installation & usage 12 | To install the variables2json plugin, follow these steps: 13 | 14 | - Download and install the Figma desktop app. 15 | - Search `variables2json` in the Figma Community plugins section. 16 | - Within your Figma project, type `variables2json` in the command bar to open the plugin. 17 | - Click the download button in the footer to export the variables to a JSON file. 18 | 19 | ## Supported Variables 20 | `variables2json` supports the following variable types for extraction: 21 | - ✅ Color 22 | - ✅ Number 23 | - ✅ String 24 | - ✅ Boolean 25 | - ✅ Alias 26 | 27 | ## Local styles 28 | `variables2json` supports local styles for typography, effects and grids. 29 | - ✅ Textstyles 30 | - ✅ Effects 31 | - ✅ Grids 32 | 33 | ## Features in Development 34 | The `variables2json` plugin is continuously being improved, and the following features are currently under development: 35 | 36 | - 🚧 Composites: Assign metadata to Frames and group variables and styles together for powerful organization and management. 37 | - 🚧 Git Sync: Synchronize variables with a Git repository for version control and collaborative workflows. 38 | 39 | ## Explantion of the JSON file 40 | 41 |
42 | Example JSON output 43 | 44 | ```json 45 | { 46 | "version": "1.0.2", 47 | "metadata": {}, 48 | "collections": [ 49 | { 50 | "name": "Theme", 51 | "modes": [ 52 | { 53 | "name": "Light", 54 | "variables": [ 55 | { 56 | "name": "insult", 57 | "type": "string", 58 | "value": "Yo" 59 | }, 60 | { 61 | "name": "bigGap", 62 | "type": "number", 63 | "value": 54 64 | }, 65 | { 66 | "name": "Colors/panelBg", 67 | "type": "color", 68 | "value": { 69 | "r": 255, 70 | "g": 255, 71 | "b": 255, 72 | "a": 1 73 | } 74 | }, 75 | { 76 | "name": "Colors/divider", 77 | "type": "color", 78 | "value": { 79 | "r": 229, 80 | "g": 229, 81 | "b": 229, 82 | "a": 1 83 | } 84 | }, 85 | { 86 | "name": "Colors/selected", 87 | "type": "color", 88 | "value": { 89 | "r": 0, 90 | "g": 0, 91 | "b": 0, 92 | "a": 0.1 93 | } 94 | }, 95 | { 96 | "name": "Colors/icon", 97 | "type": "color", 98 | "value": { 99 | "r": 0, 100 | "g": 0, 101 | "b": 0, 102 | "a": 1 103 | } 104 | }, 105 | { 106 | "name": "Mr Boolean", 107 | "type": "boolean", 108 | "value": false 109 | }, 110 | { 111 | "name": "buttonPrimary", 112 | "type": "color", 113 | "value": { 114 | "r": 0, 115 | "g": 255, 116 | "b": 25, 117 | "a": 1 118 | } 119 | }, 120 | { 121 | "name": "Colors/windowBackground", 122 | "type": "color", 123 | "value": { 124 | "r": 255, 125 | "g": 255, 126 | "b": 255, 127 | "a": 1 128 | } 129 | }, 130 | { 131 | "name": "Colors/panelFg", 132 | "type": "color", 133 | "value": { 134 | "r": 44, 135 | "g": 44, 136 | "b": 44, 137 | "a": 1 138 | } 139 | }, 140 | { 141 | "name": "Colors/mutedText", 142 | "type": "color", 143 | "value": { 144 | "r": 0, 145 | "g": 0, 146 | "b": 0, 147 | "a": 0.3 148 | } 149 | }, 150 | { 151 | "name": "smallGap", 152 | "type": "number", 153 | "value": 4 154 | }, 155 | { 156 | "name": "Colors/primaryText", 157 | "type": "color", 158 | "value": { 159 | "r": 0, 160 | "g": 0, 161 | "b": 0, 162 | "a": 1 163 | } 164 | } 165 | ] 166 | }, 167 | { 168 | "name": "Dark", 169 | "variables": [ 170 | { 171 | "name": "insult", 172 | "type": "string", 173 | "value": "mama" 174 | }, 175 | { 176 | "name": "bigGap", 177 | "type": "number", 178 | "value": 108 179 | }, 180 | { 181 | "name": "Colors/panelBg", 182 | "type": "color", 183 | "value": { 184 | "r": 255, 185 | "g": 255, 186 | "b": 255, 187 | "a": 0.1 188 | } 189 | }, 190 | { 191 | "name": "Colors/divider", 192 | "type": "color", 193 | "value": { 194 | "r": 68, 195 | "g": 68, 196 | "b": 68, 197 | "a": 1 198 | } 199 | }, 200 | { 201 | "name": "Colors/selected", 202 | "type": "color", 203 | "value": { 204 | "r": 255, 205 | "g": 255, 206 | "b": 255, 207 | "a": 0.1 208 | } 209 | }, 210 | { 211 | "name": "Colors/icon", 212 | "type": "color", 213 | "value": { 214 | "r": 255, 215 | "g": 255, 216 | "b": 255, 217 | "a": 1 218 | } 219 | }, 220 | { 221 | "name": "Mr Boolean", 222 | "type": "boolean", 223 | "value": true 224 | }, 225 | { 226 | "name": "buttonPrimary", 227 | "type": "color", 228 | "value": { 229 | "r": 45, 230 | "g": 4, 231 | "b": 4, 232 | "a": 1 233 | } 234 | }, 235 | { 236 | "name": "Colors/windowBackground", 237 | "type": "color", 238 | "value": { 239 | "r": 44, 240 | "g": 44, 241 | "b": 44, 242 | "a": 1 243 | } 244 | }, 245 | { 246 | "name": "Colors/panelFg", 247 | "type": "color", 248 | "value": { 249 | "r": 255, 250 | "g": 255, 251 | "b": 255, 252 | "a": 1 253 | } 254 | }, 255 | { 256 | "name": "Colors/mutedText", 257 | "type": "color", 258 | "value": { 259 | "r": 255, 260 | "g": 255, 261 | "b": 255, 262 | "a": 0.3 263 | } 264 | }, 265 | { 266 | "name": "smallGap", 267 | "type": "number", 268 | "value": 8 269 | }, 270 | { 271 | "name": "Colors/primaryText", 272 | "type": "color", 273 | "value": { 274 | "r": 255, 275 | "g": 255, 276 | "b": 255, 277 | "a": 1 278 | } 279 | } 280 | ] 281 | } 282 | ] 283 | }, 284 | { 285 | "name": "Typography", 286 | "modes": [ 287 | { 288 | "name": "Style", 289 | "variables": [ 290 | { 291 | "name": "DefaultText", 292 | "type": "typography", 293 | "value": { 294 | "fontSize": 11, 295 | "fontFamily": "Inter", 296 | "fontWeight": "Semi Bold", 297 | "lineHeight": 16, 298 | "lineHeightUnit": "PIXELS", 299 | "letterSpacing": -1, 300 | "letterSpacingUnit": "PERCENT", 301 | "textCase": "ORIGINAL", 302 | "textDecoration": "NONE" 303 | } 304 | }, 305 | { 306 | "name": "SmallText", 307 | "type": "typography", 308 | "value": { 309 | "fontSize": 9, 310 | "fontFamily": "Inter", 311 | "fontWeight": "Regular", 312 | "lineHeight": 11, 313 | "lineHeightUnit": "PIXELS", 314 | "letterSpacing": -1, 315 | "letterSpacingUnit": "PERCENT", 316 | "textCase": "ORIGINAL", 317 | "textDecoration": "NONE" 318 | } 319 | }, 320 | { 321 | "name": "RegularText", 322 | "type": "typography", 323 | "value": { 324 | "fontSize": 11, 325 | "fontFamily": "Inter", 326 | "fontWeight": "Regular", 327 | "lineHeight": 16, 328 | "lineHeightUnit": "PIXELS", 329 | "letterSpacing": -1, 330 | "letterSpacingUnit": "PERCENT", 331 | "textCase": "ORIGINAL", 332 | "textDecoration": "NONE" 333 | } 334 | } 335 | ] 336 | } 337 | ] 338 | }, 339 | { 340 | "name": "Effects", 341 | "modes": [ 342 | { 343 | "name": "Style", 344 | "variables": [ 345 | { 346 | "name": "cardDropShadow", 347 | "type": "effect", 348 | "value": { 349 | "effects": [ 350 | { 351 | "type": "DROP_SHADOW", 352 | "color": { 353 | "r": 84, 354 | "g": 255, 355 | "b": 0, 356 | "a": 0.25 357 | }, 358 | "offset": { 359 | "x": 0, 360 | "y": 4 361 | }, 362 | "radius": 4, 363 | "spread": 0 364 | } 365 | ] 366 | } 367 | } 368 | ] 369 | } 370 | ] 371 | }, 372 | { 373 | "name": "Grids", 374 | "modes": [ 375 | { 376 | "name": "Style", 377 | "variables": [ 378 | { 379 | "name": "desktop", 380 | "type": "grid", 381 | "value": { 382 | "layoutGrids": [ 383 | { 384 | "pattern": "COLUMNS", 385 | "color": { 386 | "r": 233, 387 | "g": 27, 388 | "b": 200, 389 | "a": 0.1 390 | }, 391 | "alignment": "STRETCH", 392 | "gutterSize": 5, 393 | "offset": 10, 394 | "count": 5 395 | } 396 | ] 397 | } 398 | } 399 | ] 400 | } 401 | ] 402 | } 403 | ] 404 | } 405 | ``` 406 |
407 | 408 | The provided JSON structure represents a configuration file that stores variables for different modes (in this case, "Light" and "Dark") within a collection named "Theme." Here's an explanation of the different components and their meanings: 409 | 410 | - version: Specifies the version number of the JSON structure or file format. 411 | - metadata: An empty object that can be used to store additional information about the JSON file. 412 | - collections: An array containing collections of variables. 413 | - name: The name of the collection ("Theme" in this case). 414 | - modes: An array of modes within the collection. 415 | - name: The name of the mode ("Light" or "Dark" in this case). 416 | - variables: An array of variables within the mode. 417 | - name: The name of the variable. 418 | - type: The type of the variable (string, number, color, or boolean). 419 | - value: The value of the variable, which can be a string, number, color object, text object, effect object or boolean. 420 | 421 | In the provided example, there are two modes, "Light" and "Dark," each containing several variables of different types (string, number, color, and boolean). The color values are represented using an object with "r," "g," "b," and "a" properties, representing the red, green, blue, and alpha channels, respectively. 422 | 423 | - The "Typography" collection has variables representing typography-related properties, such as font size, font family, etc. 424 | - The "Effects" collection has variables representing different visual effects, like drop shadow. 425 | - The "Grids" collection has variables representing different grid layouts. 426 | 427 | The JSON structure allows you to define and store variables in a structured format, making it easier to manage and utilize them in your application or project. 428 | 429 | ## Tips for Users 430 | Here are some tips to enhance your experience with the variables2json plugin: 431 | 432 | - Organize your variables: Maintain a clear and consistent naming convention for your variables to ensure easy identification and management. 433 | - Regularly update the JSON file: Whenever you make changes to your variables, remember to export and update the JSON file to keep it up to date. 434 | - Leverage composites: Once the composites feature is released, use it to group related variables and styles together, allowing for more efficient utilization. 435 | - Submit issues for personalized support: If you encounter any problems or have specific requirements, feel free to submit an issue on the plugin's repository. Our team will provide personalized assistance. 436 | 437 | ## Feedback and Support 438 | We appreciate your feedback and strive to improve the `variables2json` plugin continuously. If you have any suggestions, issues, or feature requests, please visit the [repo](https://github.com/mark-nicepants/variables2json-docs) and submit an issue. -------------------------------------------------------------------------------- /artwork/cover art.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mark-nicepants/variables2json-docs/7675e29cbb2c865b111a0016719ff410bb0e6cef/artwork/cover art.png -------------------------------------------------------------------------------- /artwork/widget icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mark-nicepants/variables2json-docs/7675e29cbb2c865b111a0016719ff410bb0e6cef/artwork/widget icon.png --------------------------------------------------------------------------------