Switching From Adobe Fireworks To Sketch: Ten Tips And Tricks


Switching From Adobe Fireworks To Sketch: Ten Tips And Tricks ByFabio Benedetti October 22nd, 2015 Sketch 1 Comment


Transitions can be painful. It is in our nature to resist change, even when the possibility of doing something new and different may be exciting. Changing your workflow can be a real challenge if you don’t know where to start or understand how to embark on the change.

I’ve met with many designers (graphic, interaction, UI, etc.) who stick to old software because they are familiar and in their comfort zone, or because they are too scared to take the “leap of faith” and try something new (even when they know their old software does not allow them to work efficiently and effectively enough).

I clearly remember when Macromedia Freehand was discontinued. I know a lot of designers, art directors and creative directors who needed many years to make the leap to Illustrator, because their workflows and techniques were stuck so deep in Freehand that learning another tool was too painful. However, let’s be honest: If you think about it, is switching to new software really that hard?

The answer is no. Change, as scary as it may be, most of the time is a good thing — first, because you learn how to do new things and, secondly, because feeling challenged and getting out of our comfort zone every once in a while is beneficial.

Fireworks: Frozen?Link

Fireworks was discontinued by Adobe 1 a couple of years ago. (Adobe called this move “freezing development” and promised to release only minor patches from time to time.) Despite the fact that many designers still use it as their primary tool for design work, it’s time to look forward. Yes, you read that right: It’s time to move on. And I write this as a huge fan ofFireworks 2 ! Nevertheless, I think that designers need to be able to adapt, constantly learn new skills and master new tools in order to be competitive in the industry. Don’t get me wrong: I am not saying “Ditch Fireworks already,” but rather am asking all of you to be pragmatic and get your hands dirty with a very good alternative.

No doubt, Fireworks is a great app for designing screens. Yet, not being supported by Adobe will, regrettably, make it outdated very soon. And it pains me; I still use it for many projects because many of its features are evergreen, sleek and easy to use. To be fair, if you open it today, it won’t look outdated. (Hey, I even wrote a rather lengthy tutorial on icon design in Fireworks 3 not long ago because I believe Fireworks is still a great tool for icon design, illustration and many other tasks.)

Yet, I think it is time to find one or more substitutes for Fireworks, because — exactly as in the case of Freehand a few years ago — you don’t need to live in the past!

What Next? Any Alternatives?Link

Quite a few options are on the market, the most obvious being Photoshop. We all know that it is great and packed with features. However, if you are used to the simplicity of certain tools that do something quickly and intuitively, then Photoshop might not be the best fit for you.

Because of its long history, Photoshop is filled with legacy features. It was originally built for bitmap (i.e. photo) manipulation and has expanded over the years to include vector editing, UI and web design, animation, video and even 3D! But Photoshop was never intended to be a UI design tool — that was just one of the many uses for which features were squeezed in over the decades, making the tool tougher to learn. Take Photoshop’s modal view: It has been like that for decades! There are many ways to pick colors, set gradients and apply layer styles. I love Photoshop for its ability to produce great artwork and for being clever in handling very big images, among other things. Nevertheless, some of its features are stuck in the past and haven’t been updated in ages.

The industry has set new standards. UI design and icon design are stronger than ever, and screen design apps need to adapt more quickly to meet the demands of today’s complex workflows. The modern design world also demands new technologies that work with much more than simple static bitmaps: scalable vectors (SVG and HTML5’s canvas ), high-DPI versions for multiple resolutions, design with code (modern CSS), and motion graphics, not to mention the need to rapidly produce complex, interactive prototypes.

Among these apps, Sketch 4 is a very good alternative, especially if you are a UI, web or icon designer.

I should probably also mention Adobe Illustrator. But while Illustrator is an awesome graphic design program (I use it myself, and a lot!), it has way too many options, and its primary purpose has always been vector illustration and print tasks, not user interface design. As a quick example, with Illustrator’s “Export for web,” it’s still difficult to produce crisp, optimized graphics and icons, even with its recent improvements for working with pixels.

Sketch tries to combine the vector power of Illustrator with the simplicity of Fireworks, while staying focused on screen design. So, for me, it is the most obvious choice for those who wish to transition from Fireworks and explore new tools.

Diamonds are made under pressure.

– Peter Marshall 5

Sketch came out at the right time as an affordable and solid alternative for web designers — it’s relatively cheap and easy to learn. However, Sketch is the underdog in the world of graphics applications (a world inhabited by some big names, including Adobe), and it still needs to prove itself in some ways.

No doubt, its developer, Bohemian Coding, feels the pressure from other companies, and it’s definitely not easy to come up with a completely new tool for screen and web design and to be recognized as a leader. But we all know that diamonds are made under pressure! And that diamond icon, which appears in the dock when Sketch is installed, is doing a great job so far.

A diamond icon. (Image: Fabio Benedetti 6 )

(On a related note, just a week or so ago and more than two years after having stopped development of its only dedicated UI design tool, Fireworks, Adobe announced that it has started work on a new tool, Project Comet 7 . From the looks of it, it might be a competitor to Sketch, but it might be too early to say. The first version of Comet is to be released in 2016.)

Before talking about transitioning to Sketch, I would like to mention one more alternative to Fireworks: Gravit 8 . It’s a free web app and was built in the spirit of Fireworks and Freehand 9 . Some of the tools you are used to in Fireworks are not yet present in it, but the app is being updated frequently 10 , and I hope it becomes a serious competitor in the near future.

Note: Sketch is a Mac-only program. If you are in the creative industry, then there is a good chance you are a Mac user already, so that’s good news. However, if you use another operating system (Windows or Linux), I’m afraid you won’t be able to try it 11 anytime soon.

Making The Transition From Fireworks To SketchLink

So, you have used Adobe Fireworks for ages and have now decided to give Sketch a spin. Where do you start? How do you make the transition?

My advice is to start with a small project. It may be an icon design project, a landing page or some simple artwork that you have to deliver in a short span of time. This will allow you to try the software and will improve your problem-solving skills.

If you get stuck on something, don’t retreat to your comfort zone. Instead, try to solve the issue in Sketch. It might be more difficult in the beginning, but the effort will pay off. After a few small projects, you will be able to take on bigger ones and will start to master the app.

Another approach is to recreate something you’ve already done. You could use some existing work as a model and then use Sketch to draw it again. This way, you will more easily find the equivalents in Sketch for the things you do often in Fireworks.

So, let’s begin with a few practical tips!

Tip 1: Make It Scalable!Link


Vectors can be scaled to any size, while maintaining quality and all detail. (Image: Fabio Benedetti 13 )

Fireworks and Sketch are mainly vector editors, both very powerful and quite easy to use. Fireworks also handles bitmap-modification operations pretty well (you can do a lot of the stuff you would normally do in Photoshop, like crop images, clone and retouch photos). Sketch has recently improved its image-editing tools, but they remain pretty basic (for example, it has a tool for selecting objects, a magic wand, a cropping tool and a few more).

UI and icon designers love scalable assets, and for good reason: When working with user interfaces, they often need to scale assets for different screen resolutions. With the introduction of high-resolution displays, all buttons, headers and components need to be adjusted for different sizes and devices. Fireworks handles the scaling of vectors very well (although its own GUI never got updated for Retina Macs). Being vector-based, Sketch does vector scaling perfectly as well (and it gets a few bonus points because its GUI looks gorgeous on a Mac, crisp and polished).

Compatibility With Adobe IllustratorLink

Until Illustrator version CS5.1, you could copy and paste vector shapes from Illustrator to Fireworks directly. That was an awesome feature. For example, you could craft a logo design in Illustrator and then paste it in Fireworks, with no hassle and with all of the vectors being editable. Unfortunately, this feature did not make it to Illustrator versions CS6 and CC. If you want to import a file from Illustrator CS6 or later into Fireworks (or copy a vector object from it), first save the file in Illustrator as *.ai (version 8). Then, you’ll be able to open the .ai file in Fireworks, and the imported vectors will be intact and ready. A bit convoluted, but still a helpful workflow.

Pasting directly from Illustrator to Sketch is a straightforward process.

Luckily, Sketch offers this great feature out of the box, and it handles it pretty well. If you love working in Illustrator, you can easily share assets between the two tools with a simple copy and paste.

Tip 2: Canvas Vs. Artboards Vs. PagesLink


Fireworks’s canvas versus Sketch’s artboard. ( View large version 15 )

This is a dealbreaker for some, especially people who have never touched a tool like Adobe Illustrator, because they might not be familiar with artboards.

Fireworks works with pixels. You set up a fixed-size canvas when you start working, measuring the space exactly. This fixed-size canvas is called a “page,” and you can create as many pages as you need in a Fireworks-opt.png file.

When you open Sketch, you don’t have to enter any measurements for the canvas’ size. The space where you design is infinitely large. This puts some people off at first, but here’s a trick: Define an artboard instead.


Similarities between artboards in Illustrator and Sketch. ( View large version 17 )

An artboard defines boundaries. So, if you used to love working with a canvas, you can set an artboard to whatever size you like. To define an artboard in Sketch, simply press A and drag the cursor until you reach the desired dimensions. You can also modify the size of an artboard from the Inspector panel on the right.

The beauty of this is that you can have multiple artboards in the same document, which is pretty handy if you are working on a project that needs multiple views — for example, for desktop, laptop and mobile devices with various screen sizes. (The same can be achieved in Fireworks by using multiple pages, each with its own canvas size — see the note just below.)

Note:Both Fireworks and Sketch have pages, which could lead to some confusion. In Fireworks, you can create multiple pages, and each page may have its own canvas size and may contain layers, objects and states. In Sketch, you can create multiple pages, and each page may have several artboards. An artboard in Sketch is often used as the equivalent of a page (or a screen) in Fireworks; the term “canvas” refers to the drawing space. In Fireworks, only things that are on the canvas (i.e. on the page) are visible, but in Sketch and Illustrator, things off the artboard are still visible; hence, the term “canvas” being used for the drawing space. Whereas Fireworks can display only one page at a time, Sketch is more like Illustrator in that it can display multiple artboards at once, because all artboards exist on one larger canvas. Pages in Sketch are often used as a way to keep designs organized.


The Pages panel in Fireworks versus the Pages panel in Sketch. ( View large version 19 )

Artboard Presets in SketchLink

As soon as you press A on the keyboard or click “Insert Artboard,” you will see several preset artboards in Sketch’s Inspector panel, and you can choose one or more of them simply by clicking on their names. This is extremely useful and saves time in projects. (Fireworks does not offer a similar feature and has no page presets. However, when you create a document, you can select one from a set of document templates, and you can create, save and reuse your own document templates. The templates you create may be multiple pages, and you can give each page a custom name and size in pixels.)


Preset artboards in Sketch. ( View large version 21 )

Tip 3: Compound Shapes And Gradients Are Easier Than You ThinkLink

The more you use Sketch, the easier the transition will be. Let’s put this into practice with some gradients.


A linear gradient in Fireworks (left) and a linear gradient in Sketch (right). ( View large version 23 )


One of my favorite features in Fireworks has always been gradients. We talked extensively about gradients in my previous article “ Designing a Rocket Icon in Adobe Fireworks 24 ” — specifically, in the section titled “Understanding How Gradients (and the Gradient Tool) Work in Fireworks.”

The Gradient panel in Fireworks.

Fireworks still handles gradients a bit better than Sketch, allowing you to choose many more gradient types (radial, linear, ellipse, rectangle, cone, contour, bars, etc.). But even if the interface for editing a gradient in Sketch is slightly more minimalist, it is extremely simple to use. Forget about modal windows: In Sketch, you get a live preview of the gradient, and you can make quick changes, choosing a linear, radial or angular gradient type. I would have preferred more choices here, but the way gradients are created on the screen is flawless. They look awesome, without any banding problems, probably even better than ones created with Fireworks or Illustrator.

Gradient panel in Sketch.

Note:Sketch has only three types of gradients, which map closely to CSS gradients, making it easy to recreate the gradients in code later. Several of the gradient types in Fireworks may be pretty and original, but they have no CSS equivalents and can only be used for exported bitmaps, not in CSS.

Compound ShapesLink

Compound shapes are one of Fireworks’ best features (you will notice a similarity with Illustrator’s Pathfinder tool). Using compound shapes in Sketch is very similar — so, great for us! You will be using compound shapes in all of your major UI, icon design, web design and illustration projects, so knowing how this feature works will be handy.

If you combine two vector shapes in Fireworks’ Properties panel, the changes will not be made permanent until you press the “Combine” button. Basically, you will now have one shape, but the two shapes it was made from can still be edited individually.

Fireworks’s Properties panel lets you edit compound shapes.

The original shapes will remain editable until you decide to combine them. If you do not use the “Combine” button to permanently combine the path action, you can tweak the individual shapes as you like.

Sketch acts in the same way. When you combine two shapes, they are put together in a sort of layer group. You can still modify and change each shape individually before pressing the “Flatten” button in the top menu bar.

Compound shapes in Sketch (in the top toolbar).

Sketch offers four main options for dealing with shapes: “Union,” “Subtract,” “Intersect” and “Difference.” These are actually very similar (if not identical) to Fireworks’ options. Union in Sketch corresponds to Add and Union in Fireworks; Subtract in Sketch corresponds to Subtract and Punch in Fireworks; Intersect in Sketch is the same as Intersect in Fireworks; Difference in Sketch is more of a unique function, basically the opposite of an intersect operation.


Compound shapes in Sketch. ( View large version 26 )

Tip 4: Wacom Tablet? Great!Link


Tablet icon. ( Fabio Benedetti 28 )

I love Wacom 29 and was always frustrated that it worked so sloppily with Fireworks. The issue seemed to be more the way Fireworks handles the tablet interface than a problem with Wacom itself. If you are using Fireworks, you’ll know that most of the time you are forced to design with a mouse. That’s not a big deal — for some precision jobs, I prefer the way you can move pixels around with a mouse. Having said that, I must say that Sketch works perfectly smoothly with Wacom tablets, and I love that.