Select Page

Category: Design Systems

Getting design system customization just right

I had a little rant in me a few months ago about design systems: “Who Are Design Systems For?” My main point was that there are so many public and open source ones out there that choosing one can feel like choosing new furniture for your house. You just measure up what you need and what you like and pick one. But it just isn’t that simple. Some are made for you, some makers want you to use them, and some just ain’t. A more measured take from Koen Vendrik (consistently, the same Koen who just made a cool Jest browser tool): … it’s important that you first define who a design system is for and what people should be able to do with it. When you have decided this, and start looking at the implementation for the level of flexibility you require, keep in mind that it’s okay to do something that’s different from what’s already out there. It’s easy to create a lot of flexibility or none at all, the trick is to get it just right. The levels: Zero customizability. Sometimes this is the point: enforcing consistency and making it easy to use (no config). Build your own (BYO) theme. The other end of the spectrum: do whatever you want, fully cusomizable. Guided theme building. This is baby bear. Like changing preprocessor values to change colors,...

Read More

A Practical Use Case for Vue Render Functions: Building a Design System Typography Grid

This post covers how I built a typography grid for a design system using Vue render functions. Here’s the demo and the code. I used render functions because they allow you to create HTML with a greater level of control than regular Vue templates, yet surprisingly I couldn’t find very much when I web searched around for real-life, non-tutorial applications of them. I’m hoping this post will fill that void and provide a helpful and practical use case on using Vue render functions. I’ve always found render functions to be a little out-of-character for Vue. While the rest of...

Read More

Creating the “Perfect” CSS System

My pal Lindsay Grizzard wrote about creating a CSS system that works across an organization and all of the things to keep in mind when starting a new project: Getting other developers and designers to use the standardized rules is essential. When starting a project, get developers onboard with your CSS, JS and even HTML conventions from the start. Meet early and often to discuss every library, framework, mental model, and gem you are interested in using and take feedback seriously. Simply put, if they absolutely hate BEM and refuse to write it, don’t use BEM. You can explore working around this with linters, but forcing people to use a naming convention they hate isn’t going to make your job any easier. Hopefully, you will be able to convince them why the extra underscores are useful, but finding a middle ground where everyone will participate in some type of system is the priority. I totally agree and the important point I noted here is that all of this work is a collaborative process and compromise is vital when making a system of styles that are scalable and cohesive. In my experience, at least, it’s real easy to walk into a room with all the rules written down and new guidelines ready to be enforced, but that never works out in the end. Ethan Marcotte riffed on Lindsay’s post in...

Read More

Developing a design environment

Jules Forrest discusses some of the work that her team at Credit Karma has been up to when it comes to design systems. Jules writes: …in most engineering organizations, you spend your whole first day setting up your development environment so you can actually ship code. It’s generally pretty tedious and no one likes doing it, but it’s this thing you do to contribute meaningful work to production. Which got me thinking, what would it look like to make it easier for designers to design for production? That’s what Jules calls a “design environment” and she’s even written a...

Read More

designsystems.com

The team at Figma has created a new resource for “learning, creating and evangelizing design systems” called Design Systems that already has a good collection of interviews and articles by some folks thinking about these things. I particularly liked Jeroen Ransijn’s post on how to convince your company it’s ready for a design system, where he writes: Building a design system is not about reaching a single point in time. It’s an ongoing process of learning, building, evangelizing and driving adoption in your organization. Design systems are a popular topic. Ethan Marcotte recently looked at instances where patterns get weird, Lucan Lemonnier shared a process for creating a consistent design system in Sketch, and Brad Frost debunked the perception that design systems are rigid. Seems like Figma’s new site will be a nice curated repository of this ongoing discussion. Direct Link to Article — Permalink The post designsystems.com appeared first on CSS-Tricks....

Read More
www.000webhost.com