Date

2024

Industry

Design tools

Client

Personal project

Role

Product Designer / Developer

Designing and developing a figma plugin for the community

Simplifying color system visualization in figma

I designed and built this Figma plugin to address a direct community need: an effective method for visualizing color variable collections as distinct palettes. This personal project involved the complete UX/UI design, developing the plugin using the Figma API to read variables, and publishing it to the Figma Community. The goal was to provide a tool that integrates natively within the Figma environment, allowing designers to quickly and clearly see how their color variables organize into palettes.

Large Project Gallery Image #1
Large Project Gallery Image #1
Large Project Gallery Image #1

Transforming variables into visual palettes

The main challenge was to create a simple, intuitive solution for a process that was previously manual and time-consuming. Designers often manage extensive libraries of color variables but lacked a direct way to convert them into organized palette previews, whether for their own understanding, documentation, or communication with other team members.

Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2

Project metrics

1.5K

Active users

Figma Community adoption

1.5K

Active users

Figma Community adoption

1.5K

Active users

Figma Community adoption

65

Community likes

User appreciation score

65

Community likes

User appreciation score

65

Community likes

User appreciation score

30s

Generation speed

Full product palette creation

30s

Generation speed

Full product palette creation

30s

Generation speed

Full product palette creation

90%

Time saved

vs manual palette creation

90%

Time saved

vs manual palette creation

90%

Time saved

vs manual palette creation

What I learned building a plugin

Solving your own problem first makes better tools

I was frustrated with manually creating color palettes, so I built this plugin. Solving my own problem first meant I understood it deeply before helping others.

Figma's API teaches you to think in data structures

Color variables are complex objects with collections, modes, and relationships. Figma's data model taught me to see design systems as interconnected information, not just visuals.

Real color data is messier than design mockups

Real design systems revealed edge cases I never considered - missing values, naming conflicts. Real data complexity taught me to build more resilient interfaces.

Performance matters even in plugins

Processing hundreds of variables taught me to optimize differently - batching API calls, caching data, rendering incrementally.

Solving your own problem first makes better tools

I was frustrated with manually creating color palettes, so I built this plugin. Solving my own problem first meant I understood it deeply before helping others.

Figma's API teaches you to think in data structures

Color variables are complex objects with collections, modes, and relationships. Figma's data model taught me to see design systems as interconnected information, not just visuals.

Real color data is messier than design mockups

Real design systems revealed edge cases I never considered - missing values, naming conflicts. Real data complexity taught me to build more resilient interfaces.

Performance matters even in plugins

Processing hundreds of variables taught me to optimize differently - batching API calls, caching data, rendering incrementally.

Solving your own problem first makes better tools

I was frustrated with manually creating color palettes, so I built this plugin. Solving my own problem first meant I understood it deeply before helping others.

Figma's API teaches you to think in data structures

Color variables are complex objects with collections, modes, and relationships. Figma's data model taught me to see design systems as interconnected information, not just visuals.

Real color data is messier than design mockups

Real design systems revealed edge cases I never considered - missing values, naming conflicts. Real data complexity taught me to build more resilient interfaces.

Performance matters even in plugins

Processing hundreds of variables taught me to optimize differently - batching API calls, caching data, rendering incrementally.

Solving your own problem first makes better tools

I was frustrated with manually creating color palettes, so I built this plugin. Solving my own problem first meant I understood it deeply before helping others.

Figma's API teaches you to think in data structures

Color variables are complex objects with collections, modes, and relationships. Figma's data model taught me to see design systems as interconnected information, not just visuals.

Real color data is messier than design mockups

Real design systems revealed edge cases I never considered - missing values, naming conflicts. Real data complexity taught me to build more resilient interfaces.

Performance matters even in plugins

Processing hundreds of variables taught me to optimize differently - batching API calls, caching data, rendering incrementally.

LET'S BUILD TOGETHER

Get thoughtful design that works beautifully.
Let's discuss your project today.

Open for collaboration

Address

Lyon, France

2025 | france | Crafting digital products | Available for new projects

LET'S BUILD TOGETHER

Get thoughtful design that works beautifully.
Let's discuss your project today.

Open for collaboration

Address

Lyon, France

2025 | france | Crafting digital products | Available for new projects

LET'S BUILD TOGETHER

Get thoughtful design that works beautifully.
Let's discuss your project today.

Open for collaboration

Address

Lyon, France

2025 | france | Crafting digital products | Available for new projects