Brief
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:
- Enabling live edits of common styles
- Providing an output of come kind
- Giving multiple preview options
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.
Process
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.
Outcomes
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.
