A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.
Another instance of Fractal in the wild, this time for the Federalist design system.
- It’s open source.
- It’s easy to use.
- It generates standalone HTML previews of each component.
- It uses or supports many of the technologies we use already.
- Fractal offers a customizable theme engine.
I’m not sure the particular use-case outlined here is going to apply much outside of AirBnB (just because the direction of code-to-Sketch feels inverted from most processes) but the underlying idea of treating visual design assets and code as two manifestations of the same process …that’s very powerful.
Ethan’s been thinking about the trends he’s noticed in the work he’s doing:
- prototypes over mockups,
- preserving patterns at scale, and
- thinking about a design’s layers.
On that last point…
The web’s evolution has never been charted along a straight line: it’s simultaneously getting slower and faster, with devices new and old coming online every day.
A collection of interface patterns for granting or denying permissions.
A look at the history of design systems and how they differ from pattern libraries. Or, to put it another way, a pattern library is one part of a design system.
Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.
The job is not to invent, but to curate.
Interesting thoughts from Josh on large-scale design systems and how they should prioritise the mundane but oft-used patterns.
When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to.
If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.
When I was in Porto a few weeks back, I took lots of pictures of the beautiful tiles. They reminded me of the ubiquitous repeating background images that were so popular on the early web. I was thinking about abstracting them into a collection of reusable patterns but now it looks like I’ve been beaten to it!
Paul finishes up his excellent three part series by getting down to the brass tacks of designing and building components on the web …and in cities. His closing provocation has echoes of Heydon’s rallying cry.
If you missed the other parts of this series, they are:
Unsurprisingly, I completely and utterly agree with Ethan’s assessment here:
I’ve written some code that’s saying, “Once the screen is this size and the element appears in a different, smaller container, use a narrower layout on this element.”
But, well, that’s weird. Why can’t we apply styles based on the space available to the module we’re designing, rather than looking at the shape of the viewport?
I also share his frustration with the “math is hard; let’s go shopping” response from browser vendors:
There’s an incredible clamor for container queries, with folks from every corner of the responsive community asking for something that solves this problem. So personally, I’d love to see at least one browser vendor partner with the RICG, and get properly fired up about this.
We had to drag browser makers kicking and screaming to responsive images (to this day, Hixie maintains it’s not a problem that needs solving) and I suspect even more activism is going to be needed to get them to tackle container queries.
kamranahmedse/design-patterns-for-humans: Design Patterns for Humans™ - An ultra-simplified explanation
I’m crap at object-oriented programming (probably because I don’t get get enough practice), but I’ve had a quick read through this and it looks like a nice clear primer. I shall return and peruse in more depth next time I’m trying to remember how to do all this class-based stuff.
A comparison of a few different tools for generating pattern libraries.
In this particular case, Fractal comes out on top:
It has the features we need, and I’m happier than I should be with how simple the directory and file structure is. The documentation has also been super helpful thus far. We’ve customized it with our client’s branding and are ready to roll.
A look at the technical details behind Firefly’s pattern library. The tech stack includes Less, BEM, and some React, but it’s Anna and Danielle that really made it work.
Having spent half a decade encouraging people to make their pattern libraries public and doing my best to encourage openness and sharing, I find this kind of styleguide-shaming quite disheartening:
These all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.
If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.
But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.