Posts tagged with: sketch

Generating design elements from code with React Sketch.app

Airbnb’s design team released a new open source library for Sketch based on React. It allows to generate templates, components and assets directly from code instead of drawing them in Sketch. This eliminates the need to maintain their design language system across Sketch files for designers and Github repos for developers, so that everyone uses the exact same elements from a single source of truth. In the past we’ve seen many plugins try to generate code from Sketch files in order to bridge the gap between design and development, but the React Sketch.app is doing the opposite.

Once you dig a little deeper you start to see the many advantages of this new approach, especially for big international platforms like Airbnb. As their design system grows, new components can require changes that include colour, typography or spacing. Imagine having to redraw things like that in Sketch every single time to see if it’ll work across thousands of devices and hundreds of languages. You can use code to do the heavy lifting for you and generate content on many artboards with different sizes instead.
The library also makes designing with data really easy by allowing you to use traditional APIs and GraphQL endpoints. The same goes for internationalisation if you want to see how titles or button labels fit across your design system.

Even though I’m not too familiar with React I’m very excited to explore the possibilities that come with this open source library. It further reduces the gap between design and development in a radical way. Head over to airnbnb.design to read more about Painting with Code” where Jon Gold explains the framework in more detail.

Is Adobe improving the wrong software?

Yesterday I updated to Adobe CC 2015 and couldn’t wait to try out the much anticipated new features in Photoshop. This is coming from someone who uses Illustrator almost exclusively these days by the way. Without further ado, let’s have a look at what I thought were the most interesting ones.

Design Space

Design Space looks like it’s the slimmed down version of Photoshop, that screen designers in particular have been waiting for. You can toggle between the regular view and the new mode quite easily which is neat. In order to have access to this new space, you have to switch it on in the preferences panel as this is still considered a technology preview feature”.
Since a video tells more than a thousand words, I encourage you to check out this screencast commented by Photoshop Senior Product Manager Zorana Gee:

Artboards

You’ve seen them in Illustrator and you might have seen them in Sketch. Now they’re finally available in Photoshop. What I like about their implementation is that the Artboard panel is similar to Sketch which is what I’m used to. Besides that, nothing much to see here so move along.

Stacked layer styles

Similar to Illustrator’s Graphic Styles panel, Photoshop now allows you to have as many as 10 instances of gradient overlay, colour overlay, drop shadow, inner shadow and stroke. You can add these either to a single layer or a layer group and edit them at any time. I’m surprised there is a cap, but it makes sense from a performance perspective.

Export as

This option is replacing the well-known Save for Web which is labeled legacy and should disappear fairly soon. I used plug-ins like PNG Express or Slicy for exporting PNGs in the past, but this should do just fine when it comes to automated exporting, without having to rely on third party software. Be warned that it doesn’t allow to export slices anymore if you’re into that kind of thing.

Glyph panel

Some may not even care about this addition at all, but if you appreciate typography you will love the glyph panel which allows you to browse all available glyphs in a font, view alternatives and basically have fun with OpenType features. InDesign has it, Illustrator has it and Photoshop was long overdue.

Why Photoshop though?

I’d argue that Adobe has been focusing their attention on the wrong software for the past couple of years. Killing off Fireworks a while back infuriated many web designers, many of which have since moved on to the competition. Now turning Photoshop into something it wasn’t meant to be in the first place is a huge undertaking. At least it shows that the company has been actively listening to the community, even if all the new Sketch evangelists this might come as too little too late. However I’m very surprised that product isn’t getting more attention from Adobe. Seriously.
What about Illustrator? A few improvements could really push it over the top and make us forget about Photoshop entirely. It’s arguably the best software (next to Sketch) to address mobile and responsive web design that we have right now.

Consider this:

  • Artboards have been around since 2009
  • It has Layers just like Photoshop
  • It has Graphic Styles
  • It has Symbols
  • It is vector-based

Khoi Vinh recently conducted an unofficial survey among design teams in New York City on the State of Design Tools. It turns out that while Photoshop is still widely used, Illustrator is not far behind.

Adobe Illustrator is surprisingly popular. It used to be rare, at least in my experience, to find digital designers who used Illustrator, but in one of the bigger surprise findings from our visits, we encountered a sizeable contingent of folks for whom Illustrator is their tool of choice. This seems to be a function of the popularity of responsive design, for which Illustrator’s support for multiple artboards is well suited, and Retina screens, for which Illustrator’s vector-based tools are a natural fit.

This 2015 update is certainly a step in the right direction and should keep many designers satisfied for some time. As far as I’m concerned, Illustrator will remain my go-to design software until something better comes along. There’s always next year, right?