Vestella Map – A Figma Plugin for Map Editing

Route Indication, Beacon Management, and Slot Tracking

About

🍀 Don’t take unnecessary repetitive tasks for granted anymore.

A Figma plugin that enhances overall productivity in creating and utilizing digital maps.

• Project Duration: 2025.08 - 2025.09 (v11.0.0)
• Project Tech Stack: React 19.1.0 + TypeScript 5.3.2 + Webpack 5.89.0, ESLint + Prettier
• API / Networking: Figma Plugin API, Web APIs (Blob, URL, DOM, Canvas), QR Server API, Google Fonts API

Design Feature

Parking Layout Generator

• Existing Problem: Each floor required repetitive manual placement of ~400 parking lots and the pillars.
• Approach: Using the repetitive pattern of columns every n parking spaces, the parking layout can be generated by setting intervals.
• Business Impact: 3 business days -> 1 business days (per floor) ✅

Slot Counter

• Existing Problem: Figma doesn’t auto-count slots, requiring manual counting in communicating the number of slots per floor or area.
• Approach: Count slots via real-time state synchronization based on Figma API - selectionchange events.
• Business Impact: Cut communication time by ~80% ✅

Development Feature

Beacon Numberer

• Existing Problem: Manually estimating beacon minor numbers from digital map coordinates was both slow and error-prone.
• Approach: Generate minor numbers using a formula relative to the parent frame size of each placed beacon.
• Business Impact: 2 hours of manual work -> 5 minutes automated (per floor) ✅

CSV & QR Exporter

• Existing Problem: Documenting or exporting an average of 100 beacons per floor required manual entry, which often resulted in errors such as incorrect numbers or missing data.
• Approach: Developed a feature to detect “beacon” group node, sort them ascendingly, and export the information via CSV or QR code.
• Business Impact: Error rate reduced from 10% to 0%, processing time reduced from 1 hour to 10 seconds (per floor) ✅

Setting Feature

Setting Storage

• Existing Problem: Each task required repeatedly remembering section-specific details such as spacing, size, and beacon configurations.
• Approach: Implemented a storage mechanism using Figma’s clientStorage to save user information.
• Business Impact: Reduced repetitive setup time by ~70%, lowered error rate to near zero. ✅

License

Apache 2.0 © VestellaLab, Inc. See LICENSE for details.