What the Plugin Does

The plugin allows designers to:

• Insert currency as symbol ($, £, ₦) or code (USD, GBP, NGN)
• Apply currency as a prefix or suffix
• Automatically format thousands separators and preserve decimals
• Edit multiple text layers simultaneously
• Preserve existing typography styles and colours
• Maintain each text layer's original numeric value (e.g. 1,000 and 500 become $1,000 and $500, not duplicated values)

Approach

• search and filtering states
• selection behaviour
• input handling states
• prefix/suffix configuration
• symbol vs code switching

Dogfooding The Tool

After achieving a functional prototype, I used Currency Glyphs throughout its own redesign. All currency symbols used in the interface and illustrations were generated directly by the plugin. This helped validate real-world usability early and exposed edge cases during everyday design work.

Interface Design Decisions

Empty State — I designed a custom illustration showing currencies on keyboard-like keys. This communicates the core value of the plugin; accessing symbols you cannot type directly.

Layout Structure & Alignment — The interface follows strict vertical alignment rules to maintain consistency across list items, controls, and input areas. This created a clear visual rhythm and ensured the plugin felt cohesive even within a constrained space.

Country-Aware Search Behaviour — Some currencies are shared across multiple countries (for example, the euro). Searching for a specific country reorders the results so the queried country appears first within that currency group. This reduces scanning effort and helps users quickly confirm they've selected the correct context, especially when working across multiple regions.

Context-Responsive Settings — The settings panel updates dynamically based on the selected currency. When a currency is chosen from search results, the corresponding symbol or ISO code automatically appears in the configuration controls. This keeps the interface in sync with the user's selection and removes the need for manual switching, reducing errors and unnecessary steps.

Subtle Patterning — A faint repeating grid made of currency symbols sits at the base of the interface. It visually anchors the plugin while reinforcing its purpose without distracting from the workflow.

Light and Dark Mode — The UI adapts to Figma's theme, ensuring it feels native rather than external.

Constraints & Challenges

Plugin Size Constraints — My first interface was designed at a 420px width, which made the plugin view a larger window. After researching typical plugin dimensions (~320 × 480px), I redesigned the layout multiple times to reduce visual weight while retaining functionality.

Edge Cases — During testing I discovered some currency symbols vary significantly in width. The layout had to accommodate wide glyphs without breaking alignment or truncating values, which required restructuring the UI and spacing logic.

Implementation — As a non-technical designer, setting up Git, GitHub, and local plugin environments was initially challenging. Some UI behaviours also did not translate perfectly during implementation, so I collaborated with a frontend developer to help with some engineering fixes to ensure the interface correctly matched with the design.

Iteration & Testing

After stress-testing, I made several changes:

• Reduced overall frame size
• Adjusted typography scale
• Reworked container spacing
• Improved multi-selection behaviour
• Refined input handling

What I Learned

This project taught me that building tools changes how you design products and that design value is often not in adding features, but in removing friction.

Key takeaways for me:

• Constraints could help shape clarity — Designing within strict dimension limits forced clearer hierarchy, simpler controls, and more deliberate decisions.
• Edge cases reveal real usability — Handling wide currency symbols, decimals, and multi-layer selections showed that usability isn't proven by the ideal scenario, but by the situations most likely to break.
• Functional prototypes help in revealing design problems faster than static mockups

Credits

Onazi Daniel — Frontend Engineer