Is there such a tool for web design projects or need to invent a Bicycle?

For several years, developing different sites/projects, I caught myself thinking that often do the same thing. That is, do different ways, but come to the same result. The desired result - the design.
Specifically, the design of the site expressed in css. It's not about layout, but about the design elements - buttons, menus, checkboxes, etc. Color, shape, size, effects.

Decided is to organize everything, organize it was convenient and relatively quick.
Maybe it's time to build your bike? Or such a tool already exist?
First of all, plan to create a tool for myself because existing solutions do not fully satisfy current needs.

The idea of this app/website for the development/customization of the elements of web design (buttons, menus, checkboxes). Visual interface to see the result in the current time. Changed the color of the button - see how it will look.

But such is already there. Of course, for several years I have tried many tools, but each has its disadvantages. And the task - more precisely, the result is often one css file with the design.

1 Bunch of online tools, generators, buttons, checkboxes. Different functionality, different configuration. A bunch of sites on my iPad. There is no unity.

2 Photoshop. Layout - wrapping in css. Not fast. There is no possibility of viewing effects, the behavior of the element when hovering/clicking. And so do websites, but here is the basic layout, composition. It's more about a specific website, and not about the elements.

3 Write CSS by hand, updated (and plugin) page. For a long time. To memorize the colors, then one color, there is a different, sizes.

4 Scss + Prepros (or equivalents) of the above. Already have variables, mixins, etc. has something similar, but still write the code by hand. And code written by hand, but when he different.
And then standard and 90% similar code - the element's border (border), color, size. And even their values are often inherited, such as single color border around all the buttons.

5) Frameworks. Go along with everyone. Edit it hands - possible but long. Even knowing that is difficult to create a good design because of the lack of unity. There color asked color green, there is the red border thicker - thinner, more indented less. For a long time.

Anyway, the template design is patterns. Conventional, but still there.
A certain number of colors, monotonous design elements, same margins/fonts/sizes, etc. part of the site in terms of design, is a web application. Composition not needed.
You just need to set the base colors, sizes, margins, effects, same type of behavior when hovering/clicking, etc.

Is there such a tool for web design projects or need to invent a Bicycle?
For the development of desktop applications (skins/visual elements) is slingeneyer implement part of the above-described functionality.
March 19th 20 at 08:24
4 answers
March 19th 20 at 08:26
I heard about the Figma, and I would like to stand up for her. A tool designed for the design of interfaces, and is used as an application and not a "website Builder". On Figma have a bunch of UI-kit, which in turn is divided into components. Using the command library, any user can use these UI kits and design interface. All the result you can see in the CSS:
spoiler
5c98935572860861423772.png

Moreover, most large companies have already switched to Figma.

Here you can create text styles for the entire document, and the button styles, and styles, colors, and styles of shadows and to use it all in a single component, applying styles to all elements.
March 19th 20 at 08:28
In addition to the answer @amely_Grah:

Introducing: Figma to React
March 19th 20 at 08:30
webflow , figma tried? what do you say about them?
No. But a quick look right now.
Reminds Webflow website Builder.
figma - like too something similar.

My idea is not to do the designer, and to provide a visual tool for convenient creating a css file with all necessary styles.
Because 90% of the time and many do not. Button, checkbox, panel, slider - any framework well, let 15-20 of these UI elements.

Now write in php and use your css-ui with styles.
While doing it on Scss + Prepros, which functions as variables and mixins gave me this idea. After all this, and did variables - uniformity.
Changed the font of the buttons are changed in the headers. Changed the border color - changed everywhere. Use mixins to inherit from. - mossie commented on March 19th 20 at 08:33
@mossie, uh figma site Builder?...
If the designer correctly uses the figma, he makes the frames which are copied and inherited, ie, the designer changes it in one place, and all the inherited elements also changed throughout the project. You can create a page of the brand (like so is called) which describes all the headers(sizes and colors), fonts, buttons(their behavior), just the colors of the site... Hence it inherited the styles to the headers of other frames. Changed in brenbot have changed everywhere.

P. S I'm not a designer, and I know the figma only in preview mode, but still... - benny_Eichmann commented on March 19th 20 at 08:36
March 19th 20 at 08:32
>we need to invent a Bicycle?

Yes

Find more questions by tags DesignHTMLCSS