Part of me hopes that Apple’s Pro Workflow group is exploring something like a Touch Pad (not Bar) for use with desktop apps. A multi-touch panel that augments the keyboard, mouse, and trackpad that can be used to execute application-specific actions using an interface provided by the application. It could be a great way to provide color pickers, shuttle controls, etc. The kind of things the Touch Bar provides on the laptops, but with greater potential because of the less restricted height. Fingerprint authentication would be nice to have too, I suppose.
As long as I’ve used Sketch, I’ve wanted a way to display the letters in hex color codes in lowercase, which I find easier to read. See the two contrived but possible examples below. The top inspector screenshot is Sketch, the bottom with a few typography adjustments.
The adjusted hex codes are rendered in Apple SF Pro Text with the “High legibility” (note the open 4 and slashed zero) and “One storey a” settings enabled in the Typography panel accessed in Sketch from View > Show Fonts > gear menu > Typography. I also applied character spacing of 0.2 to give the glyphs a little more breathing room.
On a related note, it would be great if Sketch’s text styles accounted for settings enabled in the Typography panel. As of the 53 beta release (71998), things like the “Single storey a” are not saved to and applied by Sketch text styles.
I imagine I’m not the only Sketch user who maximizes their document window. Unfortunately, this creates an interaction problem with Sketch’s scrubby steppers.
When the window is maximized (full-screen or zoomed), the Inspector is very close to the edge of the screen, meaning there isn’t much room to travel to increase the value by clicking and dragging a stepper to the right. As of version 51.2, the value stops increasing once the cursor reaches the edge.
Instead, Sketch should detect that the cursor has hit the edge of the screen and keep increasing the value as long as the cursor remains at the edge. Infinite depth!
Originally a few tweets, posted here for posterity. I filed a feature suggestion with the Sketch team.
It has been great to watch Sketch evolve from a fairly simple drawing application (DrawIt, originally) to a key part of many digital designers' workflow and the center of a design tool ecosystem. Having been a heavy Fireworks user, I see a lot of it in Sketch.
The Bohemian Coding team was obviously aware of Fireworks and the community around it. One of the first Sketch plugins I knew of was Ale Muñoz's Sketch Commands, which he originally developed for Fireworks. He has since joined the Bohemian team. Bohemian Coding also asked illustrator and designer Isabel Aracama to create a vector illustration showing that Sketch could be used for such things. Prior to its demise, she was a vocal promoter of Fireworks. If you didn't know Fireworks could handle complex vector illustration, check out her work.
Fireworks wasn't just for slicing images. A number of features made it a good tool for designing any pixel-based interface, features that are among those designers coming from Photoshop to Sketch have found particularly welcome.
Flexible Canvas Sizing
Fireworks allowed you to creates pages within your design file of different resolutions. Ultimately, it's not as flexible as the Page > Artboard (or infinite canvas) arrangement in Sketch, but it was a lot more flexible than Photoshop allowed at the time. This made it easy to design different parts of interfaces while having access to the same symbols and styles.
Fireworks allowed you to nest symbols, and scale and style them without affecting other instances. If configured with 9-slice scaling, you could stretch symbols without distorting the areas outside the center slice.
Buttons were a special symbol type in Fireworks, allowing you to create a base button and reuse it with custom label text. Within the symbol, you could create up, down, and hover states.
Rich Symbols were a pain to create, but provided some of the same functionality as Symbol Overrides do in Sketch. The prolific John Dunning wrote some tools to ease the process, but Fireworks was a bit buggy in handling custom Rich Symbols.
If you needed to share your symbols, you could just export a symbol library file.
Plugins (known as Extensions in Fireworks) were an under-promoted feature in Fireworks. As designers find with Sketch, plugins can dramatically increase your efficiency. One of the first plugins I installed whenever I set up Fireworks was John Dunning's QuickFire, which put all the commands of other plugins a few keystrokes away rather than buried in a submenu of the Commands menu, much like Sketch Runner does in Sketch. I used Ale Muñoz's Orange Commands, John Dunning's keyboard resizing commands, and Matt Stow's math resizing commands a lot to improve my workflow.
The Twist and Fade plugin included with Fireworks is similar to Looper for Sketch.
If you are primarily concerned with testing whether a navigation scheme makes sense, simple click-through prototyping is quite useful. It doesn't let you work with user input beyond clicks or transition smoothly between states and views, but it can help you address problems in layout, contrast, and labeling.
In Fireworks, you would draw arbitrary polygonal hotspots or place button symbols, then specify a page within your Fireworks file to which they should point. You couldn't specify a transition (push left, right, cross-fade, etc.); everything just swapped. You could export to HTML (which created an image map) or to a clickable PDF with everything rasterized. The prototyping functionality in the recent v49 release of Sketch is not terribly different, but it represents what Emanuel Sá referred to as “the tip of the iceberg.”
- Fireworks used an extended version of the PNG file format that made for pretty compact files, even with lots of pages. It's certainly not why I chose Fireworks as my design tool, but it was welcome when backing up or working on a machine without tons of memory.
- I miss Fireworks' Auto Shapes sometimes. There are a few in Sketch (star, polygon, arrow, triangle), but Fireworks provided a few more. A former colleague learned how to use Fireworks after seeing how easy it was to redline mockups using the Measure Auto Shape.
- I still miss the ability to simply see the distance between two guides by holding down a modifier key while the cursor is between two guides on the same axis.
- They wouldn't really make sense in Sketch, but Shared Layers were another huge advantage of Fireworks over Photoshop for UI design. These worked a bit like master pages in InDesign. Create a layer (a navigation bar, for instance), then share it to all the pages where it should appear. You could achieve the same basic thing with a symbol, but symbol positions don't carry across instances.
- There was a cool gradient fill type in Fireworks called Satin that could be used to create nice abstract graphics. It would be tough to translate to code (be it CSS or a native UI toolkit), but it would still be great for static graphics.
What Wasn't So Great
- There were stability problems that decreased over the time Adobe developed the product, but it never became rock-solid. Sketch has really improved in this regard.
- No native vector export. John Dunning wrote an extension to export SVG that worked quite well, but no built-in option existed.
- No multi-resolution export. This wasn't a big deal until the iPhone 4 came along with the high-PPI Retina display.
- Text anti-aliasing was always so-so.
- No springs and struts (or constraints, resizing rules, etc.).
I'm glad that David Malouf had adopted Fireworks for the team at my first job working as a designer. It served me well from 2006 until Adobe announced the end of development in 2013. Reading the writing on the wall, I switched to Sketch, even before it had many tools for reuse like symbols and shared styles. If they can just get that guide space measurement feature implemented…
I know there are FPS-inspired shortcuts for assigning resizing constaints to layers in Sketch, but I’d like a way to simply copy those for one layer and paste them onto another.
- The Resizing Constraints commands would appear in the contextual menu when Control-clicking on a layer on the canvas (as depicted) or in the Layers list.
- I like the brevity of the contextual menu that appears when Control-clicking on a shadow in the Inspector. A similarly focused menu for the Resizing section would be nice.
- For those of us who use the keyboard heavily in Sketch, Command-Shift-C and Command-Shift-V to Copy and Paste constraints would be helpful.
- The Copy/Paste Resizing Constraints commands would also be available through the Edit > Paste menu. Reset is already in Layer > Constraints.
- It’s a bit inconsistent that the controls are labeled “Resizing” in the Inspector, “Constraints” in the Layer menu.
I’ve opened a few Sketch documents lately that specify fonts I didn’t have installed. Something like the TypeKit integration in Adobe’s Creative Cloud apps could smooth the process of acquiring missing fonts.
- I think it’s helpful to show the document name in the dialog because you can’t actually see the document open in Sketch yet. Maybe you opened a couple documents at once and aren’t sure which one has missing fonts.
- The Search Web for Font button would only appear if the specified font cannot be found on Google Fonts. Clicking it would open a search engine query (using the default engine in the user’s default web browser) with a string along the lines of “FontName-Weight+font”.
- Alternatively, a menu allowing the user to either search a generic search engine or a font site like FontSquirrel could appear.
- The dialog should be wide enough to accomodate most PostScript font names. Extremely lengthy font names should be truncated in the middle so the user can see the first bit of the family name and the weight. The whole name can be displayed on hover.
- Some variation of this interface should also appear in the Missing Fonts sheet.
When resizing objects in Sketch, I’d like to see the increment (or decrement) value along with the dimensions.
- The change value is always relative to the dimensions before the drag began, so if you increased the width of the example above by 10, then decreased that by 5 without releasing the drag handle, the counter would read +5.
- If they prove distracting, maybe a “Show dimension change counts” checkbox in the Layers section of Preferences.
- Ideally, these would display when resizing using the keyboard as well.
- Throw typography nerds a bone by using a proper multiplication symbol rather than an x for the width/height separator. I assume you can add it from the Characters palette to the appropriate place in Xcode.
I’m really happy with how the new (nestable!) symbols are shaping up in the Sketch 3.7 betas — great work by the team at Bohemian Coding.
A UI detail for Sketch 3 that would help when working on a file you haven’t touched in a while or one you didn’t create like an inherited project or a downloaded template.
The persistent alignment controls in Sketch could double as a way to add guides around canvas selections. The basic idea is that depressing a modifier key would switch the toolbar into a guide placement quasi-mode, with the icons and tooltips updating to reflect the change. Ideally, the icons in the toolbar would reflect the guide color set in Sketch’s preferences (red being the default).
Built using the recently released Tumult Hype 2.
A few ideas to improve the alignment guides in Bohemian Coding’s Sketch, which I’ve been using more and more since Adobe announced that they pulled the plug on Fireworks — just like Obama will do to your sweet old granny.
In the current version (2.3.1), guide positions are hard to read and you can’t easily space them from each other and the edge of the artboard.
There is also currently no way to position them by numeric input, a feature I found very useful in Fireworks.
Say you’ve decided to change the height (or width) of an element in your design, a change that must propagate. It would be great to be able to move all of the guides on one axis in one pass.
The input boxes for individual and batch position adjustment would of course let you increment their values using the arrow keys and change them using mathematical operations, two features I’ve found really useful in Sketch.