Build, Ship, & Maintain Design Systems with Backlight | CSS-Tricks

Design systems are a complete task these days. Agencies are contracted to create them. Internal teams are formed to handle them, charge them so other teams can use them and help ensure they do. Design systems are not a fad, they are a positive evolution of how digital design works. Backlighting is the all-in-one comprehensive development tool for design systems.

I think it’s interesting to start thinking about this at the end. What is the best scenario for a web design system? I guess when you publish a version build system to npm. This way teams can pull it off as a dependency on the project and use it. how do you do that? Your design system is on GitHub and you can post from there. how do you do that? You work on your design system with a development environment that pays to GitHub. What is backlighting? It’s that development environment.

Rotate an entire design system in seconds

Do you want to watch me do it?

don’t do Owns To choose a starting model, but it is worth seeing all the possibilities. The backlight is not specifically given an opinion on the technology you want to use for the system. Lit and web components? Brilliant. Reaction and emotion? Fabulous. Only Vue? everything is OK. Nongex and sass? It works it works.

Having a novice design system gives you a real advantage here. If you’re great with something ready and then customize, you’ll be off and running incredibly fast. Something that you might assume would take a few weeks to figure out and settle into is done in an instant. And if you want to be 100% dedicated about everything, that’s still totally on the table.

Kick it up to GitHub

Even if you’re still just testing, I think it’s easy and impressive how you can just create and push a GitHub (or GitLab) repository with a few clicks.

For me, this is the moment when it gets really real. This is not a third party tool where everyone is 100% forced to use it and you are forever restricted to it and it is only really useful when people buy in the third party tool. Backlighting only takes industry-standard practices and makes it easier and more convenient to work with.

Then, kick it into the registry.

As I said at the top, this is the crucial moment for any design system. When you send it to a package registry like npm packages or GitHub, it means that anyone hoping to use your build system can now install and use it like any other dependency.

In Backlight, this is just a matter of clicking a few buttons.

With a PRO membership, you can change the domain to your own organization. Soon you’ll be dealing with all versions of your design system right from here, including major, minor and patch versions.

make an ingredient

I’ve never used backlighting before, no one helped me, and I didn’t read any of the (strong) documentation. I just clicked and created a new component easily. In my case here, I made new Nunjucks macro, he did some SCSS styles, then created a demo of it as “Story” in the Storybook. All I did was point to an existing component to see how it all worked.

As a CodePen creator, of course, I highly appreciate the qualities of the browser IDE for all of this. It rebuilds your code changes (looks like a Vite process) super fast, helpfully alerting you to any bugs.

Now since this is a very serious design system, I’m not going to push this new component directly into master In our repository, it first becomes a branch, then I commit to that. I wouldn’t have to know anything at all about Git to pull this up, see how easy it is:

Hello, stakeholders!

Design systems are as much a concern for people as they are a technology concern. Design systems need to talk about it. I really appreciate how I can share Backlight with anyone, even if they are not logged in. Just copy a share link (no one can guess) and you’ll be away.

There is a lot here.

You can manage a complete design system here. You manage things from the atomic code level all the way to creating templates and putting the system together. You literally write the code to build all of this stuff, including templates, stories, and tests, right there in Backlight.

What about those people on your team who can’t really be persuaded to leave their local development environment. Backlights understand this, don’t force them! The backlight contains a CLI that enables local development, including server rotation to preview active work.

But it doesn’t stop there. You can properly document everything in Backlight. Design systems are often best explained in words! And design systems may actually start (or live parallel lives) in programs that focus entirely on design such as Figma, Sketch, or Adobe XD. It is possible to link design documents directly in Backlight, making them easier to find and more organized.

I am so impressed! I wasn’t sure at first what to do with a tool that wants to be a complete design systems tool, given how complex this whole world is, but the backlight really delivers in a way that I find very satisfying, especially in the role of front-end developer, designer, and manager.

Leave a Comment