diff --git a/.yarn/cache/@create-figma-plugin-utilities-npm-3.0.2-c5288d79d0-2b8b42b092.zip b/.yarn/cache/@create-figma-plugin-utilities-npm-3.0.2-c5288d79d0-2b8b42b092.zip
new file mode 100644
index 0000000..9da0499
Binary files /dev/null and b/.yarn/cache/@create-figma-plugin-utilities-npm-3.0.2-c5288d79d0-2b8b42b092.zip differ
diff --git a/.yarn/cache/hex-rgb-npm-5.0.0-16d8780d6d-a88e3aaae5.zip b/.yarn/cache/hex-rgb-npm-5.0.0-16d8780d6d-a88e3aaae5.zip
new file mode 100644
index 0000000..25f1a26
Binary files /dev/null and b/.yarn/cache/hex-rgb-npm-5.0.0-16d8780d6d-a88e3aaae5.zip differ
diff --git a/.yarn/cache/rgb-hex-npm-4.1.0-f0d8f25853-662dcc1e90.zip b/.yarn/cache/rgb-hex-npm-4.1.0-f0d8f25853-662dcc1e90.zip
new file mode 100644
index 0000000..c4e066c
Binary files /dev/null and b/.yarn/cache/rgb-hex-npm-4.1.0-f0d8f25853-662dcc1e90.zip differ
diff --git a/figma-plugin/common/constants.ts b/figma-plugin/common/constants.ts
index c57fe82..7e310d4 100644
--- a/figma-plugin/common/constants.ts
+++ b/figma-plugin/common/constants.ts
@@ -1,32 +1,7 @@
-export const ACTION = {
-  GET_USER_INFO: "get-user-info",
+export const FRAME_NAME = "icona-frame";
 
-  GET_GITHUB_REPO_URL: "get-github-repo-url",
-  GET_GITHUB_API_KEY: "get-github-api-key",
-  GET_ICON_PREVIEW: "get-icon-preview",
-  GET_DEPLOY_WITH_PNG: "get-deploy-with-png",
-
-  SET_GITHUB_REPO_URL: "set-github-repo-url",
-  SET_GITHUB_API_KEY: "set-github-api-key",
-  SET_DEPLOY_WITH_PNG: "set-deploy-with-png",
-
-  DEPLOY_ICON: "deploy-icon",
-  DEPLOY_ICON_STATUS: "deploy-icon-status",
-  DEPLOY_ICON_ERROR_MESSAGE: "deploy-icon-error-message",
-} as const;
-
-export const DATA = {
+export const KEY = {
   GITHUB_API_KEY: "github-api-key",
   GITHUB_REPO_URL: "github-repo-url",
-
-  ICON_FRAME_ID: "icona-frame",
-
   DEPLOY_WITH_PNG: "deploy-with-png",
-} as const;
-
-export const STATUS = {
-  IDLE: "idle",
-  LOADING: "loading",
-  SUCCESS: "success",
-  ERROR: "error",
-} as const;
+};
diff --git a/figma-plugin/common/fromPlugin.ts b/figma-plugin/common/fromPlugin.ts
new file mode 100644
index 0000000..e1fc1d8
--- /dev/null
+++ b/figma-plugin/common/fromPlugin.ts
@@ -0,0 +1,72 @@
+import { emit as e, on as o } from "@create-figma-plugin/utilities";
+import type { IconaIconData } from "@icona/types";
+
+interface UserInfoPayload {
+  name: string;
+  id: string;
+}
+
+interface GetGithubRepoUrlPayload {
+  repoUrl?: string;
+}
+
+interface GetGithubApiKeyPayload {
+  apiKey?: string;
+}
+
+interface GetDeployWithPngPayload {
+  deployWithPng?: boolean;
+}
+
+interface GetIconPreviewPayload {
+  icons: Record<string, IconaIconData>;
+}
+
+export type Events = {
+  GET_USER_INFO: {
+    name: "GET_USER_INFO";
+    payload: UserInfoPayload;
+    handler: (props: UserInfoPayload) => void;
+  };
+  GET_GITHUB_REPO_URL: {
+    name: "GET_GITHUB_REPO_URL";
+    payload: GetGithubRepoUrlPayload;
+    handler: (props: GetGithubRepoUrlPayload) => void;
+  };
+  GET_GITHUB_API_KEY: {
+    name: "GET_GITHUB_API_KEY";
+    payload: GetGithubApiKeyPayload;
+    handler: (props: GetGithubApiKeyPayload) => void;
+  };
+  GET_DEPLOY_WITH_PNG: {
+    name: "GET_DEPLOY_WITH_PNG";
+    payload: GetDeployWithPngPayload;
+    handler: (props: GetDeployWithPngPayload) => void;
+  };
+  GET_ICON_PREVIEW: {
+    name: "GET_ICON_PREVIEW";
+    payload: GetIconPreviewPayload;
+    handler: (props: GetIconPreviewPayload) => void;
+  };
+  DEPLOY_DONE: {
+    name: "DEPLOY_DONE";
+    payload: null;
+    handler: () => void;
+  };
+};
+
+type EventName = keyof Events;
+
+export const emit = <T extends EventName>(
+  name: T,
+  payload: Events[T]["payload"],
+) => {
+  return e(name, payload);
+};
+
+export const on = <T extends keyof Events>(
+  name: T,
+  handler: Events[T]["handler"],
+) => {
+  if (handler) return o(name, handler);
+};
diff --git a/figma-plugin/common/fromUi.ts b/figma-plugin/common/fromUi.ts
new file mode 100644
index 0000000..321490b
--- /dev/null
+++ b/figma-plugin/common/fromUi.ts
@@ -0,0 +1,64 @@
+import { emit as e, on as o } from "@create-figma-plugin/utilities";
+
+interface GithubData {
+  owner: string;
+  name: string;
+  apiKey: string;
+}
+
+interface IconaMetaData {
+  githubData: GithubData;
+  options?: {
+    withPng?: boolean;
+  };
+}
+
+interface SetPngOptionPayload {
+  withPng: boolean;
+}
+
+interface SetGithubUrlPayload {
+  url: string;
+}
+interface SetGithubApiKeyPayload {
+  apiKey: string;
+}
+
+export type Events = {
+  SET_GITHUB_URL: {
+    name: "SET_GITHUB_URL";
+    payload: SetGithubUrlPayload;
+    handler: (props: SetGithubUrlPayload) => void;
+  };
+  SET_GITHUB_API_KEY: {
+    name: "SET_GITHUB_API_KEY";
+    payload: SetGithubApiKeyPayload;
+    handler: (props: SetGithubApiKeyPayload) => void;
+  };
+  SET_PNG_OPTION: {
+    name: "SET_PNG_OPTION";
+    payload: SetPngOptionPayload;
+    handler: (props: SetPngOptionPayload) => void;
+  };
+  DEPLOY_ICON: {
+    name: "DEPLOY_ICON";
+    payload: IconaMetaData;
+    handler: (props: IconaMetaData) => void;
+  };
+};
+
+type EventName = keyof Events;
+
+export const emit = <T extends EventName>(
+  name: T,
+  payload: Events[T]["payload"],
+) => {
+  return e(name, payload);
+};
+
+export const on = <T extends keyof Events>(
+  name: T,
+  handler: Events[T]["handler"],
+) => {
+  return o(name, handler);
+};
diff --git a/figma-plugin/common/types.ts b/figma-plugin/common/types.ts
index c883ea9..8e08b48 100644
--- a/figma-plugin/common/types.ts
+++ b/figma-plugin/common/types.ts
@@ -1,7 +1,3 @@
-import type { IconaIconData } from "@icona/types";
-
-import type { ACTION, STATUS } from "./constants";
-
 export interface GithubData {
   owner: string;
   name: string;
@@ -14,30 +10,3 @@ export interface IconaMetaData {
     withPng?: boolean;
   };
 }
-
-export type Status = `${(typeof STATUS)[keyof typeof STATUS]}`;
-
-export type Messages =
-  | { type: `${typeof ACTION.GET_DEPLOY_WITH_PNG}`; payload: boolean }
-  | { type: `${typeof ACTION.GET_GITHUB_API_KEY}`; payload: string }
-  | { type: `${typeof ACTION.GET_GITHUB_REPO_URL}`; payload: string }
-  | {
-      type: `${typeof ACTION.GET_ICON_PREVIEW}`;
-      payload: Record<string, IconaIconData>;
-    }
-  | { type: `${typeof ACTION.SET_DEPLOY_WITH_PNG}`; payload: boolean }
-  | { type: `${typeof ACTION.SET_GITHUB_API_KEY}`; payload: string }
-  | { type: `${typeof ACTION.SET_GITHUB_REPO_URL}`; payload: string }
-  | { type: `${typeof ACTION.DEPLOY_ICON}`; payload: IconaMetaData }
-  | { type: `${typeof ACTION.DEPLOY_ICON_STATUS}`; payload: Status }
-  | {
-      type: `${typeof ACTION.GET_USER_INFO}`;
-      payload: {
-        id: string;
-        name: string;
-      };
-    }
-  | {
-      type: `${typeof ACTION.DEPLOY_ICON_ERROR_MESSAGE}`;
-      payload: string;
-    };
diff --git a/figma-plugin/esbuild.plugin.js b/figma-plugin/esbuild.plugin.cjs
similarity index 100%
rename from figma-plugin/esbuild.plugin.js
rename to figma-plugin/esbuild.plugin.cjs
diff --git a/figma-plugin/package.json b/figma-plugin/package.json
index dd53e8c..608d910 100644
--- a/figma-plugin/package.json
+++ b/figma-plugin/package.json
@@ -2,12 +2,13 @@
   "name": "@icona/figma-plugin",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "yarn build:ui && yarn build:plugin -- --minify",
-    "build:plugin": "node ./esbuild.plugin.js",
+    "build:plugin": "node ./esbuild.plugin.cjs",
     "build:ui": "yarn vite build --mode prod --minify esbuild --emptyOutDir=false",
-    "dev": "yarn build:ui:watch && yarn build:plugin:watch",
-    "dev:plugin": "WATCH=true node ./esbuild.plugin.js",
+    "dev": "yarn dev:ui && yarn dev:plugin",
+    "dev:plugin": "WATCH=true node ./esbuild.plugin.cjs",
     "dev:ui": "yarn vite build --mode dev --watch --emptyOutDir=false",
     "tsc": "yarn tsc:plugin && yarn tsc:ui",
     "tsc:plugin": "tsc --noEmit -p plugin",
@@ -15,6 +16,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.6.1",
+    "@create-figma-plugin/utilities": "^3.0.2",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@vanilla-extract/css": "^1.11.0",
diff --git a/figma-plugin/plugin-src/code.ts b/figma-plugin/plugin-src/code.ts
index 20b7478..d001555 100644
--- a/figma-plugin/plugin-src/code.ts
+++ b/figma-plugin/plugin-src/code.ts
@@ -1,60 +1,36 @@
-import { ACTION, DATA, STATUS } from "../common/constants";
-import type { Messages } from "../common/types";
-import { createGithubClient } from "./github";
+import { FRAME_NAME, KEY } from "../common/constants";
+import { emit } from "../common/fromPlugin";
+import {
+  listenDeployIcon,
+  listenPngOption,
+  listenSetGithubApiKey,
+  listenSetGithubUrl,
+} from "./listeners";
 import { getAssetInIconFrame } from "./service";
-
-figma.showUI(__html__, { width: 360, height: 436 });
-
-// get github settings
-async function getLocalData(key: string) {
-  const data = await figma.clientStorage.getAsync(key);
-  return data;
-}
-
-// set github settings
-async function setLocalData(key: string, data: any) {
-  await figma.clientStorage.setAsync(key, data);
-}
+import { getLocalData } from "./utils";
 
 function sendUserInfo() {
   if (!figma.currentUser) return;
 
-  figma.ui.postMessage({
-    type: ACTION.GET_USER_INFO,
-    payload: {
-      id: figma.currentUser.id,
-      name: figma.currentUser.name,
-    },
+  emit("GET_USER_INFO", {
+    id: figma.currentUser.id || "",
+    name: figma.currentUser.name,
   });
 }
 
-// send github data to UI
-async function init() {
-  const events = [
-    {
-      data: DATA.GITHUB_API_KEY,
-      type: ACTION.GET_GITHUB_API_KEY,
-    },
-    {
-      data: DATA.GITHUB_REPO_URL,
-      type: ACTION.GET_GITHUB_REPO_URL,
-    },
-    {
-      data: DATA.DEPLOY_WITH_PNG,
-      type: ACTION.GET_DEPLOY_WITH_PNG,
-    },
-  ];
+async function sendStorageData() {
+  const repoUrl = await getLocalData(KEY.GITHUB_REPO_URL);
+  const apiKey = await getLocalData(KEY.GITHUB_API_KEY);
+  const deployWithPng = await getLocalData(KEY.DEPLOY_WITH_PNG);
 
-  events.forEach((event) => {
-    getLocalData(event.data).then((payload) => {
-      figma.ui.postMessage({ type: event.type, payload });
-    });
-  });
-
-  sendUserInfo();
+  emit("GET_GITHUB_REPO_URL", { repoUrl });
+  emit("GET_GITHUB_API_KEY", { apiKey });
+  emit("GET_DEPLOY_WITH_PNG", { deployWithPng });
+}
 
+async function setPreviewIcons() {
   const iconaFrame = figma.currentPage.findOne((node) => {
-    return node.name === DATA.ICON_FRAME_ID;
+    return node.name === FRAME_NAME;
   });
 
   if (!iconaFrame) {
@@ -65,75 +41,23 @@ async function init() {
       withPng: false,
     });
 
-    figma.ui.postMessage({
-      type: ACTION.GET_ICON_PREVIEW,
-      payload: svgDatas,
+    console.log("svgDatas", svgDatas);
+
+    emit("GET_ICON_PREVIEW", {
+      icons: svgDatas,
     });
   }
 }
 
-figma.ui.onmessage = async (msg: Messages) => {
-  switch (msg.type) {
-    case ACTION.SET_GITHUB_REPO_URL:
-      if (!msg.payload) return;
-      setLocalData(DATA.GITHUB_REPO_URL, msg.payload);
-      break;
-
-    case ACTION.SET_GITHUB_API_KEY:
-      if (!msg.payload) return;
-      setLocalData(DATA.GITHUB_API_KEY, msg.payload);
-      break;
-
-    case ACTION.SET_DEPLOY_WITH_PNG:
-      setLocalData(DATA.DEPLOY_WITH_PNG, msg.payload);
-      break;
-
-    case ACTION.DEPLOY_ICON: {
-      figma.ui.postMessage({
-        type: ACTION.DEPLOY_ICON_STATUS,
-        payload: STATUS.LOADING,
-      });
-      const { githubData, options } = msg.payload;
-      const { withPng } = options ?? { withPng: true };
-
-      try {
-        const { owner, name, apiKey } = githubData;
-        const { createDeployPR } = createGithubClient(owner, name, apiKey);
-        const iconaFrame = figma.currentPage.findOne((node) => {
-          return node.name === DATA.ICON_FRAME_ID;
-        });
+(function main() {
+  figma.showUI(__html__, { width: 360, height: 436 });
 
-        if (!iconaFrame) throw new Error("Icona frame not found");
-        const svgs = await getAssetInIconFrame(iconaFrame.id, {
-          withPng,
-        });
-
-        await createDeployPR(svgs);
-        figma.ui.postMessage({
-          type: ACTION.DEPLOY_ICON_STATUS,
-          payload: STATUS.SUCCESS,
-        });
-        setTimeout(() => {
-          figma.ui.postMessage({
-            type: ACTION.DEPLOY_ICON_STATUS,
-            payload: STATUS.IDLE,
-          });
-        }, 3000);
-      } catch (error) {
-        figma.ui.postMessage({
-          type: ACTION.DEPLOY_ICON_STATUS,
-          payload: STATUS.ERROR,
-        });
-        setTimeout(() => {
-          figma.ui.postMessage({
-            type: ACTION.DEPLOY_ICON_STATUS,
-            payload: STATUS.IDLE,
-          });
-        }, 3000);
-      }
-      break;
-    }
-  }
-};
-
-init();
+  sendUserInfo();
+  sendStorageData();
+  setPreviewIcons();
+
+  listenDeployIcon();
+  listenSetGithubApiKey();
+  listenSetGithubUrl();
+  listenPngOption();
+})();
diff --git a/figma-plugin/plugin-src/listeners.ts b/figma-plugin/plugin-src/listeners.ts
new file mode 100644
index 0000000..7ef6af0
--- /dev/null
+++ b/figma-plugin/plugin-src/listeners.ts
@@ -0,0 +1,53 @@
+import { FRAME_NAME, KEY } from "../common/constants.js";
+import { emit } from "../common/fromPlugin.js";
+import { on } from "../common/fromUi.js";
+import { createGithubClient } from "./github.js";
+import { getAssetInIconFrame } from "./service.js";
+import { setLocalData } from "./utils.js";
+
+export function listenDeployIcon() {
+  on("DEPLOY_ICON", async ({ githubData, options }) => {
+    const { withPng } = options ?? { withPng: true };
+
+    try {
+      const { owner, name, apiKey } = githubData;
+      console.log("DEPLOY: ", owner, name, apiKey);
+
+      const { createDeployPR } = createGithubClient(owner, name, apiKey);
+      const iconaFrame = figma.currentPage.findOne((node) => {
+        return node.name === FRAME_NAME;
+      });
+
+      if (!iconaFrame) throw new Error("Icona frame not found");
+      const svgs = await getAssetInIconFrame(iconaFrame.id, {
+        withPng,
+      });
+
+      await createDeployPR(svgs);
+      emit("DEPLOY_DONE", null);
+    } catch (error) {
+      figma.notify("Error while deploying icons", {
+        timeout: 5000,
+        error: true,
+      });
+      emit("DEPLOY_DONE", null);
+    }
+  });
+}
+
+export function listenSetGithubApiKey() {
+  on("SET_GITHUB_API_KEY", ({ apiKey }) => {
+    setLocalData(KEY.GITHUB_API_KEY, apiKey);
+  });
+}
+
+export function listenSetGithubUrl() {
+  on("SET_GITHUB_URL", ({ url }) => {
+    setLocalData(KEY.GITHUB_REPO_URL, url);
+  });
+}
+export function listenPngOption() {
+  on("SET_PNG_OPTION", ({ withPng }) => {
+    setLocalData(KEY.DEPLOY_WITH_PNG, withPng);
+  });
+}
diff --git a/figma-plugin/plugin-src/tsconfig.json b/figma-plugin/plugin-src/tsconfig.json
index b237033..b616485 100644
--- a/figma-plugin/plugin-src/tsconfig.json
+++ b/figma-plugin/plugin-src/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
     "esModuleInterop": true,
     "isolatedModules": true,
-    "jsx": "react",
-    "lib": ["DOM", "ES2020"],
-    "module": "ES2020",
-    "moduleResolution": "Node",
-    "strict": true,
     "types": ["@figma/plugin-typings"]
   }
 }
diff --git a/figma-plugin/plugin-src/utils.ts b/figma-plugin/plugin-src/utils.ts
new file mode 100644
index 0000000..86a17d1
--- /dev/null
+++ b/figma-plugin/plugin-src/utils.ts
@@ -0,0 +1,8 @@
+export async function getLocalData(key: string) {
+  const data = await figma.clientStorage.getAsync(key);
+  return data;
+}
+
+export async function setLocalData(key: string, data: any) {
+  await figma.clientStorage.setAsync(key, data);
+}
diff --git a/figma-plugin/ui-src/contexts/AppContext.tsx b/figma-plugin/ui-src/contexts/AppContext.tsx
index 1bd0ef8..c3ca690 100644
--- a/figma-plugin/ui-src/contexts/AppContext.tsx
+++ b/figma-plugin/ui-src/contexts/AppContext.tsx
@@ -2,9 +2,9 @@ import type { IconaIconData } from "@icona/types";
 import type { Dispatch } from "react";
 import React, { createContext, useContext, useReducer } from "react";
 
-import { ACTION, STATUS } from "../../common/constants";
-import type { GithubData, Messages, Status } from "../../common/types";
-import { postMessage } from "../utils/figma";
+import { type Events as PluginEvents } from "../../common/fromPlugin";
+import { emit, type Events as UiEvents } from "../../common/fromUi";
+import type { GithubData } from "../../common/types";
 import { getGithubDataFromUrl } from "../utils/string";
 
 type State = {
@@ -20,115 +20,124 @@ type State = {
   githubApiKey: string;
 
   iconPreview: Record<string, IconaIconData>;
-  isDeployWithPng: boolean;
 
-  // Status
-  deployIconStatus: Status;
-  settingStatus: Status;
+  /* status */
+  isDeployWithPng: boolean;
+  isDeploying: boolean;
 };
 
-type AppDispatch = Dispatch<Messages>;
+type Actions =
+  | Omit<PluginEvents["GET_GITHUB_API_KEY"], "handler">
+  | Omit<PluginEvents["GET_GITHUB_REPO_URL"], "handler">
+  | Omit<PluginEvents["GET_DEPLOY_WITH_PNG"], "handler">
+  | Omit<PluginEvents["GET_USER_INFO"], "handler">
+  | Omit<PluginEvents["GET_ICON_PREVIEW"], "handler">
+  | Omit<PluginEvents["DEPLOY_DONE"], "handler">
+  | Omit<UiEvents["DEPLOY_ICON"], "handler">
+  | Omit<UiEvents["SET_PNG_OPTION"], "handler">
+  | Omit<UiEvents["SET_GITHUB_API_KEY"], "handler">
+  | Omit<UiEvents["SET_GITHUB_URL"], "handler">;
+
+type AppDispatch = Dispatch<Actions>;
 
 const AppStateContext = createContext<State | null>(null);
 const AppDispatchContext = createContext<AppDispatch | null>(null);
 
-function reducer(state: State, action: Messages): State {
-  switch (action.type) {
-    /* GETTER */
-    case ACTION.GET_DEPLOY_WITH_PNG: {
+function reducer(state: State, action: Actions): State {
+  switch (action.name) {
+    /* from Plugin */
+    case "GET_DEPLOY_WITH_PNG": {
+      const { deployWithPng = false } = action.payload;
       return {
         ...state,
-        isDeployWithPng: action.payload,
+        isDeployWithPng: deployWithPng,
       };
     }
-    case ACTION.GET_USER_INFO: {
+    case "GET_GITHUB_API_KEY": {
+      const { apiKey = "" } = action.payload;
       return {
         ...state,
-        userId: action.payload.id,
-        userName: action.payload.name,
+        githubApiKey: apiKey,
+        githubData: {
+          ...state.githubData,
+          apiKey,
+        },
       };
     }
-    case ACTION.GET_GITHUB_API_KEY:
+    case "GET_GITHUB_REPO_URL": {
+      const { repoUrl = "" } = action.payload;
       return {
         ...state,
-        githubApiKey: action.payload,
+        githubRepositoryUrl: repoUrl,
         githubData: {
           ...state.githubData,
-          apiKey: action.payload,
+          ...getGithubDataFromUrl(repoUrl),
         },
       };
-    case ACTION.GET_GITHUB_REPO_URL:
+    }
+
+    case "GET_USER_INFO": {
       return {
         ...state,
-        githubRepositoryUrl: action.payload,
-        githubData: {
-          ...state.githubData,
-          ...getGithubDataFromUrl(action.payload),
-        },
+        userId: action.payload.id,
+        userName: action.payload.name,
       };
-    case ACTION.GET_ICON_PREVIEW:
+    }
+
+    case "DEPLOY_DONE": {
       return {
         ...state,
-        iconPreview: action.payload,
+        isDeploying: false,
       };
+    }
+
+    /* from UI */
+    case "DEPLOY_ICON": {
+      emit("DEPLOY_ICON", action.payload);
 
-    /* SETTER */
-    case ACTION.SET_DEPLOY_WITH_PNG: {
-      postMessage({
-        type: action.type,
-        payload: action.payload,
-      });
       return {
         ...state,
-        isDeployWithPng: action.payload,
+        isDeploying: true,
       };
     }
 
-    case ACTION.SET_GITHUB_API_KEY:
-      postMessage({
-        type: action.type,
-        payload: action.payload,
-      });
+    case "SET_GITHUB_API_KEY": {
+      emit("SET_GITHUB_API_KEY", action.payload);
+
       return {
         ...state,
-        githubApiKey: action.payload,
-        githubData: {
-          ...state.githubData,
-          apiKey: action.payload,
-        },
+        githubApiKey: action.payload.apiKey,
       };
+    }
+
+    case "SET_GITHUB_URL": {
+      emit("SET_GITHUB_URL", action.payload);
 
-    case ACTION.SET_GITHUB_REPO_URL:
-      postMessage({
-        type: action.type,
-        payload: action.payload,
-      });
       return {
         ...state,
-        githubRepositoryUrl: action.payload,
+        githubRepositoryUrl: action.payload.url,
         githubData: {
           ...state.githubData,
-          ...getGithubDataFromUrl(action.payload),
+          ...getGithubDataFromUrl(action.payload.url),
         },
       };
+    }
 
-    case ACTION.DEPLOY_ICON: {
-      postMessage({
-        type: ACTION.DEPLOY_ICON,
-        payload: {
-          githubData: action.payload.githubData,
-          options: {
-            withPng: state.isDeployWithPng,
-          },
-        },
-      });
-      return state;
+    case "SET_PNG_OPTION": {
+      emit("SET_PNG_OPTION", action.payload);
+
+      return {
+        ...state,
+        isDeployWithPng: action.payload.withPng,
+      };
     }
 
-    case ACTION.DEPLOY_ICON_STATUS: {
+    case "GET_ICON_PREVIEW": {
+      const { icons } = action.payload;
+
       return {
         ...state,
-        deployIconStatus: action.payload,
+        iconPreview: icons,
       };
     }
 
@@ -154,43 +163,31 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     // Input
     githubApiKey: "",
     githubRepositoryUrl: "",
-    isDeployWithPng: true,
 
     // Status
-    deployIconStatus: STATUS.IDLE,
-    settingStatus: STATUS.IDLE,
+    isDeployWithPng: true,
+    isDeploying: false,
   });
 
-  // Init
-  React.useEffect(() => {
-    // NOTE: Event listener from figma
-    window.onmessage = (event) => {
-      const msg = event.data.pluginMessage as Messages;
-      switch (msg.type) {
-        case ACTION.GET_DEPLOY_WITH_PNG: {
-          dispatch({ type: msg.type, payload: msg.payload });
-          break;
-        }
-        case ACTION.GET_USER_INFO: {
-          dispatch({ type: msg.type, payload: msg.payload });
-          break;
-        }
-        case ACTION.GET_GITHUB_API_KEY:
-          dispatch({ type: msg.type, payload: msg.payload });
-          break;
-        case ACTION.GET_GITHUB_REPO_URL:
-          dispatch({ type: msg.type, payload: msg.payload });
-          break;
-        case ACTION.GET_ICON_PREVIEW:
-          dispatch({ type: msg.type, payload: msg.payload });
-          break;
-        case ACTION.DEPLOY_ICON_STATUS: {
-          dispatch({ type: msg.type, payload: msg.payload });
-          break;
-        }
-      }
-    };
-  }, []);
+  window.onmessage = (event) => {
+    if (typeof event.data.pluginMessage === "undefined") {
+      console.warn("not plugin message");
+      return;
+    }
+
+    const args = event.data.pluginMessage;
+    if (!Array.isArray(args)) {
+      return;
+    }
+
+    const [name, payload] = event.data.pluginMessage;
+    if (typeof name !== "string") {
+      return;
+    }
+
+    console.log("onmessage", name, payload);
+    dispatch({ name: name as Actions["name"], payload });
+  };
 
   return (
     <AppStateContext.Provider value={state}>
diff --git a/figma-plugin/ui-src/pages/Deploy.tsx b/figma-plugin/ui-src/pages/Deploy.tsx
index 2b49d44..0f3d7f1 100644
--- a/figma-plugin/ui-src/pages/Deploy.tsx
+++ b/figma-plugin/ui-src/pages/Deploy.tsx
@@ -9,14 +9,14 @@ import {
 import { useJune } from "june-so-sandbox-react";
 import * as React from "react";
 
-import { ACTION, DATA, STATUS } from "../../common/constants";
+import { FRAME_NAME } from "../../common/constants";
 import { useAppDispatch, useAppState } from "../contexts/AppContext";
 import * as styles from "./Deploy.css";
 
 const Deploy = () => {
   const dispatch = useAppDispatch();
   const {
-    deployIconStatus,
+    isDeploying,
     githubData,
     iconPreview,
     githubApiKey,
@@ -26,34 +26,15 @@ const Deploy = () => {
   const icons = Object.entries(iconPreview);
   const { track } = useJune();
 
-  const buttonInfo = {
-    [STATUS.IDLE]: {
-      children: "Deploy",
-      colorScheme: "gray",
-    },
-    [STATUS.LOADING]: {
-      children: <Spinner size="sm" />,
-      colorScheme: "gray",
-    },
-    [STATUS.SUCCESS]: {
-      children: "Deploy Success!",
-      colorScheme: "green",
-    },
-    [STATUS.ERROR]: {
-      children: "Deploy Failed!",
-      colorScheme: "red",
-    },
-  };
-
   const deploy = () => {
     dispatch({
-      type: ACTION.DEPLOY_ICON,
+      name: "DEPLOY_ICON",
       payload: {
         githubData,
       },
     });
     track({
-      event: "icona:deploy_icon",
+      event: "Icona: Deploy Icon",
       properties: {
         githubRepositoryName: githubData.name,
         githubRepositoryOwner: githubData.owner,
@@ -67,7 +48,7 @@ const Deploy = () => {
       <Text>
         {icons.length} icons found in{" "}
         <Text as="span" color="red.600">
-          `{DATA.ICON_FRAME_ID}`
+          {FRAME_NAME}
         </Text>{" "}
         frame
       </Text>
@@ -87,7 +68,7 @@ const Deploy = () => {
       <Text fontSize={12} margin={0}>
         • you must have at least 1 icon in{" "}
         <Text as="span" color="red.600">
-          `{DATA.ICON_FRAME_ID}`
+          {FRAME_NAME}
         </Text>{" "}
         frame
       </Text>
@@ -97,14 +78,18 @@ const Deploy = () => {
           githubApiKey === "" ||
           githubRepositoryUrl === "" ||
           icons.length === 0 ||
-          deployIconStatus === STATUS.LOADING ||
-          deployIconStatus === STATUS.SUCCESS ||
-          deployIconStatus === STATUS.ERROR
+          isDeploying
         }
         onClick={deploy}
-        colorScheme={buttonInfo[deployIconStatus].colorScheme}
+        colorScheme={isDeploying ? "gray" : "blue"}
       >
-        {buttonInfo[deployIconStatus].children}
+        {isDeploying ? (
+          <Spinner size="sm" />
+        ) : (
+          <Text fontWeight="bold" fontSize={14}>
+            Deploy
+          </Text>
+        )}
       </Button>
 
       <Checkbox
@@ -112,8 +97,10 @@ const Deploy = () => {
         isChecked={isDeployWithPng}
         onChange={() => {
           dispatch({
-            type: ACTION.SET_DEPLOY_WITH_PNG,
-            payload: !isDeployWithPng,
+            name: "SET_PNG_OPTION",
+            payload: {
+              withPng: !isDeployWithPng,
+            },
           });
         }}
       >
diff --git a/figma-plugin/ui-src/pages/Setting.tsx b/figma-plugin/ui-src/pages/Setting.tsx
index 20e14f4..ea13686 100644
--- a/figma-plugin/ui-src/pages/Setting.tsx
+++ b/figma-plugin/ui-src/pages/Setting.tsx
@@ -2,7 +2,6 @@
 import { Box, Link, Text } from "@chakra-ui/react";
 import * as React from "react";
 
-import { ACTION } from "../../common/constants";
 import { PasswordInput } from "../components/PasswordInput";
 import { TextInput } from "../components/TextInput";
 import { useAppDispatch, useAppState } from "../contexts/AppContext";
@@ -23,8 +22,10 @@ const Setting = () => {
         isError={githubRepositoryUrl.match(/https:\/\/github.com\/.*/) === null}
         handleChange={(event) => {
           dispatch({
-            type: ACTION.SET_GITHUB_REPO_URL,
-            payload: event.target.value,
+            name: "SET_GITHUB_URL",
+            payload: {
+              url: event.target.value,
+            },
           });
         }}
       />
@@ -45,8 +46,10 @@ const Setting = () => {
         isInvalid={githubApiKey === ""}
         handleChange={(event) => {
           dispatch({
-            type: ACTION.SET_GITHUB_API_KEY,
-            payload: event.target.value,
+            name: "SET_GITHUB_API_KEY",
+            payload: {
+              apiKey: event.target.value,
+            },
           });
         }}
       />
diff --git a/figma-plugin/ui-src/utils/figma.ts b/figma-plugin/ui-src/utils/figma.ts
deleted file mode 100644
index ff8db75..0000000
--- a/figma-plugin/ui-src/utils/figma.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { Messages } from "../../common/types";
-
-/* eslint-disable no-restricted-globals */
-export const postMessage = (data: Messages) => {
-  parent.postMessage({ pluginMessage: data }, "*");
-};
diff --git a/yarn.lock b/yarn.lock
index 58021a8..23fb30d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3059,6 +3059,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@create-figma-plugin/utilities@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@create-figma-plugin/utilities@npm:3.0.2"
+  dependencies:
+    hex-rgb: ^5.0.0
+    natural-compare-lite: 1.4.0
+    rgb-hex: ^4.1.0
+  checksum: 2b8b42b092edc4e5b2c843ebe06bb9a12cdc39294f87e6ef0eabfca49231be10b879fc232fe7f5c4a5e40a4dc9ba7d8ea6d2e56885053ffaad07c454cecc903f
+  languageName: node
+  linkType: hard
+
 "@emotion/babel-plugin@npm:^11.11.0":
   version: 11.11.0
   resolution: "@emotion/babel-plugin@npm:11.11.0"
@@ -3608,6 +3619,7 @@ __metadata:
   resolution: "@icona/figma-plugin@workspace:figma-plugin"
   dependencies:
     "@chakra-ui/react": ^2.6.1
+    "@create-figma-plugin/utilities": ^3.0.2
     "@emotion/react": ^11.11.0
     "@emotion/styled": ^11.11.0
     "@figma/plugin-typings": ^1.64.0
@@ -7311,6 +7323,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hex-rgb@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "hex-rgb@npm:5.0.0"
+  checksum: a88e3aaae5311f98716fb41a4e5efbc8d823de5c5d40f9ea77d111de96f3fb087d809021f85d40a98048a4827cd30945413bf1a5001ae7c23727ac628d666d26
+  languageName: node
+  linkType: hard
+
 "hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -8547,7 +8566,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"natural-compare-lite@npm:^1.4.0":
+"natural-compare-lite@npm:1.4.0, natural-compare-lite@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare-lite@npm:1.4.0"
   checksum: 5222ac3986a2b78dd6069ac62cbb52a7bf8ffc90d972ab76dfe7b01892485d229530ed20d0c62e79a6b363a663b273db3bde195a1358ce9e5f779d4453887225
@@ -9635,6 +9654,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rgb-hex@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "rgb-hex@npm:4.1.0"
+  checksum: 662dcc1e9016852a0cd28250edc68a6bcf5ad07bf0ab92c2419da79b3ad6880cf94cdf93412f035c88662e2b8482d6852171a3c015ed5eec031613740edd791e
+  languageName: node
+  linkType: hard
+
 "rimraf@npm:^3.0.2":
   version: 3.0.2
   resolution: "rimraf@npm:3.0.2"