choegyumin / pigyuma

UI Design Tool making project. 🖌️🐷🎨

Pigyuma 🖌️🐷🎨

Pigyuma is a toy project that makes a UI design tool like Figma!

Live Demo

https://pigyuma.vercel.app/

Features

• Layer Selection
• Layer Movement
• Layer Resizing
  • Precision resize: Ctrl
  • Resize from center: Alt
• Layer Rotation
• Artboard Drawing
• Shape layer Drawing
• Options control (in the panel)

Upcoming support

Visit our Pigyuma project plan to see the future plans for Pigyuma, including:

• Layer grouping
• Range selection
• Multi-layer Resizing and Rotation
• Zooming and Panning
• Text layer Input
• Image layer support
• SVG Support
• Code handoff
• Design tokens
• History logging

---

Repository Structure

Apps

• web: Live Demo Web with Next.js.

Packages

• @pigyuma/css-utils: Utility functions for CSS.
• @pigyuma/design-system: A collection of design tokens, components, and guidelines with React.
• @pigyuma/react-utility-types: Utility types for React.
• @pigyuma/react-utils: Custom hooks, utility components and functions for React.
• @pigyuma/tsconfig: tsconfig.json used throughout the monorepo.
• @pigyuma/ui-design-tool: API library and canvas for UI design tool like Figma.
• @pigyuma/utils: JavaScript utility functions like Lodash.

Tools

• eslint: ESLint configuration presets.
• vitest: Vitest configuration helpers.