@dxtmisha/figma 0.1.0 → 0.1.1
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 +65 -0
- package/package.json +22 -2
package/README.md
CHANGED
|
@@ -1 +1,66 @@
|
|
|
1
1
|
# @dxtmisha/figma
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@dxtmisha/figma)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
`@dxtmisha/figma` is the core communication middleware for Figma plugins. It provides a structured bidirectional messaging bridge between the Figma plugin logic (sandbox) and its UI layer (iframe), ensuring type-safe and reliable data exchange.
|
|
7
|
+
|
|
8
|
+
## Why this library?
|
|
9
|
+
|
|
10
|
+
In Figma plugin development, communication between the backend logic and the frontend UI relies on asynchronous messaging via `postMessage`. This process is often prone to errors due to missing type safety, complex payload structures, and the need for message verification to avoid collisions.
|
|
11
|
+
|
|
12
|
+
`@dxtmisha/figma` solves these problems by implementing a robust event bus. It abstracts the low-level `onmessage` / `postMessage` API into a clean, subscription-based system that validates messages and provides a clear separation of concerns.
|
|
13
|
+
|
|
14
|
+
## What does it do?
|
|
15
|
+
|
|
16
|
+
For **messaging infrastructure** — provides `FigmaPostAbstract` and `FigmaUiMessenger` to manage the event bus. It uses a verification system (`FigmaPostCode`) to ensure that only authorized messages are processed, protecting against side effects from other scripts or plugins.
|
|
17
|
+
|
|
18
|
+
For **data synchronization** — offers a suite of utility functions (`fetchClientStorage`, `fetchStorage`, `fetchTopLevelFrames`, etc.) that simplify common data fetching patterns. These utilities abstract the request-response cycle into a typed interface, making it easy to retrieve document structure or storage data from the UI.
|
|
19
|
+
|
|
20
|
+
For **UI updates** — facilitates sending complex design data (like frame hierarchies or CSS styles) to the UI via standardized "send" functions (`sendFrameStyles`, `sendFramesSelected`), ensuring the frontend stays in sync with the Figma canvas state.
|
|
21
|
+
|
|
22
|
+
For **shared types** — contains the foundational type definitions (`UiFigmaNode`, `UiFigmaMessengerData`, etc.) that are used across all `@dxtmisha/figma-*` packages, providing a single source of truth for the entire plugin ecosystem.
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @dxtmisha/figma
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Quick Start (UI Side)
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import { FigmaUiMessenger, fetchTopLevelFrames } from '@dxtmisha/figma'
|
|
34
|
+
|
|
35
|
+
// 1. Initialize the messenger in your UI (e.g., in a Vue/React component)
|
|
36
|
+
const messenger = FigmaUiMessenger.getInstance()
|
|
37
|
+
|
|
38
|
+
// 2. Subscribe to messages from the plugin backend
|
|
39
|
+
messenger.subscribe('FETCH_SUCCESS', (data) => {
|
|
40
|
+
console.log('Received data:', data)
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
// 3. Request data from the backend using a utility function
|
|
44
|
+
async function loadFrames() {
|
|
45
|
+
const frames = await fetchTopLevelFrames()
|
|
46
|
+
console.log('Frames:', frames)
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Principles
|
|
51
|
+
|
|
52
|
+
- **Bidirectional Reliability** — ensures messages are correctly sent, received, and validated in both directions between sandbox and iframe.
|
|
53
|
+
- **Type-Safe Messaging** — leverages TypeScript to define clear contracts for every message type and payload, reducing runtime errors.
|
|
54
|
+
- **Developer Efficiency** — abstracts repetitive communication patterns into high-level functions, letting developers focus on UI and business logic.
|
|
55
|
+
- **Consistency** — acts as the glue for the DXT UI ecosystem, providing shared types and communication protocols used by other specialized libraries.
|
|
56
|
+
|
|
57
|
+
## Documentation
|
|
58
|
+
|
|
59
|
+
Full API reference and guides:
|
|
60
|
+
|
|
61
|
+
**[📖 https://dxtmisha.github.io/dxt-ui/?path=/docs/dxtmisha-en-figma-about-library--docs](https://dxtmisha.github.io/dxt-ui/?path=/docs/dxtmisha-en-figma-about-library--docs)**
|
|
62
|
+
|
|
63
|
+
## License
|
|
64
|
+
|
|
65
|
+
[MIT](LICENSE)
|
|
66
|
+
|
package/package.json
CHANGED
|
@@ -1,9 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxtmisha/figma",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.1",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"description": "
|
|
6
|
+
"description": "Core communication middleware for Figma plugins, providing a structured bidirectional messaging bridge between the plugin logic and UI layer.",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"figma",
|
|
9
|
+
"figma-plugin",
|
|
10
|
+
"typescript",
|
|
11
|
+
"messenger",
|
|
12
|
+
"postmessage",
|
|
13
|
+
"bridge",
|
|
14
|
+
"ui"
|
|
15
|
+
],
|
|
16
|
+
"author": "dxtmisha@gmail.com",
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"homepage": "https://github.com/dxtmisha/dxt-ui/tree/main/packages/figma",
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "git+https://github.com/dxtmisha/dxt-ui.git",
|
|
22
|
+
"directory": "packages/figma"
|
|
23
|
+
},
|
|
24
|
+
"bugs": {
|
|
25
|
+
"url": "https://github.com/dxtmisha/dxt-ui/issues"
|
|
26
|
+
},
|
|
7
27
|
"scripts": {
|
|
8
28
|
"dev": "vite",
|
|
9
29
|
"build": "vue-tsc -b && vite build",
|