├── .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 | 
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
--------------------------------------------------------------------------------