Pride Flags & Gradients: A Figma plugin

🌈 Pride Flags & Gradients is a small Figma plugin allowing designers to implement Pride flags and colors via gradients. The patterns fill in a selected shape, making them fully resizable, rotatble, and editable, without distorting the ratios of the flags. The plugin can be installed from its Figma Community page.

 

Contents

At the moment, the plugin contains these gradients:

• Pride flag
• Transgender flag
• Subtle trans gradient
• Nonbinary flag
• Subtle NB gradient
• Bisexual flag
• Subtle bi gradient
• Pansexual flag
• Asexual flag
• Subtle ace gradient
• Lesbian flag
• MLM flag

 

New flags and gradients can be added by editing the src/app/assets/flags.json file, expanding the flags array with a flag's ID, name (displayed in the plugin), and background. The background defines the flag/gradient. It's format is similar to a CSS linear-gradient:

[0-360]deg, #hexcode1 start% end%, #hexcode2 start% end%, #hexcode3 start% end%, ...

 

For example, the bisexual flag's background is:

180deg, #D60270 0% 40%, #9B4F96 40% 60%, #0038A8 60% 100%

 

How it works

This section shortly explains how the plugin works, including some of the more complicated logic. If you just want to use the plugin, feel free to skip this section. The main UI of the plugin is defined in src/app/components/App.tsx. The front-end consists of a topBar, which includes the plugin's name, author name, and a promo text on hover. Under the topBar is a list of buttons, dynamically generated by looping over the array in src/app/assets/flags.json and filling in details into the GradientButton template.

When a GradientButton is clicked, App.tsx sends a message to the Figma API plugin controller (src/plugin/controller.ts), which checks if the user has any selected objects in Figma. It then sends that information back to App.tsx. If the user doesn't have a selection, App.tsx displays an alert notifying the user of this fact. Otherwise, it calls the ApplyGradient function, which pulls the appropriate data (more on that later) from the selected flag and sends instructions to apply the gradient back to the plugin controller.

The Figma API stores gradients in a fairly complicated format, which is why it was necessary to create the CssToGradient function. This function takes a CSS-like statement in the format defined above and converts it to the format that Figma requires to properly apply a gradient. The important elements of this format are gradientStops, and gradientTransform, defining the gradient's colors and their positions, and its rotation respectively. The rotation is calculated from the first argument in the CSS-like statement (e.g. 180deg). The value is converted to radians, and, after some calculations, pushed into the top two rows of a 3x3 matrix, as defined in the docs. When interpreting the colors, the function converts them from hex to rgb(a), and creates two instances for each color (one with the starting position, one in the ending position). The positions are converted from percentage to a value between 0 and 1. These colors are then pushed into the gradientStops array. The gradientStops and gradientTransform arrays are later substituted into src/app/assets/gradient_template.json, which contains all the other info Figma needs in a gradient.

 

Possible future features

This section outlines some features that could be added into the plugin. If you'd like to contribute any of these, feel free to open a pull request.

• Sort the flags into categories the user can select (e.g. normal flags, gradients, pastel flags, etc.)
• Add a search function

 

Miscellaneous

This project initially used the figma-plugin-react-template template by nirsky.

You can support this project with a few dollars using the Sponsor button here on GitHub.