💄 new UI done!

README.md

@@ -2,14 +2,37 @@
 
 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
 
+## 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:
@@ -18,4 +41,4 @@ https://www.figma.com/community/file/1157058671138458897
 Plugin in Figma community:
 https://www.figma.com/community/plugin/1153959136228678599
 
-Build and maintained with ❤ by [Flexcode Labs](https://flexocelabs.com)
+Built and maintained with ❤ by [Flexcode Labs](https://flexocelabs.com)

manifest.json

@@ -1,6 +1,8 @@
 {
   "api": "1.0.0",
-  "editorType": ["figma"],
+  "editorType": [
+    "figma"
+  ],
   "id": "1153959136228678599",
   "name": "rangi",
   "main": "build/main.js",

src/main.ts

@@ -1,15 +1,239 @@
 import { once, showUI } from '@create-figma-plugin/utilities'
-import { CancelHandler, GenerateHandler } from './types'
+import { CancelHandler, GenerateHandler, InputValues } from './types'
+import {
+  hexToHSL,
+  Padding,
+  generateHues,
+  generateTints,
+  generateShades,
+  Container,
+  selectFrame,
+} from './utils'
 
 export default function () {
-  once<GenerateHandler>('GENERATE', function () {
-    figma.closePlugin('Generate logic')
+  once<GenerateHandler>('GENERATE', function (inputValues: InputValues) {
+    const circleSize = 120
+    const circleSpace = 30
+    const frameDirection = 'HORIZONTAL'
+
+    const {
+      colorCode,
+      hue,
+      hueInterval,
+      tintForHue,
+      tintForHueInterval,
+      shadeForHue,
+      shadeForHueInterval,
+      tint,
+      tintInterval,
+      shade,
+      shadeInterval,
+    } = inputValues
+
+    const color = hexToHSL(colorCode)
+
+    const framePadding: Padding = {
+      top: 50,
+      right: 50,
+      bottom: 50,
+      left: 50,
+    }
+
+    if (hue && tint && shade) {
+      const hues = generateHues(
+        color,
+        hueInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize,
+        tintForHue,
+        shadeForHue,
+        tintForHueInterval,
+        shadeForHueInterval
+      )
+      const tints = generateTints(
+        color,
+        tintInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize
+      )
+
+      const shades = generateShades(
+        color,
+        shadeInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize
+      )
+
+      const parentFrame = new Container(
+        `Parent Frame`,
+        frameDirection,
+        framePadding,
+        70,
+        'AUTO',
+        'AUTO'
+      ).createContainer()
+
+      parentFrame.appendChild(hues)
+      parentFrame.appendChild(tints)
+      parentFrame.appendChild(shades)
+      selectFrame(parentFrame)
+      figma.closePlugin('Hues, tints and shades generated')
+    } else if (hue && tint) {
+      const hues = generateHues(
+        color,
+        hueInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize,
+        tintForHue,
+        shadeForHue,
+        tintForHueInterval,
+        shadeForHueInterval
+      )
+      const tints = generateTints(
+        color,
+        tintInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize
+      )
+
+      const parentFrame = new Container(
+        `Parent Frame`,
+        frameDirection,
+        framePadding,
+        70,
+        'AUTO',
+        'AUTO'
+      ).createContainer()
+
+      parentFrame.appendChild(hues)
+      parentFrame.appendChild(tints)
+      selectFrame(parentFrame)
+      figma.closePlugin('Hues and tints generated')
+    } else if (hue && shade) {
+      const hues = generateHues(
+        color,
+        hueInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize,
+        tintForHue,
+        shadeForHue,
+        tintForHueInterval,
+        shadeForHueInterval
+      )
+
+      const shades = generateShades(
+        color,
+        shadeInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize
+      )
+
+      const parentFrame = new Container(
+        `Parent Frame`,
+        frameDirection,
+        framePadding,
+        70,
+        'AUTO',
+        'AUTO'
+      ).createContainer()
+
+      parentFrame.appendChild(hues)
+      parentFrame.appendChild(shades)
+      selectFrame(parentFrame)
+      figma.closePlugin('Hues and shades generated')
+    } else if (tint && shade) {
+      const tints = generateTints(
+        color,
+        tintInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize
+      )
+
+      const shades = generateShades(
+        color,
+        shadeInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize
+      )
+
+      const parentFrame = new Container(
+        `Parent Frame`,
+        frameDirection,
+        framePadding,
+        70,
+        'AUTO',
+        'AUTO'
+      ).createContainer()
+
+      parentFrame.appendChild(tints)
+      parentFrame.appendChild(shades)
+      selectFrame(parentFrame)
+      figma.closePlugin('Tints and shades generated')
+    } else if (hue) {
+      const hues = generateHues(
+        color,
+        hueInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize,
+        tintForHue,
+        shadeForHue,
+        tintForHueInterval,
+        shadeForHueInterval
+      )
+      selectFrame(hues)
+      figma.closePlugin('Hues generated')
+    } else if (tint) {
+      const tints = generateTints(
+        color,
+        tintInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize
+      )
+      selectFrame(tints)
+      figma.closePlugin('Tints generated')
+    } else if (shade) {
+      const shades = generateShades(
+        color,
+        shadeInterval,
+        frameDirection,
+        framePadding,
+        circleSpace,
+        circleSize
+      )
+
+      selectFrame(shades)
+      figma.closePlugin('Shades generated')
+    } else {
+      figma.closePlugin('No option selected')
+    }
   })
   once<CancelHandler>('CANCEL', function () {
-    figma.closePlugin('Close logic')
+    figma.closePlugin('okay, bye ✌🏾')
   })
   showUI({
     width: 400,
-    height: 537,
+    height: 335,
   })
 }

src/types.ts

@@ -2,10 +2,24 @@ import { EventHandler } from '@create-figma-plugin/utilities'
 
 export interface GenerateHandler extends EventHandler {
   name: 'GENERATE'
-  handler: () => void
+  handler: (inputValues: InputValues | any) => void
 }
 
 export interface CancelHandler extends EventHandler {
   name: 'CANCEL'
   handler: () => void
 }
+
+export interface InputValues {
+  colorCode: string
+  hue: boolean
+  hueInterval: number
+  tintForHue: boolean
+  tintForHueInterval: number
+  shadeForHue: boolean
+  shadeForHueInterval: number
+  tint: boolean
+  tintInterval: number
+  shade: boolean
+  shadeInterval: number
+}

src/ui.css

@@ -18,6 +18,10 @@
   gap: 10px;
 }
 
+.section_2 {
+  gap: 0;
+}
+
 .section_title {
   padding: 0 8px;
   font-size: 11px;
@@ -29,9 +33,37 @@
   line-height: 16px;
 }
 
+.setting_container {
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  flex: 1 0;
+}
+
+.numeric_input {
+  width: 50px;
+  text-align: center;
+}
+
+.right_content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.right_content_2 {
+  width: 250px;
+}
+
 .action_container {
   width: 100%;
   display: flex;
+  flex-direction: row-reverse;
   align-items: center;
   justify-content: center;
   gap: 20px;