"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", h3: "h3", hr: "hr", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["I’m building a ", _jsx("a", { href: "https://story.vjy.me/23/", target: "_blank", children: "Figma plugin" }), " to create and manage variables and style easily. At first, everything was smooth— I had a simple structure, and adding features felt effortless. But as the project grew, things started getting messy. Managing state became a nightmare."] }), "\n", _jsx(_components.p, { children: "I was using Context API with reducers, thinking it was the best approach. But soon, my code was drowning in providers, actions, and reducers spread across multiple files. Every small change felt like a battle. Debugging was a headache. I knew there had to be a better way." }), "\n", _jsx(_components.p, { children: "That’s when I found Zustand. I decided to give it a shot, and within hours, I was hooked. What used to take dozens of files now needed just a few simple stores. My code was cleaner, easier to manage, and my development speed shot up." }), "\n", _jsx(_components.p, { children: "Let me show you why Zustand completely changed how I handle state in React!" }), "\n", _jsx(_components.h2, { children: "A Simple Counter Example" }), "\n", _jsx(_components.h3, { children: "Before Zustand (Using Context API)" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// CounterContext.jsx\nimport React, { createContext, useContext, useReducer } from 'react'\n\n// 1. Create context\nconst CounterContext = createContext()\n\n// 2. Define reducer\nfunction counterReducer(state, action) {\n switch (action.type) {\n case 'INCREMENT':\n return { count: state.count + 1 }\n case 'DECREMENT':\n return { count: state.count - 1 }\n case 'RESET':\n return { count: 0 }\n default:\n return state\n }\n}\n\n// 3. Create provider\nexport function CounterProvider({ children }) {\n const [state, dispatch] = useReducer(counterReducer, { count: 0 })\n \n return (\n \n {children}\n \n )\n}\n\n// 4. Create custom hook\nexport function useCounter() {\n const context = useContext(CounterContext)\n if (!context) {\n throw new Error('useCounter must be used within CounterProvider')\n }\n return context\n}\n" }) }), "\n", _jsx(_components.p, { children: "Then in your component:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// Counter.jsx with Context\nimport { useCounter } from './CounterContext'\n\nfunction Counter() {\n const { state, dispatch } = useCounter()\n \n return (\n

Count: {state.count}

\n \n \n \n

\n )\n}\n" }) }), "\n", _jsx(_components.p, { children: "And you'd still need to wrap your app with:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "CounterProvider"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "App"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "\n### Using Zustand\n``` typescript\n// store.js\nimport { create } from 'zustand'\n\n// Create a store\nconst useCounterStore = create((set) => ({\n // State\n count: 0,\n \n // Actions\n increment: () => set((state) => ({ count: state.count + 1 })),\n decrement: () => set((state) => ({ count: state.count - 1 })),\n reset: () => set({ count: 0 }),\n}))\n\nexport default useCounterStore\n" }) }), "\n", _jsx(_components.p, { children: "That's it! Now you can use this store in any component:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// Counter.jsx\nimport useCounterStore from './store'\n\nfunction Counter() {\n // Extract just what you need from the store\n const { count, increment, decrement, reset } = useCounterStore()\n \n return (\n

Count: {count}

\n \n \n \n

\n )\n}\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "No Providers" }), " - Just create your store and use it anywhere"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "No Boilerplate" }), " - No need for action types, reducers, or dispatch"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Simple Syntax" }), " - State and actions in one place"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Selective Updates" }), " - Components only re-render when their specific data changes"] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "My Plugin Management using Zustand Store" }), "\n", _jsxs(_components.p, { children: ["For my Figma plugin, I needed a powerful typography management system, ", _jsx(_components.code, { children: "TypographyStore" }), ", to handle fonts, weights, styles, and their relationships. I also have ", _jsx(_components.code, { children: "ColorStore" }), " for creating colors and their aliases, and ", _jsx(_components.code, { children: "MiscStore" }), " for managing things like sizes, radius, and more. On top of that, I’m working on many other features."] }), "\n", _jsxs(_components.p, { children: ["Here’s snippets from my ", _jsx(_components.code, { children: "TypographyStore" }), " how Zustand made all of this possible with minimal code:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// typographyStore.js\nimport { create } from 'zustand';\nimport { fontWeightTokens } from '../lib/typography';\nimport { loadFont } from './helpers';\nimport { ClientStorageManager } from './ClientStorageManager';\n\n// Create the store\nexport const useTypographyStore = create((set, get) => ({\n // State\n typography: {\n family: {\n primary: \"Inter\",\n },\n weights: fontWeightTokens,\n styles: {\n \"Heading/H1\": {\n fontSize: 48,\n lineHeight: { value: 56, unit: \"PIXELS\" },\n letterSpacing: -0.5,\n weights: {\n medium: \"Medium\",\n }\n },\n // Other styles...\n }\n },\n hasChanges: false,\n isInitialized: false,\n\n // Actions for font management\n updatePrimaryFont: async (fontFamily) => {\n try {\n await loadFont(fontFamily);\n set((state) => ({\n typography: {\n ...state.typography,\n family: {\n ...state.typography.family,\n primary: fontFamily,\n },\n },\n hasChanges: true,\n }));\n return true;\n } catch (error) {\n console.error('Failed to load primary font:', error);\n return false;\n }\n },\n \n // Style management\n updateStyle: (styleName, style) => {\n set(state => {\n const updatedStyles = { ...state.typography.styles };\n\n if (style) {\n updatedStyles[styleName] = style;\n } else {\n delete updatedStyles[styleName];\n }\n\n return {\n typography: {\n ...state.typography,\n styles: updatedStyles\n },\n hasChanges: true\n };\n });\n },\n \n // Persistence layer\n saveStyles: async () => {\n const { typography } = get();\n await ClientStorageManager.set('TYPOGRAPHY_STYLES', typography);\n set({ hasChanges: false });\n },\n \n loadStyles: async () => {\n const styles = await ClientStorageManager.get('TYPOGRAPHY_STYLES');\n if (styles) {\n set({ typography: styles, hasChanges: false });\n }\n },\n \n // Initialize the store\n initialize: () => set({ isInitialized: true }),\n}));\n\n" }) }), "\n", _jsx(_components.p, { children: "Using Zustand here how it helps my Plugin" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Complex Nested State" }), " - Typography involves multiple levels of data (fonts, weights, styles). With Context API, I was constantly struggling with immutable updates to deeply nested objects. Zustand's set function makes these updates clean and predictable."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Asynchronous Font Loading" }), " - Loading fonts is asynchronous, which was a pain to handle with reducers. Zustand lets me create async actions directly in the store without middleware or thunks."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Persistence Between Sessions" }), " - Figma plugins need to save and load state. The get() method gives me access to the current state from any action, making it simple to implement storage operations."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Plugin Communication" }), " - Figma plugins communicate between UI and the main thread. Having a centralized store makes it easier to sync state changes with the Figma document."] }), "\n"] }), "\n", _jsx(_components.p, { children: "The beauty of Zustand is how cleanly it integrates with React components:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function FontSelector() {\n // Only subscribes to the specific state needed\n const primaryFont = useTypographyStore(state => state.typography.family.primary);\n const updatePrimaryFont = useTypographyStore(state => state.updatePrimaryFont);\n \n return (\n \n );\n}\n" }) }), "\n", _jsx(_components.h2, { children: "Specific Benefits I've Experienced" }), "\n", _jsx(_components.p, { children: "After refactoring my Figma plugin to use Zustand:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Code Reduction" }), " - My state management code shrunk by ~60%"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Faster Development" }), " - Adding new features became much quicker"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Better Performance" }), " - Components only re-render when their specific data changes"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Easier Debugging" }), " - Having all state and actions in one place made tracking issues much simpler"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Conclusion" }), "\n", _jsx(_components.p, { children: "I restarted the project from scratch with a blank project files, refactoring all the code and setting up a proper structure to keep it manageable. I think this is the biggest plugin I’ve worked on so far, with so many features to manage and different contexts to handle." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "WIP mock of Plugin I'm working on" }), "\n", _jsx("img", { src: "/stories/images/design-system-ui-1.jpg", className: "large" }), "\n", _jsx("a", { href: "https://s.vjy.me/project-ds", className: "align-left full-wd lg blu", children: "You can signup here" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

How I Simplified My Figma Plugin with Zustand

Apr 3, 2025 · 5 min read

stay hungry, stay foolish

-Steve Jobs