Coder Social home page Coder Social logo

isarvindone / figma-matercolor Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 0.0 4.87 MB

๐ŸŽจ A Figma Plugin that generates Material Palettes and Styles for any color using the latest Color System Guidelines.

License: GNU General Public License v3.0

TypeScript 30.92% HTML 0.09% CSS 63.92% JavaScript 5.07%
figma figma-plugin generates-material-palettes material material-design palette

figma-matercolor's People

Contributors

dependabot[bot] avatar isarvindone avatar

Stargazers

 avatar  avatar

Watchers

 avatar

figma-matercolor's Issues

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.
image

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.

image

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.

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
Screen Shot 2021-09-22 at 1 48 00 PM

They're CLOSE but not exact.

Not sure exactly how to fix.

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!

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!
Matercolor

Anyways, thanks for your contribution to the Figma community.

Regards,
Norman

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:
image

Suggested:
image

image

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.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.