@figma-vars/hooks 1.3.1 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -1
- package/dist/index.d.ts +361 -76
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
# @figma-vars/hooks
|
|
2
2
|
|
|
3
|
+
<p align="left">
|
|
4
|
+
<img src="assets/figma-vars-tagline-light.png" alt="FigmaVars Logo" width="700px" />
|
|
5
|
+
</p>
|
|
6
|
+
|
|
3
7
|
A fast, typed React 19 hooks library for the Figma Variables API: fetch, update, and manage design tokens via the official [Figma REST API](https://www.figma.com/developers/api#variables).
|
|
4
8
|
|
|
5
9
|
Built for the modern web, this library provides a suite of hooks to fetch, manage, and mutate your design tokens, making it easy to sync them between Figma and your React applications, Storybooks, or design system dashboards.
|
|
6
10
|
|
|
7
11
|

|
|
8
12
|

|
|
13
|
+
[](https://codecov.io/gh/marklearst/figma-vars-hooks)
|
|
9
14
|

|
|
10
15
|

|
|
11
16
|

|
|
@@ -196,5 +201,5 @@ PRs and issues are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for gu
|
|
|
196
201
|
|
|
197
202
|
## 📝 License
|
|
198
203
|
|
|
199
|
-
This project is licensed under the [MIT License](LICENSE).
|
|
204
|
+
This project is licensed under the [MIT License](LICENSE).
|
|
200
205
|
© 2024–2025 Mark Learst
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
2
|
-
import { MutationResult as MutationResult_2 } from '
|
|
2
|
+
import { MutationResult as MutationResult_2 } from '../types/mutations';
|
|
3
|
+
import { MutationResult as MutationResult_3 } from '..';
|
|
3
4
|
import { ReactNode } from 'react';
|
|
4
5
|
|
|
5
6
|
/**
|
|
@@ -8,7 +9,7 @@ import { ReactNode } from 'react';
|
|
|
8
9
|
* This corresponds to the `POST /v1/files/:file_key/variables` endpoint.
|
|
9
10
|
* Note: Figma has deprecated this complex endpoint in favor of simpler, more granular ones.
|
|
10
11
|
* This type is kept for legacy purposes but its usage is not recommended.
|
|
11
|
-
*
|
|
12
|
+
*
|
|
12
13
|
* @typedef {Object} BulkUpdatePayload
|
|
13
14
|
* @memberof Types
|
|
14
15
|
* @since 1.0.0
|
|
@@ -20,18 +21,45 @@ import { ReactNode } from 'react';
|
|
|
20
21
|
*/
|
|
21
22
|
export declare interface BulkUpdatePayload {
|
|
22
23
|
/** A list of changes to variable collections. */
|
|
23
|
-
variableCollections?: VariableCollectionChange[]
|
|
24
|
+
variableCollections?: VariableCollectionChange[]
|
|
24
25
|
/** A list of changes to variable modes. */
|
|
25
|
-
variableModes?: VariableModeChange[]
|
|
26
|
+
variableModes?: VariableModeChange[]
|
|
26
27
|
/** A list of changes to variables. */
|
|
27
|
-
variables?: VariableChange[]
|
|
28
|
+
variables?: VariableChange[]
|
|
28
29
|
/** A list of changes to variable values in specific modes. */
|
|
29
|
-
variableModeValues?: VariableModeValue[]
|
|
30
|
+
variableModeValues?: VariableModeValue[]
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
/**
|
|
33
|
-
* The
|
|
34
|
+
* The payload for the `bulkUpdateVariables` function.
|
|
35
|
+
* Allows creating, updating, and deleting multiple variables, collections, and modes in one call.
|
|
36
|
+
* This corresponds to the `POST /v1/files/:file_key/variables` endpoint.
|
|
37
|
+
* Note: Figma has deprecated this complex endpoint in favor of simpler, more granular ones.
|
|
38
|
+
* This type is kept for legacy purposes but its usage is not recommended.
|
|
34
39
|
*
|
|
40
|
+
* @typedef {Object} BulkUpdatePayload
|
|
41
|
+
* @memberof Types
|
|
42
|
+
* @since 1.0.0
|
|
43
|
+
* @see {@link https://www.figma.com/developers/api#post-variables|Figma API - Bulk Update Variables}
|
|
44
|
+
* @property {VariableCollectionChange[]} [variableCollections] A list of changes to variable collections.
|
|
45
|
+
* @property {VariableModeChange[]} [variableModes] A list of changes to variable modes.
|
|
46
|
+
* @property {VariableChange[]} [variables] A list of changes to variables.
|
|
47
|
+
* @property {VariableModeValue[]} [variableModeValues] A list of changes to variable values in specific modes.
|
|
48
|
+
*/
|
|
49
|
+
declare interface BulkUpdatePayload_2 {
|
|
50
|
+
/** A list of changes to variable collections. */
|
|
51
|
+
variableCollections?: VariableCollectionChange_2[];
|
|
52
|
+
/** A list of changes to variable modes. */
|
|
53
|
+
variableModes?: VariableModeChange_2[];
|
|
54
|
+
/** A list of changes to variables. */
|
|
55
|
+
variables?: VariableChange_2[];
|
|
56
|
+
/** A list of changes to variable values in specific modes. */
|
|
57
|
+
variableModeValues?: VariableModeValue_2[];
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* The response object returned by the `bulkUpdateVariables` function.
|
|
62
|
+
*
|
|
35
63
|
* @typedef {Object} BulkUpdateResponse
|
|
36
64
|
* @memberof Types
|
|
37
65
|
* @since 1.0.0
|
|
@@ -43,17 +71,17 @@ export declare interface BulkUpdatePayload {
|
|
|
43
71
|
* @property {Record<string, string>} [meta.tempIdToRealId] A mapping of temporary IDs to real IDs for created variables.
|
|
44
72
|
*/
|
|
45
73
|
export declare interface BulkUpdateResponse {
|
|
46
|
-
error: boolean
|
|
47
|
-
status: number
|
|
48
|
-
message?: string
|
|
74
|
+
error: boolean
|
|
75
|
+
status: number
|
|
76
|
+
message?: string
|
|
49
77
|
meta?: {
|
|
50
|
-
tempIdToRealId: Record<string, string
|
|
51
|
-
}
|
|
78
|
+
tempIdToRealId: Record<string, string>
|
|
79
|
+
}
|
|
52
80
|
}
|
|
53
81
|
|
|
54
82
|
/**
|
|
55
83
|
* Represents a color in RGBA format.
|
|
56
|
-
*
|
|
84
|
+
*
|
|
57
85
|
* @typedef {Object} Color
|
|
58
86
|
* @memberof Types
|
|
59
87
|
* @since 1.0.0
|
|
@@ -64,6 +92,29 @@ export declare interface BulkUpdateResponse {
|
|
|
64
92
|
* @property {number} a The alpha (opacity) channel value (0-1).
|
|
65
93
|
*/
|
|
66
94
|
export declare interface Color {
|
|
95
|
+
/** The red channel value (0-1). */
|
|
96
|
+
r: number
|
|
97
|
+
/** The green channel value (0-1). */
|
|
98
|
+
g: number
|
|
99
|
+
/** The blue channel value (0-1). */
|
|
100
|
+
b: number
|
|
101
|
+
/** The alpha (opacity) channel value (0-1). */
|
|
102
|
+
a: number
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Represents a color in RGBA format.
|
|
107
|
+
*
|
|
108
|
+
* @typedef {Object} Color
|
|
109
|
+
* @memberof Types
|
|
110
|
+
* @since 1.0.0
|
|
111
|
+
* @see {@link https://www.figma.com/developers/api#color-object|Figma Color Object}
|
|
112
|
+
* @property {number} r The red channel value (0-1).
|
|
113
|
+
* @property {number} g The green channel value (0-1).
|
|
114
|
+
* @property {number} b The blue channel value (0-1).
|
|
115
|
+
* @property {number} a The alpha (opacity) channel value (0-1).
|
|
116
|
+
*/
|
|
117
|
+
declare interface Color_2 {
|
|
67
118
|
/** The red channel value (0-1). */
|
|
68
119
|
r: number;
|
|
69
120
|
/** The green channel value (0-1). */
|
|
@@ -77,7 +128,7 @@ export declare interface Color {
|
|
|
77
128
|
/**
|
|
78
129
|
* The payload for the `createVariable` function.
|
|
79
130
|
* Defines the properties for a new variable.
|
|
80
|
-
*
|
|
131
|
+
*
|
|
81
132
|
* @typedef {Object} CreateVariablePayload
|
|
82
133
|
* @memberof Types
|
|
83
134
|
* @since 1.0.0
|
|
@@ -92,25 +143,59 @@ export declare interface Color {
|
|
|
92
143
|
* @property {Record<string, VariableValue>} [valuesByMode] Initial values for the variable by mode ID.
|
|
93
144
|
*/
|
|
94
145
|
export declare interface CreateVariablePayload {
|
|
146
|
+
/** The name of the new variable. */
|
|
147
|
+
name: string
|
|
148
|
+
/** The ID of the collection the new variable should be added to. */
|
|
149
|
+
variableCollectionId: string
|
|
150
|
+
/** The underlying data type for the new variable. */
|
|
151
|
+
resolvedType: ResolvedType
|
|
152
|
+
/** An optional description for the new variable. */
|
|
153
|
+
description?: string
|
|
154
|
+
/** Whether the new variable should be hidden when publishing. Defaults to `false`. */
|
|
155
|
+
hiddenFromPublishing?: boolean
|
|
156
|
+
/** The scopes in which this variable can be used. */
|
|
157
|
+
scopes?: VariableScope[]
|
|
158
|
+
/** Platform-specific code syntax for this variable. */
|
|
159
|
+
codeSyntax?: Record<string, string>
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* The payload for the `createVariable` function.
|
|
164
|
+
* Defines the properties for a new variable.
|
|
165
|
+
*
|
|
166
|
+
* @typedef {Object} CreateVariablePayload
|
|
167
|
+
* @memberof Types
|
|
168
|
+
* @since 1.0.0
|
|
169
|
+
* @see {@link https://www.figma.com/developers/api#post-variables|Figma API - Create Variable}
|
|
170
|
+
* @property {string} name The name of the new variable.
|
|
171
|
+
* @property {string} variableCollectionId The ID of the collection the new variable should be added to.
|
|
172
|
+
* @property {ResolvedType} resolvedType The underlying data type for the new variable.
|
|
173
|
+
* @property {string} [description] An optional description for the new variable.
|
|
174
|
+
* @property {boolean} [hiddenFromPublishing] Whether the new variable should be hidden when publishing. Defaults to `false`.
|
|
175
|
+
* @property {VariableScope[]} [scopes] The scopes in which this variable can be used.
|
|
176
|
+
* @property {Record<string, string>} [codeSyntax] Platform-specific code syntax for this variable.
|
|
177
|
+
* @property {Record<string, VariableValue>} [valuesByMode] Initial values for the variable by mode ID.
|
|
178
|
+
*/
|
|
179
|
+
declare interface CreateVariablePayload_2 {
|
|
95
180
|
/** The name of the new variable. */
|
|
96
181
|
name: string;
|
|
97
182
|
/** The ID of the collection the new variable should be added to. */
|
|
98
183
|
variableCollectionId: string;
|
|
99
184
|
/** The underlying data type for the new variable. */
|
|
100
|
-
resolvedType:
|
|
185
|
+
resolvedType: ResolvedType_2;
|
|
101
186
|
/** An optional description for the new variable. */
|
|
102
187
|
description?: string;
|
|
103
188
|
/** Whether the new variable should be hidden when publishing. Defaults to `false`. */
|
|
104
189
|
hiddenFromPublishing?: boolean;
|
|
105
190
|
/** The scopes in which this variable can be used. */
|
|
106
|
-
scopes?:
|
|
191
|
+
scopes?: VariableScope_2[];
|
|
107
192
|
/** Platform-specific code syntax for this variable. */
|
|
108
193
|
codeSyntax?: Record<string, string>;
|
|
109
194
|
}
|
|
110
195
|
|
|
111
196
|
/**
|
|
112
197
|
* Represents a collection of Figma variables, which can contain multiple modes.
|
|
113
|
-
*
|
|
198
|
+
*
|
|
114
199
|
* @typedef {Object} FigmaCollection
|
|
115
200
|
* @memberof Types
|
|
116
201
|
* @since 1.0.0
|
|
@@ -125,24 +210,24 @@ export declare interface CreateVariablePayload {
|
|
|
125
210
|
*/
|
|
126
211
|
export declare interface FigmaCollection {
|
|
127
212
|
/** The unique identifier for the collection. */
|
|
128
|
-
id: string
|
|
213
|
+
id: string
|
|
129
214
|
/** The name of the collection (e.g., "Brand Colors"). */
|
|
130
|
-
name: string
|
|
215
|
+
name: string
|
|
131
216
|
/** An array of modes available in this collection. */
|
|
132
|
-
modes: VariableMode[]
|
|
217
|
+
modes: VariableMode[]
|
|
133
218
|
/** The ID of the default mode for this collection. */
|
|
134
|
-
defaultModeId: string
|
|
219
|
+
defaultModeId: string
|
|
135
220
|
/** An array of variable IDs that belong to this collection. */
|
|
136
|
-
variableIds: string[]
|
|
221
|
+
variableIds: string[]
|
|
137
222
|
/** Whether the collection is hidden when publishing the library. */
|
|
138
|
-
hiddenFromPublishing: boolean
|
|
223
|
+
hiddenFromPublishing: boolean
|
|
139
224
|
/** The timestamp of the last update. */
|
|
140
|
-
updatedAt: string
|
|
225
|
+
updatedAt: string
|
|
141
226
|
}
|
|
142
227
|
|
|
143
228
|
/**
|
|
144
229
|
* A generic error shape for failed Figma API requests.
|
|
145
|
-
*
|
|
230
|
+
*
|
|
146
231
|
* @typedef {Object} FigmaError
|
|
147
232
|
* @memberof Types
|
|
148
233
|
* @since 1.0.0
|
|
@@ -152,16 +237,16 @@ export declare interface FigmaCollection {
|
|
|
152
237
|
*/
|
|
153
238
|
export declare interface FigmaError {
|
|
154
239
|
/** The HTTP status code of the error. */
|
|
155
|
-
statusCode: number
|
|
240
|
+
statusCode: number
|
|
156
241
|
/** The error message from the API. */
|
|
157
|
-
message: string
|
|
242
|
+
message: string
|
|
158
243
|
}
|
|
159
244
|
|
|
160
245
|
/* Excluded from this release type: FigmaTokenContextType */
|
|
161
246
|
|
|
162
247
|
/**
|
|
163
248
|
* Represents a single Figma variable.
|
|
164
|
-
*
|
|
249
|
+
*
|
|
165
250
|
* @typedef {Object} FigmaVariable
|
|
166
251
|
* @memberof Types
|
|
167
252
|
* @since 1.0.0
|
|
@@ -179,25 +264,25 @@ export declare interface FigmaError {
|
|
|
179
264
|
*/
|
|
180
265
|
export declare interface FigmaVariable {
|
|
181
266
|
/** The unique identifier for the variable. */
|
|
182
|
-
id: string
|
|
267
|
+
id: string
|
|
183
268
|
/** The name of the variable. */
|
|
184
|
-
name: string
|
|
269
|
+
name: string
|
|
185
270
|
/** The ID of the collection this variable belongs to. */
|
|
186
|
-
variableCollectionId: string
|
|
271
|
+
variableCollectionId: string
|
|
187
272
|
/** The underlying data type of the variable. */
|
|
188
|
-
resolvedType: ResolvedType
|
|
273
|
+
resolvedType: ResolvedType
|
|
189
274
|
/** A map of mode IDs to the variable's value in that mode. */
|
|
190
|
-
valuesByMode: Record<string, VariableValue
|
|
275
|
+
valuesByMode: Record<string, VariableValue>
|
|
191
276
|
/** The description of the variable, as set in Figma. */
|
|
192
|
-
description: string
|
|
277
|
+
description: string
|
|
193
278
|
/** Whether the variable is hidden when publishing the library. */
|
|
194
|
-
hiddenFromPublishing: boolean
|
|
279
|
+
hiddenFromPublishing: boolean
|
|
195
280
|
/** The scopes in which this variable can be used. */
|
|
196
|
-
scopes: VariableScope[]
|
|
281
|
+
scopes: VariableScope[]
|
|
197
282
|
/** Platform-specific code syntax for this variable (e.g., for Web, iOS, Android). */
|
|
198
|
-
codeSyntax: Record<string, string
|
|
283
|
+
codeSyntax: Record<string, string>
|
|
199
284
|
/** The timestamp of the last update. */
|
|
200
|
-
updatedAt: string
|
|
285
|
+
updatedAt: string
|
|
201
286
|
}
|
|
202
287
|
|
|
203
288
|
/**
|
|
@@ -249,11 +334,11 @@ export declare interface FigmaVariable {
|
|
|
249
334
|
* }
|
|
250
335
|
* ```
|
|
251
336
|
*/
|
|
252
|
-
export declare const FigmaVarsProvider: ({ children, token, fileKey, }:
|
|
337
|
+
export declare const FigmaVarsProvider: ({ children, token, fileKey, }: FigmaVarsProviderProps_2) => JSX_2.Element;
|
|
253
338
|
|
|
254
339
|
/**
|
|
255
340
|
* Props for the `FigmaVarsProvider` component.
|
|
256
|
-
*
|
|
341
|
+
*
|
|
257
342
|
* @typedef {Object} FigmaVarsProviderProps
|
|
258
343
|
* @memberof Types
|
|
259
344
|
* @since 1.0.0
|
|
@@ -262,6 +347,31 @@ export declare const FigmaVarsProvider: ({ children, token, fileKey, }: FigmaVar
|
|
|
262
347
|
* @property {string | null} fileKey The Figma file key extracted from the file URL.
|
|
263
348
|
*/
|
|
264
349
|
export declare interface FigmaVarsProviderProps {
|
|
350
|
+
/** The child components that will have access to the context. */
|
|
351
|
+
children: ReactNode
|
|
352
|
+
/**
|
|
353
|
+
* Your Figma Personal Access Token.
|
|
354
|
+
* @see https://www.figma.com/developers/api#authentication
|
|
355
|
+
*/
|
|
356
|
+
token: string | null
|
|
357
|
+
/**
|
|
358
|
+
* The unique identifier of the Figma file you want to access.
|
|
359
|
+
* You can get this from the file's URL.
|
|
360
|
+
*/
|
|
361
|
+
fileKey: string | null
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
/**
|
|
365
|
+
* Props for the `FigmaVarsProvider` component.
|
|
366
|
+
*
|
|
367
|
+
* @typedef {Object} FigmaVarsProviderProps
|
|
368
|
+
* @memberof Types
|
|
369
|
+
* @since 1.0.0
|
|
370
|
+
* @property {ReactNode} children The child components that will have access to the context.
|
|
371
|
+
* @property {string | null} token The Figma Personal Access Token for API authentication.
|
|
372
|
+
* @property {string | null} fileKey The Figma file key extracted from the file URL.
|
|
373
|
+
*/
|
|
374
|
+
declare interface FigmaVarsProviderProps_2 {
|
|
265
375
|
/** The child components that will have access to the context. */
|
|
266
376
|
children: ReactNode;
|
|
267
377
|
/**
|
|
@@ -349,7 +459,7 @@ export declare function filterVariables(variables: FigmaVariable[], criteria: {
|
|
|
349
459
|
|
|
350
460
|
/**
|
|
351
461
|
* The structure of the successful response from the Figma API's `/v1/files/{file_key}/variables/local` endpoint.
|
|
352
|
-
*
|
|
462
|
+
*
|
|
353
463
|
* @typedef {Object} LocalVariablesResponse
|
|
354
464
|
* @memberof Types
|
|
355
465
|
* @since 1.0.0
|
|
@@ -362,17 +472,17 @@ export declare interface LocalVariablesResponse {
|
|
|
362
472
|
/** Contains the metadata about the variables and collections. */
|
|
363
473
|
meta: {
|
|
364
474
|
/** A map of collection IDs to `FigmaCollection` objects. */
|
|
365
|
-
variableCollections: Record<string, FigmaCollection
|
|
475
|
+
variableCollections: Record<string, FigmaCollection>
|
|
366
476
|
/** A map of variable IDs to `FigmaVariable` objects. */
|
|
367
|
-
variables: Record<string, FigmaVariable
|
|
368
|
-
}
|
|
477
|
+
variables: Record<string, FigmaVariable>
|
|
478
|
+
}
|
|
369
479
|
}
|
|
370
480
|
|
|
371
481
|
/**
|
|
372
482
|
* The result object returned by the `useMutation` hook.
|
|
373
483
|
* @template TData The type of data returned by the mutation.
|
|
374
484
|
* @template TPayload The type of the payload passed to the mutate function.
|
|
375
|
-
*
|
|
485
|
+
*
|
|
376
486
|
* @typedef {Object} MutationResult
|
|
377
487
|
* @memberof Types
|
|
378
488
|
* @since 1.0.0
|
|
@@ -385,20 +495,20 @@ export declare interface LocalVariablesResponse {
|
|
|
385
495
|
* @property {boolean} isError Whether the mutation resulted in an error.
|
|
386
496
|
*/
|
|
387
497
|
export declare interface MutationResult<TData, TPayload> {
|
|
388
|
-
mutate: (payload: TPayload) => Promise<TData | undefined
|
|
389
|
-
status: 'idle' | 'loading' | 'success' | 'error'
|
|
390
|
-
data: TData | null
|
|
391
|
-
error: Error | null
|
|
392
|
-
isLoading: boolean
|
|
393
|
-
isSuccess: boolean
|
|
394
|
-
isError: boolean
|
|
498
|
+
mutate: (payload: TPayload) => Promise<TData | undefined>
|
|
499
|
+
status: 'idle' | 'loading' | 'success' | 'error'
|
|
500
|
+
data: TData | null
|
|
501
|
+
error: Error | null
|
|
502
|
+
isLoading: boolean
|
|
503
|
+
isSuccess: boolean
|
|
504
|
+
isError: boolean
|
|
395
505
|
}
|
|
396
506
|
|
|
397
507
|
/**
|
|
398
508
|
* Represents the state of a mutation operation.
|
|
399
509
|
* @template TData The type of data returned by the mutation.
|
|
400
510
|
* @template TError The type of error returned by the mutation.
|
|
401
|
-
*
|
|
511
|
+
*
|
|
402
512
|
* @typedef {Object} MutationState
|
|
403
513
|
* @memberof Types
|
|
404
514
|
* @since 1.0.0
|
|
@@ -407,11 +517,29 @@ export declare interface MutationResult<TData, TPayload> {
|
|
|
407
517
|
* @property {Error | null} error The error returned by the mutation, or null if the mutation was successful.
|
|
408
518
|
*/
|
|
409
519
|
export declare interface MutationState<TData> {
|
|
410
|
-
status: 'idle' | 'loading' | 'success' | 'error'
|
|
411
|
-
data: TData | null
|
|
412
|
-
error: Error | null
|
|
520
|
+
status: 'idle' | 'loading' | 'success' | 'error'
|
|
521
|
+
data: TData | null
|
|
522
|
+
error: Error | null
|
|
413
523
|
}
|
|
414
524
|
|
|
525
|
+
/**
|
|
526
|
+
* @fileoverview TypeScript type definitions for the Figma Variables REST API.
|
|
527
|
+
* These types match the official Figma API specification for variables, collections, and modes.
|
|
528
|
+
* @see {@link https://www.figma.com/developers/api#variables|Figma Variables API Documentation}
|
|
529
|
+
* @since 1.0.0
|
|
530
|
+
*/
|
|
531
|
+
|
|
532
|
+
/**
|
|
533
|
+
* The resolved type of a Figma variable.
|
|
534
|
+
* Determines what kind of value the variable can hold.
|
|
535
|
+
*
|
|
536
|
+
* @typedef {string} ResolvedType
|
|
537
|
+
* @memberof Types
|
|
538
|
+
* @since 1.0.0
|
|
539
|
+
* @see {@link https://www.figma.com/developers/api#variable-object|Figma Variable Object}
|
|
540
|
+
*/
|
|
541
|
+
export declare type ResolvedType = 'BOOLEAN' | 'FLOAT' | 'STRING' | 'COLOR'
|
|
542
|
+
|
|
415
543
|
/**
|
|
416
544
|
* @fileoverview TypeScript type definitions for the Figma Variables REST API.
|
|
417
545
|
* These types match the official Figma API specification for variables, collections, and modes.
|
|
@@ -427,17 +555,17 @@ export declare interface MutationState<TData> {
|
|
|
427
555
|
* @since 1.0.0
|
|
428
556
|
* @see {@link https://www.figma.com/developers/api#variable-object|Figma Variable Object}
|
|
429
557
|
*/
|
|
430
|
-
|
|
558
|
+
declare type ResolvedType_2 = 'BOOLEAN' | 'FLOAT' | 'STRING' | 'COLOR';
|
|
431
559
|
|
|
432
560
|
declare type UpdateVariableArgs = {
|
|
433
561
|
variableId: string;
|
|
434
|
-
payload:
|
|
562
|
+
payload: UpdateVariablePayload_2;
|
|
435
563
|
};
|
|
436
564
|
|
|
437
565
|
/**
|
|
438
566
|
* The payload for the `updateVariable` function.
|
|
439
567
|
* All properties are optional.
|
|
440
|
-
*
|
|
568
|
+
*
|
|
441
569
|
* @typedef {Object} UpdateVariablePayload
|
|
442
570
|
* @memberof Types
|
|
443
571
|
* @since 1.0.0
|
|
@@ -450,6 +578,34 @@ declare type UpdateVariableArgs = {
|
|
|
450
578
|
* @property {Record<string, VariableValue>} [valuesByMode] New values for the variable by mode ID.
|
|
451
579
|
*/
|
|
452
580
|
export declare interface UpdateVariablePayload {
|
|
581
|
+
/** The new name for the variable. */
|
|
582
|
+
name?: string
|
|
583
|
+
/** The new description for the variable. */
|
|
584
|
+
description?: string
|
|
585
|
+
/** The new hidden status for the variable. */
|
|
586
|
+
hiddenFromPublishing?: boolean
|
|
587
|
+
/** The new scopes for the variable. */
|
|
588
|
+
scopes?: VariableScope[]
|
|
589
|
+
/** The new code syntax for the variable. */
|
|
590
|
+
codeSyntax?: Record<string, string>
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
/**
|
|
594
|
+
* The payload for the `updateVariable` function.
|
|
595
|
+
* All properties are optional.
|
|
596
|
+
*
|
|
597
|
+
* @typedef {Object} UpdateVariablePayload
|
|
598
|
+
* @memberof Types
|
|
599
|
+
* @since 1.0.0
|
|
600
|
+
* @see {@link https://www.figma.com/developers/api#patch-variables|Figma API - Update Variable}
|
|
601
|
+
* @property {string} [name] The new name for the variable.
|
|
602
|
+
* @property {string} [description] The new description for the variable.
|
|
603
|
+
* @property {boolean} [hiddenFromPublishing] The new hidden status for the variable.
|
|
604
|
+
* @property {VariableScope[]} [scopes] The new scopes for the variable.
|
|
605
|
+
* @property {Record<string, string>} [codeSyntax] The new code syntax for the variable.
|
|
606
|
+
* @property {Record<string, VariableValue>} [valuesByMode] New values for the variable by mode ID.
|
|
607
|
+
*/
|
|
608
|
+
declare interface UpdateVariablePayload_2 {
|
|
453
609
|
/** The new name for the variable. */
|
|
454
610
|
name?: string;
|
|
455
611
|
/** The new description for the variable. */
|
|
@@ -457,7 +613,7 @@ export declare interface UpdateVariablePayload {
|
|
|
457
613
|
/** The new hidden status for the variable. */
|
|
458
614
|
hiddenFromPublishing?: boolean;
|
|
459
615
|
/** The new scopes for the variable. */
|
|
460
|
-
scopes?:
|
|
616
|
+
scopes?: VariableScope_2[];
|
|
461
617
|
/** The new code syntax for the variable. */
|
|
462
618
|
codeSyntax?: Record<string, string>;
|
|
463
619
|
}
|
|
@@ -530,7 +686,7 @@ export declare interface UpdateVariablePayload {
|
|
|
530
686
|
* });
|
|
531
687
|
* ```
|
|
532
688
|
*/
|
|
533
|
-
export declare const useBulkUpdateVariables: () => MutationResult_2<any,
|
|
689
|
+
export declare const useBulkUpdateVariables: () => MutationResult_2<any, BulkUpdatePayload_2>;
|
|
534
690
|
|
|
535
691
|
/**
|
|
536
692
|
* Creates a new variable in the Figma file.
|
|
@@ -588,7 +744,7 @@ export declare const useBulkUpdateVariables: () => MutationResult_2<any, BulkUpd
|
|
|
588
744
|
* });
|
|
589
745
|
* ```
|
|
590
746
|
*/
|
|
591
|
-
export declare const useCreateVariable: () => MutationResult_2<any,
|
|
747
|
+
export declare const useCreateVariable: () => MutationResult_2<any, CreateVariablePayload_2>;
|
|
592
748
|
|
|
593
749
|
/**
|
|
594
750
|
* Deletes a variable from the Figma file by its ID.
|
|
@@ -605,7 +761,7 @@ export declare const useCreateVariable: () => MutationResult_2<any, CreateVariab
|
|
|
605
761
|
*
|
|
606
762
|
* @example
|
|
607
763
|
* ```tsx
|
|
608
|
-
* import { useDeleteVariable } from '
|
|
764
|
+
* import { useDeleteVariable } from '@figma-vars/hooks';
|
|
609
765
|
*
|
|
610
766
|
* function VariableDeleter({ variableId }) {
|
|
611
767
|
* const { mutate, isLoading, isSuccess, error } = useDeleteVariable();
|
|
@@ -637,7 +793,7 @@ export declare const useCreateVariable: () => MutationResult_2<any, CreateVariab
|
|
|
637
793
|
* deleteVariable('VariableID:123:456');
|
|
638
794
|
* ```
|
|
639
795
|
*/
|
|
640
|
-
export declare const useDeleteVariable: () =>
|
|
796
|
+
export declare const useDeleteVariable: () => MutationResult_3<any, string>;
|
|
641
797
|
|
|
642
798
|
/**
|
|
643
799
|
* Retrieves the Figma API token from the FigmaVarsProvider.
|
|
@@ -652,7 +808,7 @@ export declare const useDeleteVariable: () => MutationResult_2<any, string>;
|
|
|
652
808
|
*
|
|
653
809
|
* @example
|
|
654
810
|
* ```tsx
|
|
655
|
-
* import { useFigmaToken } from '
|
|
811
|
+
* import { useFigmaToken } from '@figma-vars/hooks';
|
|
656
812
|
*
|
|
657
813
|
* function CustomAPIComponent() {
|
|
658
814
|
* const figmaToken = useFigmaToken();
|
|
@@ -796,12 +952,12 @@ export declare const useVariableCollections: () => {
|
|
|
796
952
|
* return <div>Mode: {lightMode.name}</div>
|
|
797
953
|
* ```
|
|
798
954
|
*/
|
|
799
|
-
export declare const useVariableModes: () =>
|
|
955
|
+
export declare const useVariableModes: () => UseVariableModesResult_2;
|
|
800
956
|
|
|
801
957
|
/**
|
|
802
958
|
* The return type for the `useVariableModes` hook.
|
|
803
959
|
* Provides multiple ways to access and organize variable modes from Figma collections.
|
|
804
|
-
*
|
|
960
|
+
*
|
|
805
961
|
* @typedef {Object} UseVariableModesResult
|
|
806
962
|
* @memberof Types
|
|
807
963
|
* @since 1.0.0
|
|
@@ -812,11 +968,32 @@ export declare const useVariableModes: () => UseVariableModesResult;
|
|
|
812
968
|
*/
|
|
813
969
|
export declare interface UseVariableModesResult {
|
|
814
970
|
/** A flat array of all modes across all collections. */
|
|
815
|
-
modes: VariableMode[]
|
|
971
|
+
modes: VariableMode[]
|
|
972
|
+
/** A map of collection IDs to an array of modes belonging to that collection. */
|
|
973
|
+
modesByCollectionId: Record<string, VariableMode[]>
|
|
974
|
+
/** A map of mode IDs to the corresponding mode object for quick lookups. */
|
|
975
|
+
modesById: Record<string, VariableMode>
|
|
976
|
+
}
|
|
977
|
+
|
|
978
|
+
/**
|
|
979
|
+
* The return type for the `useVariableModes` hook.
|
|
980
|
+
* Provides multiple ways to access and organize variable modes from Figma collections.
|
|
981
|
+
*
|
|
982
|
+
* @typedef {Object} UseVariableModesResult
|
|
983
|
+
* @memberof Types
|
|
984
|
+
* @since 1.0.0
|
|
985
|
+
* @see {@link useVariableModes} - The hook that returns this type
|
|
986
|
+
* @property {VariableMode[]} modes A flat array of all modes across all collections.
|
|
987
|
+
* @property {Record<string, VariableMode[]>} modesByCollectionId A map of collection IDs to an array of modes belonging to that collection.
|
|
988
|
+
* @property {Record<string, VariableMode>} modesById A map of mode IDs to the corresponding mode object for quick lookups.
|
|
989
|
+
*/
|
|
990
|
+
declare interface UseVariableModesResult_2 {
|
|
991
|
+
/** A flat array of all modes across all collections. */
|
|
992
|
+
modes: VariableMode_2[];
|
|
816
993
|
/** A map of collection IDs to an array of modes belonging to that collection. */
|
|
817
|
-
modesByCollectionId: Record<string,
|
|
994
|
+
modesByCollectionId: Record<string, VariableMode_2[]>;
|
|
818
995
|
/** A map of mode IDs to the corresponding mode object for quick lookups. */
|
|
819
|
-
modesById: Record<string,
|
|
996
|
+
modesById: Record<string, VariableMode_2>;
|
|
820
997
|
}
|
|
821
998
|
|
|
822
999
|
/**
|
|
@@ -850,10 +1027,12 @@ export declare const useVariables: () => {
|
|
|
850
1027
|
|
|
851
1028
|
/* Excluded from this release type: VariableAction */
|
|
852
1029
|
|
|
1030
|
+
/* Excluded from this release type: VariableAction_2 */
|
|
1031
|
+
|
|
853
1032
|
/**
|
|
854
1033
|
* Represents an alias to another Figma variable.
|
|
855
1034
|
* This is used when a variable's value is set to reference another variable.
|
|
856
|
-
*
|
|
1035
|
+
*
|
|
857
1036
|
* @typedef {Object} VariableAlias
|
|
858
1037
|
* @memberof Types
|
|
859
1038
|
* @since 1.0.0
|
|
@@ -862,6 +1041,24 @@ export declare const useVariables: () => {
|
|
|
862
1041
|
* @property {string} id The ID of the variable being referenced.
|
|
863
1042
|
*/
|
|
864
1043
|
export declare interface VariableAlias {
|
|
1044
|
+
/** The type of the value, indicating it's a variable alias. */
|
|
1045
|
+
type: 'VARIABLE_ALIAS'
|
|
1046
|
+
/** The ID of the variable being referenced. */
|
|
1047
|
+
id: string
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
/**
|
|
1051
|
+
* Represents an alias to another Figma variable.
|
|
1052
|
+
* This is used when a variable's value is set to reference another variable.
|
|
1053
|
+
*
|
|
1054
|
+
* @typedef {Object} VariableAlias
|
|
1055
|
+
* @memberof Types
|
|
1056
|
+
* @since 1.0.0
|
|
1057
|
+
* @see {@link https://www.figma.com/developers/api#variable-object|Figma Variable Object}
|
|
1058
|
+
* @property {string} type The type of the value, indicating it's a variable alias.
|
|
1059
|
+
* @property {string} id The ID of the variable being referenced.
|
|
1060
|
+
*/
|
|
1061
|
+
declare interface VariableAlias_2 {
|
|
865
1062
|
/** The type of the value, indicating it's a variable alias. */
|
|
866
1063
|
type: 'VARIABLE_ALIAS';
|
|
867
1064
|
/** The ID of the variable being referenced. */
|
|
@@ -870,11 +1067,15 @@ export declare interface VariableAlias {
|
|
|
870
1067
|
|
|
871
1068
|
/* Excluded from this release type: VariableChange */
|
|
872
1069
|
|
|
1070
|
+
/* Excluded from this release type: VariableChange_2 */
|
|
1071
|
+
|
|
873
1072
|
/* Excluded from this release type: VariableCollectionChange */
|
|
874
1073
|
|
|
1074
|
+
/* Excluded from this release type: VariableCollectionChange_2 */
|
|
1075
|
+
|
|
875
1076
|
/**
|
|
876
1077
|
* Represents a single mode within a variable collection.
|
|
877
|
-
*
|
|
1078
|
+
*
|
|
878
1079
|
* @typedef {Object} VariableMode
|
|
879
1080
|
* @memberof Types
|
|
880
1081
|
* @since 1.0.0
|
|
@@ -883,6 +1084,23 @@ export declare interface VariableAlias {
|
|
|
883
1084
|
* @property {string} name The name of the mode (e.g., "Light", "Dark").
|
|
884
1085
|
*/
|
|
885
1086
|
export declare interface VariableMode {
|
|
1087
|
+
/** The unique identifier for the mode. */
|
|
1088
|
+
modeId: string
|
|
1089
|
+
/** The name of the mode (e.g., "Light", "Dark"). */
|
|
1090
|
+
name: string
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
/**
|
|
1094
|
+
* Represents a single mode within a variable collection.
|
|
1095
|
+
*
|
|
1096
|
+
* @typedef {Object} VariableMode
|
|
1097
|
+
* @memberof Types
|
|
1098
|
+
* @since 1.0.0
|
|
1099
|
+
* @see {@link https://www.figma.com/developers/api#variable-collection-object|Figma Variable Collection Object}
|
|
1100
|
+
* @property {string} modeId The unique identifier for the mode.
|
|
1101
|
+
* @property {string} name The name of the mode (e.g., "Light", "Dark").
|
|
1102
|
+
*/
|
|
1103
|
+
declare interface VariableMode_2 {
|
|
886
1104
|
/** The unique identifier for the mode. */
|
|
887
1105
|
modeId: string;
|
|
888
1106
|
/** The name of the mode (e.g., "Light", "Dark"). */
|
|
@@ -891,9 +1109,11 @@ export declare interface VariableMode {
|
|
|
891
1109
|
|
|
892
1110
|
/* Excluded from this release type: VariableModeChange */
|
|
893
1111
|
|
|
1112
|
+
/* Excluded from this release type: VariableModeChange_2 */
|
|
1113
|
+
|
|
894
1114
|
/**
|
|
895
1115
|
* A change to a variable's value in a specific mode in a bulk update.
|
|
896
|
-
*
|
|
1116
|
+
*
|
|
897
1117
|
* @typedef {Object} VariableModeValue
|
|
898
1118
|
* @memberof Types
|
|
899
1119
|
* @since 1.0.0
|
|
@@ -903,14 +1123,68 @@ export declare interface VariableMode {
|
|
|
903
1123
|
* @property {VariableValue} value The new value for the variable in this mode.
|
|
904
1124
|
*/
|
|
905
1125
|
export declare interface VariableModeValue {
|
|
1126
|
+
/** The ID of the variable to update. */
|
|
1127
|
+
variableId: string
|
|
1128
|
+
/** The ID of the mode to update. */
|
|
1129
|
+
modeId: string
|
|
1130
|
+
/** The new value for the variable in this mode. */
|
|
1131
|
+
value: VariableValue
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
/**
|
|
1135
|
+
* A change to a variable's value in a specific mode in a bulk update.
|
|
1136
|
+
*
|
|
1137
|
+
* @typedef {Object} VariableModeValue
|
|
1138
|
+
* @memberof Types
|
|
1139
|
+
* @since 1.0.0
|
|
1140
|
+
* @see {@link https://www.figma.com/developers/api#patch-variables|Figma API - Update Variable Value}
|
|
1141
|
+
* @property {string} variableId The ID of the variable to update.
|
|
1142
|
+
* @property {string} modeId The ID of the mode to update.
|
|
1143
|
+
* @property {VariableValue} value The new value for the variable in this mode.
|
|
1144
|
+
*/
|
|
1145
|
+
declare interface VariableModeValue_2 {
|
|
906
1146
|
/** The ID of the variable to update. */
|
|
907
1147
|
variableId: string;
|
|
908
1148
|
/** The ID of the mode to update. */
|
|
909
1149
|
modeId: string;
|
|
910
1150
|
/** The new value for the variable in this mode. */
|
|
911
|
-
value:
|
|
1151
|
+
value: VariableValue_2;
|
|
912
1152
|
}
|
|
913
1153
|
|
|
1154
|
+
/**
|
|
1155
|
+
* The scopes where a Figma variable can be applied.
|
|
1156
|
+
* `ALL_SCOPES` is a general-purpose scope. Other values restrict the variable to specific properties.
|
|
1157
|
+
*
|
|
1158
|
+
* @typedef {string} VariableScope
|
|
1159
|
+
* @memberof Types
|
|
1160
|
+
* @since 1.0.0
|
|
1161
|
+
* @see {@link https://www.figma.com/developers/api#variable-object|Figma Variable Object}
|
|
1162
|
+
*/
|
|
1163
|
+
export declare type VariableScope =
|
|
1164
|
+
| 'ALL_SCOPES'
|
|
1165
|
+
| 'TEXT_CONTENT'
|
|
1166
|
+
| 'CORNER_RADIUS'
|
|
1167
|
+
| 'WIDTH_HEIGHT'
|
|
1168
|
+
| 'GAP'
|
|
1169
|
+
| 'STROKE_FLOAT'
|
|
1170
|
+
| 'OPACITY'
|
|
1171
|
+
| 'EFFECT_FLOAT'
|
|
1172
|
+
| 'FONT_WEIGHT'
|
|
1173
|
+
| 'FONT_SIZE'
|
|
1174
|
+
| 'LINE_HEIGHT'
|
|
1175
|
+
| 'LETTER_SPACING'
|
|
1176
|
+
| 'PARAGRAPH_SPACING'
|
|
1177
|
+
| 'PARAGRAPH_INDENT'
|
|
1178
|
+
| 'FONT_FAMILY'
|
|
1179
|
+
| 'FONT_STYLE'
|
|
1180
|
+
| 'FONT_VARIATIONS'
|
|
1181
|
+
| 'ALL_FILLS'
|
|
1182
|
+
| 'FRAME_FILL'
|
|
1183
|
+
| 'SHAPE_FILL'
|
|
1184
|
+
| 'TEXT_FILL'
|
|
1185
|
+
| 'STROKE_COLOR'
|
|
1186
|
+
| 'EFFECT_COLOR'
|
|
1187
|
+
|
|
914
1188
|
/**
|
|
915
1189
|
* The scopes where a Figma variable can be applied.
|
|
916
1190
|
* `ALL_SCOPES` is a general-purpose scope. Other values restrict the variable to specific properties.
|
|
@@ -920,7 +1194,18 @@ export declare interface VariableModeValue {
|
|
|
920
1194
|
* @since 1.0.0
|
|
921
1195
|
* @see {@link https://www.figma.com/developers/api#variable-object|Figma Variable Object}
|
|
922
1196
|
*/
|
|
923
|
-
|
|
1197
|
+
declare type VariableScope_2 = 'ALL_SCOPES' | 'TEXT_CONTENT' | 'CORNER_RADIUS' | 'WIDTH_HEIGHT' | 'GAP' | 'STROKE_FLOAT' | 'OPACITY' | 'EFFECT_FLOAT' | 'FONT_WEIGHT' | 'FONT_SIZE' | 'LINE_HEIGHT' | 'LETTER_SPACING' | 'PARAGRAPH_SPACING' | 'PARAGRAPH_INDENT' | 'FONT_FAMILY' | 'FONT_STYLE' | 'FONT_VARIATIONS' | 'ALL_FILLS' | 'FRAME_FILL' | 'SHAPE_FILL' | 'TEXT_FILL' | 'STROKE_COLOR' | 'EFFECT_COLOR';
|
|
1198
|
+
|
|
1199
|
+
/**
|
|
1200
|
+
* The possible value types for a variable in a specific mode.
|
|
1201
|
+
* It can be a primitive value, a color object, or an alias to another variable.
|
|
1202
|
+
*
|
|
1203
|
+
* @typedef {(string|boolean|number|Color|VariableAlias)} VariableValue
|
|
1204
|
+
* @memberof Types
|
|
1205
|
+
* @since 1.0.0
|
|
1206
|
+
* @see {@link https://www.figma.com/developers/api#variable-object|Figma Variable Object}
|
|
1207
|
+
*/
|
|
1208
|
+
export declare type VariableValue = string | boolean | number | Color | VariableAlias
|
|
924
1209
|
|
|
925
1210
|
/**
|
|
926
1211
|
* The possible value types for a variable in a specific mode.
|
|
@@ -931,6 +1216,6 @@ export declare type VariableScope = 'ALL_SCOPES' | 'TEXT_CONTENT' | 'CORNER_RADI
|
|
|
931
1216
|
* @since 1.0.0
|
|
932
1217
|
* @see {@link https://www.figma.com/developers/api#variable-object|Figma Variable Object}
|
|
933
1218
|
*/
|
|
934
|
-
|
|
1219
|
+
declare type VariableValue_2 = string | boolean | number | Color_2 | VariableAlias_2;
|
|
935
1220
|
|
|
936
1221
|
export { }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@figma-vars/hooks",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.3",
|
|
4
4
|
"description": "Typed React hooks for managing Figma Variables, modes, tokens, and bindings via API.",
|
|
5
5
|
"author": "Mark Learst",
|
|
6
6
|
"license": "MIT",
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
"@types/react-dom": "^18.3.0",
|
|
60
60
|
"@vitejs/plugin-react": "^4.5.2",
|
|
61
61
|
"@vitest/coverage-v8": "^2.0.5",
|
|
62
|
+
"@vitest/ui": "2.1.9",
|
|
62
63
|
"jsdom": "^26.1.0",
|
|
63
64
|
"react": "^18.3.1",
|
|
64
65
|
"react-dom": "^18.3.1",
|
|
@@ -77,9 +78,12 @@
|
|
|
77
78
|
"scripts": {
|
|
78
79
|
"dev": "vite",
|
|
79
80
|
"build": "tsc && vite build",
|
|
80
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
81
|
+
"lint": "npx eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
81
82
|
"preview": "vite preview",
|
|
82
83
|
"test": "vitest",
|
|
84
|
+
"test:ui": "vitest --ui",
|
|
85
|
+
"test:coverage": "vitest run --coverage",
|
|
86
|
+
"test:watch": "vitest watch",
|
|
83
87
|
"postversion": "git push && git push --tags"
|
|
84
88
|
}
|
|
85
89
|
}
|