Every design system is built on basic elements like color, type, shape, and elevation. I designed Fledge as a playground for configuring those elements and seeing the outcome in real-time. The main goals I hoped to achieve were:
The name Fledge relates to baby birds learning to fly so I designed a stylized F logo using a feather. My hope is this tool helps get new design systems off the ground, faster.
I built the app in Vue.js, starting with basic color editing. I created a color picker input, bound it's value to a property in state, then wrote a method that generates a formatted string of CSS. The string was then inserted into a <style>
tag in the DOM, which immediately rendered on the page. I added an element to the page with a matching class name that consumed the color.
The proof of concept worked - as a user I could pick a color from the UI and it would immediately change the color of the element on screen.
Since <style>
tags are just CSS in the DOM, I decided to let users to download that file using the file-saver
npm package. Once that was working I focused on scaling up the inputs for the design system. I built out configurations for color, fonts, type scale, shadows, borders, cards, buttons, and inputs. The latter ones were dependent on the configurations of the former, which was pretty cool.
After a week of development I released Fledge in Alpha, you can view it live on GitHub Pages. I need to fix a couple minor bugs, add some new sample pages, and tidy up. I'd also like to make a few videos about the tool when it's more complete so people can get a feel for how to use it. If you'd like to know more about how I built Fledge you can check out the source code, or just contact me directly and we can talk shop.