CSS is fun and cool and I like it.
Article

Consistent Design Systems in Sketch With Atomic Design and the Auto-Layout Plugin

Do you design digital products (or websites) and hand design files off to developers for implementation? If you answered yes, settle in! While the should-designers-code debate rages on, we're going to look at how adding a methodology to your design workflow can make you faster, more consistent, and loved by all developers... even if you don't code.… Read article

Link

Sketching in the Browser

Mark Dalgleish details how his team at seek tried to build a library of React components that could then be translated into Sketch documents. Why is that important though? Well, Mark describes the problems that his team faced like this:

...most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and

Read article
user avatar
Shared by
Robin Rendle
Article

Tools for Thinking and Tools for Systems

I’ve been obsessed with design tools the past two years, with apps like as Sketch, Figma and Photoshop perhaps being the most prolific of the bunch. We use these tools to make high fidelity mockups and ensure high quality user experiences. These tools (and others) are awesome and are generally upping our game as designers and developers, but I believe that the way they’ve changed the way we produce work and define UX will soon produce yet another new wave … Read article

Link

React Sketch.app

The "normal" workflow I'm sure we've all lived is that design happens, then coding happens. A healthy workflow has back-and-forth between everyone involved in a project, including designers and developers, but still: The code is the final product. You design your way to code, you don't code your way to designs.

It was only a little over a month ago when it was news that Sketch 43 was moving to a .JSON file format. The final release notes drop the … Read article

user avatar
Shared by
Chris Coyier
Link

Sketch Now Replicates Inside & Outside Stroke Alignment

I was just bemoaning strokes the other week:

And that's the trouble with text-stroke in CSS: you have no choice. It's center-aligned stroke only. Either of the other options [outside-aligned or inside-aligned], arguably, would have been more useful.

There still is no solution for text-stroke, but SVG has the exact same problem. It's not quite as design-ruining with SVG, since you can (and designers have been) design with center aligned strokes in mind with their vector art. Still, I'd … Read article

user avatar
Shared by
Chris Coyier
Link

Papercons

Bobby Grace, on the Dropbox Paper team:

On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for inserting icons.

They:

  1. Use a single Sketch file, checked into the repo, as the place to design and house all the icons.
  2. Use gulp-sketch to extract them all individually.
  3. The build script continues by optimizing them
Read article
user avatar
Shared by
Chris Coyier
Link

Preparing and Exporting SVG Icons in Sketch

There is an interesting gotcha about the fill-rule attribute of SVG, detailed here by Anthony Collurafici.

Fill-Rule is an SVG property that basically defines how to determine what shapes are filled or subtracted from the shape. The default SVG value is "nonzero", and this is what Android requires. Unfortunately, Sketch uses "evenodd". Luckily Sketch provides all the features we need to convert our shapes from "evenodd" to "nonzero". And its now even easier in Sketch 42.

The direction you draw … Read article

user avatar
Shared by
Chris Coyier
Link

Exporting Images in Multiple Resolutions Simultaneously

No surprise to any of y'all: screens come in a whole lot of different sizes and pixel densities these days. The technology behind dealing with that is catching up. For example, responsive images. So, we need software to help us generate those many versions of images we need.

Thankfully, all the most popular design software is starting to accommodate that need. Adobe Photoshop, Adobe Illustrator, Sketch, and Affinity Design all have pretty solid workflows for doing just that. I … Read article

user avatar
Shared by
Chris Coyier
icon-link icon-logo-star icon-search icon-star