├── pp-banner.png
├── pp-icon.png
├── tsconfig.json
├── manifest.json
├── package.json
├── ui.html
├── README.md
├── code.ts
└── code.js


/pp-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rogie/figma-plugin-prototype-preview/HEAD/pp-banner.png


--------------------------------------------------------------------------------
/pp-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rogie/figma-plugin-prototype-preview/HEAD/pp-icon.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "lib": ["es6"],
 5 |     "typeRoots": [
 6 |       "./node_modules/@types",
 7 |       "./node_modules/@figma"
 8 |     ]
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Prototype Preview ",
 3 |   "id": "1034863097448619860",
 4 |   "api": "1.0.0",
 5 |   "main": "code.js",
 6 |   "enablePrivatePluginApi": true,
 7 |   "editorType": [
 8 |     "figma"
 9 |   ],
10 |   "relaunchButtons": [
11 |     {"command": "open", "name": "Preview Prototype"}
12 |   ]
13 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Prototype-Preview-",
 3 |   "version": "1.0.0",
 4 |   "description": "Your Figma plugin",
 5 |   "main": "code.js",
 6 |   "scripts": {
 7 |     "build": "tsc -p tsconfig.json"
 8 |   },
 9 |   "author": "",
10 |   "license": "",
11 |   "devDependencies": {
12 |     "@figma/plugin-typings": "^1.37.0"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/ui.html:
--------------------------------------------------------------------------------
 1 | <h2>Rectangle Creator</h2>
 2 | <p>Count: <input id="count" value="5"></p>
 3 | <button id="create">Create</button>
 4 | <button id="cancel">Cancel</button>
 5 | <script>
 6 | 
 7 | document.getElementById('create').onclick = () => {
 8 |   const textbox = document.getElementById('count');
 9 |   const count = parseInt(textbox.value, 10);
10 |   parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*')
11 | }
12 | 
13 | document.getElementById('cancel').onclick = () => {
14 |   parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
15 | }
16 | 
17 | </script>
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Below are the steps to get your plugin running. You can also find instructions at:
 2 | 
 3 |   https://www.figma.com/plugin-docs/setup/
 4 | 
 5 | This plugin template uses Typescript and NPM, two standard tools in creating JavaScript applications.
 6 | 
 7 | First, download Node.js which comes with NPM. This will allow you to install TypeScript and other
 8 | libraries. You can find the download link here:
 9 | 
10 |   https://nodejs.org/en/download/
11 | 
12 | Next, install TypeScript using the command:
13 | 
14 |   npm install -g typescript
15 | 
16 | Finally, in the directory of your plugin, get the latest type definitions for the plugin API by running:
17 | 
18 |   npm install --save-dev @figma/plugin-typings
19 | 
20 | If you are familiar with JavaScript, TypeScript will look very familiar. In fact, valid JavaScript code
21 | is already valid Typescript code.
22 | 
23 | TypeScript adds type annotations to variables. This allows code editors such as Visual Studio Code
24 | to provide information about the Figma API while you are writing code, as well as help catch bugs
25 | you previously didn't notice.
26 | 
27 | For more information, visit https://www.typescriptlang.org/
28 | 
29 | Using TypeScript requires a compiler to convert TypeScript (code.ts) into JavaScript (code.js)
30 | for the browser to run.
31 | 
32 | We recommend writing TypeScript code using Visual Studio code:
33 | 
34 | 1. Download Visual Studio Code if you haven't already: https://code.visualstudio.com/.
35 | 2. Open this directory in Visual Studio Code.
36 | 3. Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item,
37 |     then select "tsc: watch - tsconfig.json". You will have to do this again every time
38 |     you reopen Visual Studio Code.
39 | 
40 | That's it! Visual Studio Code will regenerate the JavaScript file every time you save.
41 | 


--------------------------------------------------------------------------------
/code.ts:
--------------------------------------------------------------------------------
  1 | figma.root.setRelaunchData({open: 'Open this prototype in a Plugin window.'})
  2 | 
  3 | const setPrefs = async (prefs) => {
  4 |   return await figma.clientStorage.setAsync('prefs',prefs)
  5 | }
  6 | 
  7 | const getPrefs = async () => {
  8 |   let prefs = await figma.clientStorage.getAsync('prefs')
  9 |   return prefs || {
 10 |     width: 300, 
 11 |     height: 500
 12 |   }
 13 | }
 14 | 
 15 | const getFlowStartingPointId = () => {
 16 |   let nodeId = figma.currentPage.id
 17 |   if(figma.currentPage.flowStartingPoints.length > 0){
 18 |     nodeId = figma.currentPage.flowStartingPoints[0].nodeId
 19 |   }
 20 |   return nodeId
 21 | }
 22 | 
 23 | const showPrototype = async (flowStartingPointId = getFlowStartingPointId()) => {
 24 | 
 25 |   let prefs = await getPrefs()
 26 |   
 27 |   let prototypeUrl = `https://www.figma.com/proto/${figma.fileKey}/?node-id=${flowStartingPointId}&hotspot-hints=0&scaling=contain&hide-ui=1&show-proto-sidebar=1`
 28 | 
 29 |   let embedUrl = `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(prototypeUrl)}`
 30 | 
 31 |   let flows = figma.currentPage.flowStartingPoints
 32 | 
 33 |   // This shows the HTML page in "ui.html".
 34 |   figma.showUI(
 35 |     `<style>
 36 |       *,
 37 |       *::before,
 38 |       *::after {
 39 |         box-sizing: border-box;
 40 |       }
 41 |       html{
 42 |         background: black;
 43 |       }
 44 |       iframe, html, body{
 45 |         border: 0;
 46 |         width: 100%;
 47 |         height: 100%;
 48 |         margin: 0;
 49 |         padding: 0;
 50 |         resize: both;
 51 |         min-width: 100px;
 52 |         min-height: 100px;
 53 |         max-width: 800px;
 54 |         max-height: 600px;
 55 |       }
 56 |       #flows{
 57 |         position: fixed;
 58 |         bottom: 12px;
 59 |         left: 12px;
 60 |         max-width: calc(100vw - 24px);
 61 |         text-overflow: ellipsis;
 62 |       }
 63 |       select{
 64 |         padding: 4px 24px 4px 8px;
 65 |         border-radius: 4px;
 66 |         appearance: none;
 67 |         border: 0;
 68 |         color: rgba(255,255,255,0.5);
 69 |         user-select: none;
 70 |         appearance: none;
 71 |         display: block;
 72 |         outline: 0;
 73 |         font-size: 11px;
 74 |         font-weight: bold;
 75 |         box-shadow: 0 0 0 4px rgba(255,255,255,0), 0 0 0 1px rgba(255,255,255,0.2);
 76 |         background: rgba(0,0,0,0.4) right center no-repeat url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.646 13.354L8.646 10.354L9.354 9.646L12 12.293L14.646 9.646L15.354 10.354L12.354 13.354L12 13.707L11.646 13.354Z" fill="rgba(255,255,255,0.5)"/></svg>');
 77 |       }
 78 |       select:hover{
 79 |         color: rgba(255,255,255,1);
 80 |         box-shadow: 0 0 0 4px rgba(255,255,255,0.15), 0 0 0 1px rgba(255,255,255,1);
 81 |         background-color: rgba(0,0,0,0.6);
 82 |       }
 83 |       select:after{
 84 |         content: '';
 85 |         padding-right: 8px;
 86 |       }
 87 |     </style>
 88 |     <iframe id="preview" src="${embedUrl}" allowfullscreen></iframe>
 89 |     ${ flows.length > 1? `<select id="flows">${flows.map(flow => `<option value="${flow.nodeId}" ${flow.nodeId === flowStartingPointId? "selected" : ""}>${flow.name}</option>`).join('')}</select>` : '' }
 90 |     <script>
 91 |       let iframe = document.getElementById('preview');
 92 |       let flows = document.getElementById('flows');
 93 |       let observer = new MutationObserver((mutations) => {
 94 |         parent.postMessage({pluginMessage: {width: iframe.clientWidth, height: iframe.clientHeight}},"*")
 95 |       })
 96 |       observer.observe(iframe, { attributes: true });
 97 |       if(flows){
 98 |         flows.addEventListener('input',(e,flow) => {
 99 |           parent.postMessage({pluginMessage: {flowStartingPointId: flows.value}},"*")
100 |         })
101 |       }
102 |     </script>`,
103 |     prefs
104 |   );
105 |   
106 |   figma.ui.on('message', (msg) => {
107 |     let {height, width, flowStartingPointId} = msg
108 |     if(height && width){
109 |       figma.ui.resize(width, height)
110 |       setPrefs({width: width, height: height})
111 |     } else if(flowStartingPointId){
112 |       showPrototype(flowStartingPointId)
113 |     }
114 |   })
115 | 
116 | }
117 | showPrototype()


--------------------------------------------------------------------------------
/code.js:
--------------------------------------------------------------------------------
  1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
  2 |     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  3 |     return new (P || (P = Promise))(function (resolve, reject) {
  4 |         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
  5 |         function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
  6 |         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
  7 |         step((generator = generator.apply(thisArg, _arguments || [])).next());
  8 |     });
  9 | };
 10 | figma.root.setRelaunchData({ open: 'Open this prototype in a Plugin window.' });
 11 | const setPrefs = (prefs) => __awaiter(this, void 0, void 0, function* () {
 12 |     return yield figma.clientStorage.setAsync('prefs', prefs);
 13 | });
 14 | const getPrefs = () => __awaiter(this, void 0, void 0, function* () {
 15 |     let prefs = yield figma.clientStorage.getAsync('prefs');
 16 |     return prefs || {
 17 |         width: 300,
 18 |         height: 500
 19 |     };
 20 | });
 21 | const getFlowStartingPointId = () => {
 22 |     let nodeId = figma.currentPage.id;
 23 |     if (figma.currentPage.flowStartingPoints.length > 0) {
 24 |         nodeId = figma.currentPage.flowStartingPoints[0].nodeId;
 25 |     }
 26 |     return nodeId;
 27 | };
 28 | const showPrototype = (flowStartingPointId = getFlowStartingPointId()) => __awaiter(this, void 0, void 0, function* () {
 29 |     let prefs = yield getPrefs();
 30 |     let prototypeUrl = `https://www.figma.com/proto/${figma.fileKey}/?node-id=${flowStartingPointId}&hotspot-hints=0&scaling=contain&hide-ui=1&show-proto-sidebar=1`;
 31 |     let embedUrl = `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(prototypeUrl)}`;
 32 |     let flows = figma.currentPage.flowStartingPoints;
 33 |     // This shows the HTML page in "ui.html".
 34 |     figma.showUI(`<style>
 35 |       *,
 36 |       *::before,
 37 |       *::after {
 38 |         box-sizing: border-box;
 39 |       }
 40 |       html{
 41 |         background: black;
 42 |       }
 43 |       iframe, html, body{
 44 |         border: 0;
 45 |         width: 100%;
 46 |         height: 100%;
 47 |         margin: 0;
 48 |         padding: 0;
 49 |         resize: both;
 50 |         min-width: 100px;
 51 |         min-height: 100px;
 52 |         max-width: 800px;
 53 |         max-height: 600px;
 54 |       }
 55 |       #flows{
 56 |         position: fixed;
 57 |         bottom: 12px;
 58 |         left: 12px;
 59 |         max-width: calc(100vw - 24px);
 60 |         text-overflow: ellipsis;
 61 |       }
 62 |       select{
 63 |         padding: 4px 24px 4px 8px;
 64 |         border-radius: 4px;
 65 |         appearance: none;
 66 |         border: 0;
 67 |         color: rgba(255,255,255,0.5);
 68 |         user-select: none;
 69 |         appearance: none;
 70 |         display: block;
 71 |         outline: 0;
 72 |         font-size: 11px;
 73 |         font-weight: bold;
 74 |         box-shadow: 0 0 0 4px rgba(255,255,255,0), 0 0 0 1px rgba(255,255,255,0.2);
 75 |         background: rgba(0,0,0,0.4) right center no-repeat url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.646 13.354L8.646 10.354L9.354 9.646L12 12.293L14.646 9.646L15.354 10.354L12.354 13.354L12 13.707L11.646 13.354Z" fill="rgba(255,255,255,0.5)"/></svg>');
 76 |       }
 77 |       select:hover{
 78 |         color: rgba(255,255,255,1);
 79 |         box-shadow: 0 0 0 4px rgba(255,255,255,0.15), 0 0 0 1px rgba(255,255,255,1);
 80 |         background-color: rgba(0,0,0,0.6);
 81 |       }
 82 |       select:after{
 83 |         content: '';
 84 |         padding-right: 8px;
 85 |       }
 86 |     </style>
 87 |     <iframe id="preview" src="${embedUrl}" allowfullscreen></iframe>
 88 |     ${flows.length > 1 ? `<select id="flows">${flows.map(flow => `<option value="${flow.nodeId}" ${flow.nodeId === flowStartingPointId ? "selected" : ""}>${flow.name}</option>`).join('')}</select>` : ''}
 89 |     <script>
 90 |       let iframe = document.getElementById('preview');
 91 |       let flows = document.getElementById('flows');
 92 |       let observer = new MutationObserver((mutations) => {
 93 |         parent.postMessage({pluginMessage: {width: iframe.clientWidth, height: iframe.clientHeight}},"*")
 94 |       })
 95 |       observer.observe(iframe, { attributes: true });
 96 |       if(flows){
 97 |         flows.addEventListener('input',(e,flow) => {
 98 |           parent.postMessage({pluginMessage: {flowStartingPointId: flows.value}},"*")
 99 |         })
100 |       }
101 |     </script>`, prefs);
102 |     figma.ui.on('message', (msg) => {
103 |         let { height, width, flowStartingPointId } = msg;
104 |         if (height && width) {
105 |             figma.ui.resize(width, height);
106 |             setPrefs({ width: width, height: height });
107 |         }
108 |         else if (flowStartingPointId) {
109 |             showPrototype(flowStartingPointId);
110 |         }
111 |     });
112 | });
113 | showPrototype();
114 | 


--------------------------------------------------------------------------------