A Designer’s Experience: Moving From Fireworks To Sketch

Changing To The Diamond Needn’t Be Rough

The Challenge

As a designer, it’s always difficult to determine the perfect moment to transition from one creative software product to another.

On the one hand, you want to use the best, most powerful software available. On the other hand, it’s hard to leave the product you’re familiar with (it is in our nature to resist change, after all).

Even when you do decide to make the switch, it’s not always easy. You’ve got to have the time to learn, explore and practice, all the while juggling your existing workload and client expectations.

But you certainly don’t want to limit yourself to an out-dated or unsupported product, which is how I found myself in the predicament of transitioning from Fireworks to Sketch.

Sketch tries to combine the vector power of Illustrator with the simplicity of Fireworks, while staying focused on screen design. It promises to let you focus on what you do best – design. So I gave it a crack.

Where To Begin?

A good place to start learning any new software or platform is with some professional help. Udemy offer a variety of online tutorials for Sketch to suit varying skill levels, like this one: Sketch 3 From A to Z.

Once equipped with the basics, I was ready to start experimenting and familiarising myself with Sketch’s features.

The Skinny

Apart from the obvious (and expected) handicap of not intuitively knowing the location of tools, I was surprised to find that Sketch actually presented an array of advantages over Fireworks from the outset.

I’ve listed my favourite, most noteworthy benefits below.

Work Work Work Work Space

Sketch offers a massive, endless canvas, plus pages (much like Fireworks). But what makes Sketch heaven for the highly organised, is its ability to lay out a whole entire project all within one single document.

I also love its well-structured artboard presets panel, which allows users to open a Desktop, Tablet, iPhone 6s or even a custom artboard – all at a single click.

Layer Love

Unlike Fireworks, Sketch has the ability to automatically sync borders, fills, shadows and other style elements across multiple layers.

Its easy-to-use interface can turn an effect off or on and allow you to quickly re-arrange the hierarchy of layers.

Stop Repeating Yourself

Possibly the most remarkable of Sketch’s advantages is its reusable elements feature.

It gives you the ability to create an element (e.g. a header navigation) and apply it to all of your artboards and pages.

Plus, you can update the element and have the changes apply across every repeat instance within your document.

I know – *Mind Blown*

Text Stylin’

Similarly, Text Styles let you set a font, size and style once and have it change across multiple text layers.

This functionality will make my life so much easier the next time a client decides to change the font. For the tenth time. 

Be Square

In fact, I can see that Sketch possesses a lot of potential to save me some serious time.

It facilitates the creation of quick and simple custom or default grids, plus the alignment tools allow you to place objects in a variety of ways, like in line with a column or row.

Good Gradients

Though Sketch has fewer gradient options than Fireworks, I actually find it easier to edit the gradient after creating my initial element.

Vectors to Rival Adobe

Gone was the simple copy/paste of a vector shape from Illustrator to Fireworks in the CS6/CC update. Sketch has resurrected this quick shortcut for me, much to my delight.

Sketch also lives up to my Fireworks vector expectations of scaling and high-quality detail of graphics. In fact, Sketch takes things a step further with my new favourite feature – scalable layers.

It allows you to scale your object to your desired size but maintain the exact percentage of borders, shadows and effects, including the radius of rounded corners.

Masks No Longer a Mystery

Always tricky and cumbersome in Fireworks – masks are so easy in Sketch that it’s almost impossible not to utilise them.

Easy Export

“Let me see that design pronto!” – If you’re ever in a rush and need to export a whole web page/asset as quick as a flash, Sketch’s drag and drop artboard export is nothing short of amazing. It easily saves me at least 45 seconds on the Fireworks export function.

You can also export your design at a specific pixel dimension – hell, you can export that exact design in five different sizes and have them re-named ready to ship out to the developers.

The Verdict

Designers are creatures of habit, so switching software is rarely fun.

But with my Sketch hours steadily stacking up, I’ve realised I haven’t even contemplated reverting back to Fireworks. In fact, leaning on that crutch now seems inefficient and unnecessary.

Sketch is the answer we’ve been so desperately waiting for, and there’s certainly no going back to Fireworks, Photoshop or any other design tool!