first commit

Author: Karan Singh

README.md

@@ -0,0 +1,40 @@
+Below are the steps to get your plugin running. You can also find instructions at:
+
+  https://www.figma.com/plugin-docs/setup/
+
+This plugin template uses Typescript and NPM, two standard tools in creating JavaScript applications.
+
+First, download Node.js which comes with NPM. This will allow you to install TypeScript and other
+libraries. You can find the download link here:
+
+  https://nodejs.org/en/download/
+
+Next, install TypeScript using the command:
+
+  npm install -g typescript
+
+Finally, in the directory of your plugin, get the latest type definitions for the plugin API by running:
+
+  npm install --save-dev @figma/plugin-typings
+
+If you are familiar with JavaScript, TypeScript will look very familiar. In fact, valid JavaScript code
+is already valid Typescript code.
+
+TypeScript adds type annotations to variables. This allows code editors such as Visual Studio Code
+to provide information about the Figma API while you are writing code, as well as help catch bugs
+you previously didn't notice.
+
+For more information, visit https://www.typescriptlang.org/
+
+Using TypeScript requires a compiler to convert TypeScript (code.ts) into JavaScript (code.js)
+for the browser to run.
+
+We recommend writing TypeScript code using Visual Studio code:
+
+1. Download Visual Studio Code if you haven't already: https://code.visualstudio.com/.
+2. Open this directory in Visual Studio Code.
+3. Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item,
+    then select "tsc: watch - tsconfig.json". You will have to do this again every time
+    you reopen Visual Studio Code.
+
+That's it! Visual Studio Code will regenerate the JavaScript file every time you save.

code.js

@@ -0,0 +1,32 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./code.ts":
+/*!*****************!*\
+  !*** ./code.ts ***!
+  \*****************/
+/***/ (() => {
+
+eval("// This plugin creates 5 rectangles on the screen.\n// const numberOfRectangles = 5\n// This file holds the main code for the plugins. It has access to the *document*.\n// You can access browser APIs such as the network by creating a UI which contains\n// a full browser environment (see documentation).\n// const nodes: SceneNode[] = [];\n// for (let i = 0; i < numberOfRectangles; i++) {\n//   const rect = figma.createRectangle();\n//   rect.x = i * 150;\n//   rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];\n//   figma.currentPage.appendChild(rect);\n//   nodes.push(rect);\n// }\n// figma.currentPage.selection = nodes;\n// figma.viewport.scrollAndZoomIntoView(nodes);\n// Make sure to close the plugin when you're done. Otherwise the plugin will\n// keep running, which shows the cancel button at the bottom of the screen.\nlet pages = [\n    \"Cover\",\n    \"-------------\",\n    \"Style Components\",\n    \"Typography Components\",\n    \"-------------\",\n    \"Design-v1 In Progress\",\n    \"Design-v2 In Progress\",\n    \"Design-v3 In Progress\",\n    \"-------------\",\n    \"Icon/FavIcons\",\n    \"Assets\",\n    \"Discovery\",\n    \"References\",\n    \"Junkyard\",\n];\nlet currentPage = figma.currentPage;\ncurrentPage.name = pages[0];\nfor (let page of pages.slice(1)) {\n    let newPage = figma.createPage();\n    newPage.name = page;\n}\nfigma.notify(\"Pages Created Successfully!\");\nfigma.closePlugin();\n\n\n//# sourceURL=webpack://Figma-Pages/./code.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = {};
+/******/ 	__webpack_modules__["./code.ts"]();
+/******/ 	
+/******/ })()
+;

code.ts

@@ -0,0 +1,48 @@
+// This plugin creates 5 rectangles on the screen.
+// const numberOfRectangles = 5
+
+// This file holds the main code for the plugins. It has access to the *document*.
+// You can access browser APIs such as the network by creating a UI which contains
+// a full browser environment (see documentation).
+
+// const nodes: SceneNode[] = [];
+// for (let i = 0; i < numberOfRectangles; i++) {
+//   const rect = figma.createRectangle();
+//   rect.x = i * 150;
+//   rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
+//   figma.currentPage.appendChild(rect);
+//   nodes.push(rect);
+// }
+// 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.
+
+let pages = [
+  "Cover",
+  "-------------",
+  "Style Components",
+  "Typography Components",
+  "-------------",
+  "Design-v1 In Progress",
+  "Design-v2 In Progress",
+  "Design-v3 In Progress",
+  "-------------",
+  "Icon/FavIcons",
+  "Assets",
+  "Discovery",
+  "References",
+  "Junkyard",
+];
+
+let currentPage = figma.currentPage;
+currentPage.name = pages[0];
+
+for (let page of pages.slice(1)) {
+  let newPage = figma.createPage();
+  newPage.name = page;
+}
+figma.notify("Pages Created Successfully!");
+
+figma.closePlugin();

manifest.json

@@ -0,0 +1,7 @@
+{
+  "name": "Design System Pages",
+  "id": "1086869650406820989",
+  "api": "1.0.0",
+  "main": "code.js",
+  "editorType": ["figma"]
+}