July 1st 2025

Building a Plugin for Figma

A designer building for designers — one plugin, one step closer to product leadership.

The Opportunity

At Orca Scan, we help teams across manufacturing, healthcare, and logistics track barcode data at scale. But we noticed a new opportunity: people designing packaging, signage, and labels — often in Figma — didn’t have an easy way to generate barcodes in their workflow.

We saw a strategic need to increase product awareness and expand our presence in more creative and design-led environments, where barcodes are still essential but less visible in digital workflows. Figma users frequently need to create barcodes but often lack the tools to do so. We realized this was an untapped entry point: we could build something that made barcode generation effortless and introduce a new audience to our platform in the process.

At the same time, I was personally looking to grow beyond UI/UX execution. In a conversation with our founder, we discussed my goal of becoming a more strategic UX designer with strong dev fluency — someone able to lead cross-functional conversations and influence product direction. This plugin became a perfect stepping stone: an intersection of product strategy, UX, and technical implementation.

Why a Figma Plugin?

  • Designers working in Figma for print, events, and packaging often need to create barcodes but lack good tools
  • With Orca Scan, they could generate, manage, and track codes without technical support
  • The plugin could surface new use cases in industries we already serve
  • It also allowed us to explore plugin development as a new product strategy
  • It was also a perfect sandbox for me to apply both design and code thinking to solve a real problem

My Role

While the idea was brought up by our team, I fully owned the execution:

  • Researched competing tools and mapped the user pain points
  • Designed the UI and scoped the feature set
  • Learned the Figma Plugin API from scratch
  • Built the plugin using vanilla JS, HTML, and CSS
  • Integrated our brand’s design tokens and Orca’s barcode generator logic
  • Delivered the internal MVP and coordinated testing

“I didn’t write code to become a developer — I wrote code to become a better product designer”

Technical Implementation (Summarized for Designers & Devs)

I had never built a plugin before, let alone worked with JavaScript in a real-world setting. So I approached this like any other product challenge: research, break it down, and start small.

1. Studying the Ecosystem

I began by researching existing Figma plugins for barcode generation. Many were outdated or overly technical — and none offered a seamless, user-friendly experience. That validated the need for something better.

2. Understanding the Constraints

Figma plugins have a specific architecture. I read their documentation, explored tutorials, and mapped the file structure I’d need:

  • A manifest.json to declare the plugin
  • A ui.html file for the interface
  • A code.js file to handle logic
  • And a style.css file to bring it to life

3. Designing the UI

Before jumping into code, I designed the interface in Figma itself — keeping it minimal, familiar, and on-brand. I pulled in tokens from our design system to ensure consistency, even within this micro-tool.

4. Learning by Doing

With the UI designed, I dove into code. I started writing basic JavaScript to handle input fields, button clicks, and dynamic barcode generation. I connected the plugin to Orca Scan’s barcode logic (no API call needed) and handled different barcode types like QR, EAN, and Code 128.

5. Testing and Iterating

Once I had a working MVP, I tested it with our team and refined the flow. I added placeholder text, and logic to reset the UI when needed. I also scoped what not to build — which helped keep it focused and shippable.

What I Learned

This wasn’t about becoming a developer — it was about becoming a more well-rounded product designer.

I now understand how plugins are structured, how front-end logic works, and most importantly, how technical constraints influence UX decisions. That’s the kind of perspective I want to bring into product strategy.

Tools used in this project

Figma | HTML/CSS | JavaScript | Figma Plugin API | Orca Scan API | VS Code | GitHub

Do you want to try the plugin?

Go to Plugin website

Let’s work together

July 1st 2025

Building a Plugin for Figma

My First UX Project, revisited.

The Opportunity

At Orca Scan, we help teams across manufacturing, healthcare, and logistics track barcode data at scale. But we noticed a new opportunity: people designing packaging, signage, and labels — often in Figma — didn’t have an easy way to generate barcodes in their workflow.

We saw a strategic need to increase product awareness and expand our presence in more creative and design-led environments, where barcodes are still essential but less visible in digital workflows. Figma users frequently need to create barcodes but often lack the tools to do so. We realized this was an untapped entry point: we could build something that made barcode generation effortless and introduce a new audience to our platform in the process.

At the same time, I was personally looking to grow beyond UI/UX execution. In a conversation with our founder, we discussed my goal of becoming a more strategic UX designer with strong dev fluency — someone able to lead cross-functional conversations and influence product direction. This plugin became a perfect stepping stone: an intersection of product strategy, UX, and technical implementation.

Why a Figma Plugin?

  • Designers working in Figma for print, events, and packaging often need to create barcodes but lack good tools
  • With Orca Scan, they could generate, manage, and track codes without technical support
  • The plugin could surface new use cases in industries we already serve
  • It also allowed us to explore plugin development as a new product strategy
  • It was also a perfect sandbox for me to apply both design and code thinking to solve a real problem

My Role

While the idea was brought up by our team, I fully owned the execution:

  • Researched competing tools and mapped the user pain points
  • Designed the UI and scoped the feature set
  • Learned the Figma Plugin API from scratch
  • Built the plugin using vanilla JS, HTML, and CSS
  • Integrated our brand’s design tokens and Orca’s barcode generator logic
  • Delivered the internal MVP and coordinated testing

“I didn’t write code to become a developer — I wrote code to become a better product designer”

Technical Implementation (Summarized for Designers & Devs)

I had never built a plugin before, let alone worked with JavaScript in a real-world setting. So I approached this like any other product challenge: research, break it down, and start small.

1. Studying the Ecosystem

I began by researching existing Figma plugins for barcode generation. Many were outdated or overly technical — and none offered a seamless, user-friendly experience. That validated the need for something better.

2. Understanding the Constraints

Figma plugins have a specific architecture. I read their documentation, explored tutorials, and mapped the file structure I’d need:

  • A manifest.json to declare the plugin
  • A ui.html file for the interface
  • A code.js file to handle logic
  • And a style.css file to bring it to life

3. Designing the UI

Before jumping into code, I designed the interface in Figma itself — keeping it minimal, familiar, and on-brand. I pulled in tokens from our design system to ensure consistency, even within this micro-tool.

4. Learning by Doing

With the UI designed, I dove into code. I started writing basic JavaScript to handle input fields, button clicks, and dynamic barcode generation. I connected the plugin to Orca Scan’s barcode logic (no API call needed) and handled different barcode types like QR, EAN, and Code 128.

5. Testing and Iterating

Once I had a working MVP, I tested it with our team and refined the flow. I added placeholder text, and logic to reset the UI when needed. I also scoped what not to build — which helped keep it focused and shippable.

What I Learned

This wasn’t about becoming a developer — it was about becoming a more well-rounded product designer.

I now understand how plugins are structured, how front-end logic works, and most importantly, how technical constraints influence UX decisions. That’s the kind of perspective I want to bring into product strategy.

Tools used in this project

Figma | HTML/CSS | JavaScript | Figma Plugin API | Orca Scan API | VS Code | GitHub

Do you want to try the plugin?

Go to Plugin website

Let’s work together

July 1st 2025

Building a Plugin for Figma

A designer building for designers — one plugin, one step closer to product leadership.

The Opportunity

At Orca Scan, we help teams across manufacturing, healthcare, and logistics track barcode data at scale. But we noticed a new opportunity: people designing packaging, signage, and labels — often in Figma — didn’t have an easy way to generate barcodes in their workflow.

We saw a strategic need to increase product awareness and expand our presence in more creative and design-led environments, where barcodes are still essential but less visible in digital workflows. Figma users frequently need to create barcodes but often lack the tools to do so. We realized this was an untapped entry point: we could build something that made barcode generation effortless and introduce a new audience to our platform in the process.

At the same time, I was personally looking to grow beyond UI/UX execution. In a conversation with our founder, we discussed my goal of becoming a more strategic UX designer with strong dev fluency — someone able to lead cross-functional conversations and influence product direction. This plugin became a perfect stepping stone: an intersection of product strategy, UX, and technical implementation.

Why a Figma Plugin?

  • Designers working in Figma for print, events, and packaging often need to create barcodes but lack good tools
  • With Orca Scan, they could generate, manage, and track codes without technical support
  • The plugin could surface new use cases in industries we already serve
  • It also allowed us to explore plugin development as a new product strategy
  • It was also a perfect sandbox for me to apply both design and code thinking to solve a real problem

My Role

While the idea was brought up by our team, I fully owned the execution:

  • Researched competing tools and mapped the user pain points
  • Designed the UI and scoped the feature set
  • Learned the Figma Plugin API from scratch
  • Built the plugin using vanilla JS, HTML, and CSS
  • Integrated our brand’s design tokens and Orca’s barcode generator logic
  • Delivered the internal MVP and coordinated testing

“I didn’t write code to become a developer — I wrote code to become a better product designer”

Technical Implementation (Summarized for Designers & Devs)

I had never built a plugin before, let alone worked with JavaScript in a real-world setting. So I approached this like any other product challenge: research, break it down, and start small.

1. Studying the Ecosystem

I began by researching existing Figma plugins for barcode generation. Many were outdated or overly technical — and none offered a seamless, user-friendly experience. That validated the need for something better.

2. Understanding the Constraints

Figma plugins have a specific architecture. I read their documentation, explored tutorials, and mapped the file structure I’d need:

  • A manifest.json to declare the plugin
  • A ui.html file for the interface
  • A code.js file to handle logic
  • And a style.css file to bring it to life

3. Designing the UI

Before jumping into code, I designed the interface in Figma itself — keeping it minimal, familiar, and on-brand. I pulled in tokens from our design system to ensure consistency, even within this micro-tool.

4. Learning by Doing

With the UI designed, I dove into code. I started writing basic JavaScript to handle input fields, button clicks, and dynamic barcode generation. I connected the plugin to Orca Scan’s barcode logic (no API call needed) and handled different barcode types like QR, EAN, and Code 128.

5. Testing and Iterating

Once I had a working MVP, I tested it with our team and refined the flow. I added placeholder text, and logic to reset the UI when needed. I also scoped what not to build — which helped keep it focused and shippable.

What I Learned

This wasn’t about becoming a developer — it was about becoming a more well-rounded product designer.

I now understand how plugins are structured, how front-end logic works, and most importantly, how technical constraints influence UX decisions. That’s the kind of perspective I want to bring into product strategy.

Tools used in this project

Figma | HTML/CSS | JavaScript | Figma Plugin API | Orca Scan API | VS Code | GitHub

Do you want to try the plugin?

Go to Plugin website