isarvindone/figma-matercolor

🎨 A Figma Plugin that generates Material Palettes and Styles for any color using the latest Color System Guidelines.

🎨 Matercolor

🧩 A Figma Plugin that generates Material Color Palettes for any Color based on the latest Material Color System Guidelines.

🚸  Usage

✨ New in v.2.0.0 : More palette varieties!

Updated to work with the latest version of Matercolor. Resolves issue #2: Enables 3-letter and 6-letter hex code input (with or without hash prefix) while also supporting selection via. color picker. Resolves issue #3: More freedom in naming and grouping palettes. Simply use / to nest palettes.

👟  Run the Plugin  🧩

↓

🖌️ Use it!

👐  Contributor's Checklist

• Before planning to contribute, create a ✨ new Issue ✨ so that we can discuss and improve on your proposed changes.
• Fork and clone this repository using git clone https://github.com/arvindcheenu/Matercolor.figma.git
• Go to this directory using cd figma-matercolor
• Run yarn to install dependencies.
• Run yarn build:watch to start webpack in watch mode.
• Open Figma → Plugins → Development → New Plugin... and choose manifest.json file from this repo.
• To change the UI of your plugin (the react code), start editing App.tsx.
• To interact with the Figma API edit controller.ts.
• For plugin development-related information, checkout Figma API Overview.
• As you make changes, create a Draft Pull Request referencing your issue using #[issue-number] and Happy Commiting!
• Happy with how your code works? Finalise your changes and open up your Pull Request for Review.
• After a few tantalizing review sessions, ✨ have a cup of ☕ and watch as your code gets merged! ✨

 🧰 Toolings

React	TypeScript	Webpack	Prettier

 🌀 Versioning

Follows Keep a Changelog and Semantic Versioning specifications. To know more about the changes made across the versions, see the tags on this repository.

📜  License

This project is licensed under the GPL-3.0 License.

figma-matercolor's Issues

Create only one layer when adding colors to the styles panel

Currently when I generate a color palette and select the option "Generate paint styles for palette", this adds several layers in my styles panel. It would be better to generate only one layer by default, and add sublayers if users would use the "/" symbol between names.

Currently:

Suggested:

You could also add a supportive text below the input field, saying that "/" will create sublayers/subfolders.

Would also suggest using an outlined style for the input field (similar to what Figma uses in the Share modal). This would better indicate its clickability.

Accent colors do not match Material's accent colors per Google

Spectrum generation for palette colors works great, but the Accents do not match what Material has on their site for even the basic rainbow they use.

Example:
Material A700 for Indigo: #304ffe
Matercolor A700 for Indigo: #3F51B5

They're CLOSE but not exact.

Not sure exactly how to fix.

Mark base color

As a user (UI designer) I would like to know at all times, from which color/hex code my color palette was generated from.

My suggestion would be adding another checkbox "Mark Base Color", which would add a -B to a color style e.g. Primary/200-B, so I would know this is the main color from the brand book.

An option is to extend the width of the plugin modal, thus making room for another checkbox. If "Make Paint Styles" = False, I would disable this option.

Enable HEX code input in modal window

I cannot input the HEX code directly in the modal window. I have to use the color picker, which sometimes tends to get the color value wrong, or I have to first switch from RGB to HSL and then to HEX to get to the input. If I could insert the HEX code into this field directly, that would be real awesome!

Anyways, thanks for your contribution to the Figma community.

Regards,
Norman

Lock base color

The plugin is fantastic! I only wondered if is it possible to lock the base color to 500? I couldn't find this option, but it would be really helpful!