Updated figma-plugin-ds dependency

thomas-lowry · May 3, 2020 · d3400ad · d3400ad
1 parent a7ec9d3
commit d3400ad
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 10 deletions.
diff --git a/dist/code.js b/dist/code.js
@@ -1 +1,38 @@
-figma.showUI(__html__,{width:232,height:208}),figma.ui.onmessage=function(e){if("create-shapes"===e.type){for(var a=[],i=0;i<e.count;i++){var g;(g="rectangle"===e.shape?figma.createRectangle():"triangle"===e.shape?figma.createPolygon():figma.createEllipse()).x=150*i,g.fills=[{type:"SOLID",color:{r:1,g:.5,b:0}}],figma.currentPage.appendChild(g),a.push(g)}figma.currentPage.selection=a,figma.viewport.scrollAndZoomIntoView(a)}figma.closePlugin()};
+// This plugin will open a modal to prompt the user to enter a number, and
+// it will then create that many rectangles on the screen.
+// This file holds the main code for the plugins. It has access to the *document*.
+// You can access browser APIs in the <script> tag inside "ui.html" which has a
+// full browser enviroment (see documentation).
+// This shows the HTML page in "ui.html".
+figma.showUI(__html__, { width: 232, height: 208 });
+// Calls to "parent.postMessage" from within the HTML page will trigger this
+// callback. The callback will be passed the "pluginMessage" property of the
+// posted message.
+figma.ui.onmessage = function (msg) {
+    // One way of distinguishing between different types of messages sent from
+    // your HTML page is to use an object with a "type" property like this.
+    if (msg.type === 'create-shapes') {
+        var nodes = [];
+        for (var i = 0; i < msg.count; i++) {
+            var shape;
+            if (msg.shape === 'rectangle') {
+                shape = figma.createRectangle();
+            }
+            else if (msg.shape === 'triangle') {
+                shape = figma.createPolygon();
+            }
+            else {
+                shape = figma.createEllipse();
+            }
+            shape.x = i * 150;
+            shape.fills = [{ type: 'SOLID', color: { r: 1, g: 0.5, b: 0 } }];
+            figma.currentPage.appendChild(shape);
+            nodes.push(shape);
+        }
+        figma.currentPage.selection = nodes;
+        figma.viewport.scrollAndZoomIntoView(nodes);
+    }
+    // Make sure to close the plugin when you're done. Otherwise the plugin will
+    // keep running, which shows the cancel button at the bottom of the screen.
+    figma.closePlugin();
+};
diff --git a/dist/index.html b/dist/index.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "autoprefixer": "^9.7.6",
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
+    "figma-plugin-ds": "0.0.5",
     "gulp": "^4.0.2",
     "gulp-base64-inline": "^1.0.6",
     "gulp-concat": "^2.6.1",

diff --git a/src/ui/index.html b/src/ui/index.html
@@ -3,11 +3,21 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-        <link rel="stylesheet" href="./tmp/styles.css">
+
+        <!-- Styles -->
+        <link rel="stylesheet" href="../../node_modules/figma-plugin-ds/dist/figma-plugin-ds.css"> <!-- Figma Plugin DS Styles -->
+        <link rel="stylesheet" href="./tmp/styles.css"> <!-- Your Styles -->
     </head>
     <body>
-        <!-- <img src="img/smile.png" alt=""> -->
-        <img src="img/smile.svg" class="helloThere" alt="">
-        <script src="./tmp/scripts.js"></script>
+
+        <select name="" id="select-menu1" class="select-menu">
+            <option value="1" >Item 1</option>
+            <option value="2" selected>Item 2</option>
+            <option value="3" >Item 3</option>
+            <option value="4" >Item 4</option>
+        </select>
+
+        <script src="../../node_modules/figma-plugin-ds/dist/figma-plugin-ds.js"></script> 
+        <script src="./tmp/scripts.js"></script> <!-- Your scripts -->
     </body>
 </html>
diff --git a/src/ui/js/scripts.js b/src/ui/js/scripts.js
@@ -1,5 +1,6 @@
 function helloThere() {
     console.log('hello there');
 }
+helloThere();
 
-helloThere();
+selectMenu.init();