Merge pull request #1 from flexcodelabs/version-two

New UI

Author: neicore

.gitignore

@@ -1,9 +1,6 @@
-# Node
+.DS_Store
 *.log
-*.log.*
-node_modules
-
-out/
-dist/
-src/*.js
-code.js
+*.css.d.ts
+build/
+node_modules/
+manifest.json

README.md

@@ -2,16 +2,43 @@
 
 A Figma plugin to help generate hues, tints, and/or shades
 
+![showcase gif](./showcase.gif 'rangi in Figma')
+
 ## Features
 
-- [x] Generate a hue spectrum from a given color by keeping its saturation and brightness constant.
+- [x] Generate a hues from a given color.
 
 - [x] Generate tints from a given color
 
 - [x] Generate shades from a given color
 
-Find it in Figma community: https://www.figma.com/community/plugin/1153959136228678599
+## How it works
+
+### Generating Hues
+
+rangi takes a color input and an interval value. It converts the color to HSL(Hue, Saturation, Light) value and plus or minus the interval value from the H value until it's either greater or equal to 0 or less or equal to 359. The max is set to 359 because some color values would give a black color when they hit 360.
+
+### Generating Tints
+
+To generate Tints, rangi takes the initial color, converts it to HSL(Hue, Saturation, Light) value adds the interval value to the L value until the L value is less or equal to 100.
+
+### Generating Shades
+
+Shades generation is similar to tints generation except instead of adding the interval value to the L value, rangi substracts it until the L value is less or equal to 0.
+
+## Todo & Roadmap
+
+If the plugin gains traction, the plan is to do the following:
+
+- [ ] Refactor code
+- [ ] Add ability for users to configure the generated frames, things like size, frame orientation, shape, naming, etc.
+
+## Assets & Links
+
+UI design of the plugin:
+https://www.figma.com/community/file/1157058671138458897
 
-## Roadmap
+Plugin in Figma community:
+https://www.figma.com/community/plugin/1153959136228678599
 
-- [ ] Update the UI to this: https://www.figma.com/community/file/1157058671138458897
+Built and maintained with ❤ by [Flexcode Labs](https://flexocelabs.com)

manifest.json

@@ -1,10 +1,10 @@
 {
-  "name": "rangi",
-  "id": "1153959136228678599",
   "api": "1.0.0",
-  "main": "code.js",
   "editorType": [
     "figma"
   ],
-  "ui": "ui.html"
-}
+  "id": "1153959136228678599",
+  "name": "rangi",
+  "main": "build/main.js",
+  "ui": "build/ui.js"
+}