Has this ever happened to you? You just spent the last few weeks designing a user interface. Feedback from users has been positive and you are ready to show the development team what they will be working on in the next iteration. After the demo, you are confident that they understand what they are building and how everything should look and function. A few days later you check in to see how things are progressing.
“Why is that gray? It should be #0199FC!”
“What happened to the gradient in the menu?”
“The top margin is supposed to be 10 pixels not 15!”
Bringing back any memories? There are some ways to avoid this problem. You could just do the HTML and CSS yourself, assuring that the front end looks as intended. But not all designers know how to code. (a discussion for a different post) If you are not able to code the front end, you may resort to creating specs of your design with numbers and arrows detailing what should go where and how tall or small it should be. This takes time. A lot of time. It is also very boring.
Be bored no longer! Say hi to
Specs in Fireworks!?
This has to be cool! When I first heard about Specctr, I quickly went to their website (https://www.specctr.com/) and checked them out. The videos tell it all. You can go from design to spec in a fraction of the time that it would take to do it all by hand.
The Specctr extension panel is pretty straight forward.
Want to guess what the Expand Canvas button does? :) It expands the canvas (horizontally only, for now.) and adds a box with a dashed gray border, giving you a room to place your speccs.
The details section of the panel is separated in to two sections, shape and text. If you want to see the color of the text in your spec, just check it off. Don’t want to see kerning? Uncheck it!
The Spec section is where you generate the label for the object you have selected.
The first is for specctr’n text. Then width and height of an element. Followed by distance between elements.
Pretty straight forward right?
Let’s take Specctr out for a spin and see how she works.
It is just as easy to create spec in your design. Let me show you how some of these functions work, what their output looks like and where it could be improved.
(demo created with the awesome little Screeny app)
Where it excels
You can quickly select the various elements in a design and with a click get their details.
You can multiselect text elements and get all of their attributes in a click.
Specctr creates a layer for each type of spec. (Text, Height/Width and Spacing) allowing you to keep your spec organized.
Did I mention that it saves you a ton of time, and is really fast?
Where it needs a little help
If you are like me, you may want the specs to look a certain way. You can change the fonts and colors of the generated specs, but as she is now, Specctr will change the colors and fonts back to their defaults as soon as you move the label.
As I mentioned in the video, the Expand Canvas function only expands horizontally. You can of course change the height manually.
Lucky for us, these little things are currently being worked on. :)
There is a price …
If you are familiar with Fireworks extensions, you well know that most of them are free. I would guess maybe 95% of all the extensions that I have seen are free. Specctr is not. The cost? $49 clams. Is it worth it? If creating spec is part of your design routine, it sure seems like the time you will save using Specctr will out weight the cost. There is a nifty value chart that will help you decide. I would love to hear your thoughts about that in the comments.
The Future for Specctr
Dmitri and Chen are busy working on Specctr. Some of the features they are working on are:
- allowing users to change colors and font of labels
- put ends on measurement lines
- use blocks to measure short spaces between elements
- allow user to select how wide to expand the canvas
If you have made your specs by hand, you understand the time it takes. (If not, give it a try! Then try Specctr.) Having the spec for the developer is essential in making sure that what you spent your time designing gets built the way you intended. The specs created by Specctr are just what you need to pass on to a developer.
I tried this out at work recently. I took a page design and used Specctr to spec it out then passed it on the developer. When he realized what all the red text was on the page, I saw his eyebrow rise a little and a smile appear on his face. He realized a lot of the guesswork was out of the way.
So what are you waiting for?! Start saving time and get your own copy!
Contest – (read update below to see the winners!)
To celebrate the release of Specctr and the launch of ExtendingFireworks.com, we are going to give 2 lucky folks their very own copy of Specctr!
There are 2 ways to win. One winner will be picked from the comments, the other from a tweet. Do both and double your chances of winning!
1st way – Leave a comment below. Tell us why you would like a copy of Specctr!
2nd way – Tweet the following: (without the “quotes”)
“Win a copy of Specctr extension for Fireworks from the all new Extending Fireworks blog! http://goo.gl/UZxXl #extendingfireworks #specctr”
Have your entries in by Sunday February 4th by midnight. Winners will be chosen on Monday, February 5th.