Blog

Five Reasons Designers Should Transition to Sketch from Fireworks

Posted by in UX Design, Video, Animation, Media


Design pros searching for a more web-friendly product than what Adobe offers have turned to Sketch, a Mac-based app that has been around since 2008 but recently gained popularity with web designers. I started using Sketch about four months ago and have completed several projects with it. I am now a convert to this amazing program. Here’s why.

I started using Fireworks in 2002 when it was known as Macromedia Fireworks MX. Fireworks used to be the best and fastest way to take your designs from prototype to web. While Fireworks has satisfied that need for the last decade, it started lagging behind in both function and usability. Sketch, however, has come along to fill that gap, and while it isn’t the perfect tool, it is far and away a more superior product than Fireworks, in my opinion. In the following post, I list the top five features that differentiate Sketch from Fireworks and why I believe they’re important for every designer.

My Five Favorite Sketch Features

    1. Text Styles – Hallelujah!
      Think of this as a .css file for your design document. Fireworks lacked a consistent way to keep track of font styles and sizes. I was constantly going from page to page, element to element and updating each and every instance. In Sketch you can set up and keep styles consistent throughout the entire working doc. Change an h1 font size once and it changes all the instances throughout. What a timesaver! I often set up and keep a single page for all my styles – that way if a developer needs to find font sizes, colors or styles – or if I quickly need to go back and see all my styles together on a single page – it makes it so easy.
      Screenshot of a Styleguide showing colors and typography for website
    2. Color Picker
      This hyper magnified color picker brings accuracy that I never felt I had with the Fireworks color picker. It is definitely one of my top favorite tools and would make going back to Fireworks (or Photoshop!) really difficult!
      Screenshot of a colorpicker
    3. Export Options A-Plenty
      Since Sketch is primarily a vector-based program, exporting for different file types (and sizes) is a breeze. From exporting a single element to a full page for client review, Sketch export options are plenty (JPEG to SVG) and allow me to automatically make multiple sizes of the same element for retina. Fireworks always lacked easy export options and unless you had every element sliced and diced time was wasted setting this up.
      screenshot of export options
    4. Symbols
      Symbols were always available in Fireworks, but they were never this easy to setup or use. Creating, using and swapping symbols on the fly becomes second nature and speeds up the workflow by leaps and bounds.
      screenshot of navigating to symbols in the menu
    5. iOS Mirror
      This is a separate iOS app – but well worth the $4.99 price tag. Live preview your app designs while you work on them and forego problems that you may not have caught until testing. Previously I had used the Skala Mac/iPad app which was buggy and slow to load. Since iOS Mirror isn’t a 3rd party app made to bridge a gap, it works seamlessly. Genius, no?This is a separate iOS app – but well worth the $4.99 price tag. Live preview your app designs while you work on them and forgo problems that you may not have caught until you got to testing. Previously I had used the Skala Mac/iPad app which was buggy and slow to load. Since iOS Mirror isn’t a 3rd party app made to bridge a gap it work seamlessly and smoothly. Genius no?

      screenshot of the mirror-hero@2x feature

      Image via Bohemian Coding


BONUS – a Sketch
 plugin for PlaceCage!
PlaceCage is an amazing website that lets you create perfectly sized FPO images for your projects using NICOLAS CAGE! Need a calm Cage? How about a crazy Cage?! PlaceCage has them all and it wasn’t long before a community plugin developer came up with a Sketch plugin to pull these perfect Cage images right into your project. Download the plugin and Cage-ify your project today (but don’t come looking to me if your clients are slightly horrified).

screenshot of the placecage image placeholder options

Runner up Feature:
Sketch and InVision have roundtrip editing. I have yet to use this, but at Mightybytes we are super excited for this feature as it combines two of our favorite tools and marries the design and prototyping functions we perform on a day-to-day basis.

More Resources:
Sketch Toolbox – A magical time saver! Seriously, unicorns created this.
Sketch Tips – A great Tumblr page with tips, tricks & downloads.
Sketch App Resources – Paid and free resource for design elements, UX kits and more to help you get started with Sketch
BrilliantSketch – Another resource for tutorials on Sketch

While there is no perfect program for design, Sketch seems to offer the most comprehensive tool box for designers looking for a seamless experience when completing projects. With design professionals moving away from Adobe products, Sketch offers designers an easier time in terms of function and usability. If you haven’t already, try using Sketch for your next design project and using its tools – you may be swayed to make the switch as well!

Mightybytes is a full-service creative firm for conscious companies and a certified B Corporation. Connect with us on Twitter, Facebook and Pinterest or fill out our contact form.