specctr featured image

Need to show the details of your designs?
Say hi to Specctr.

| 21 Comments

Familiar Story

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!”

“Tahoma?! WTH?!”

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

Conclusion

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.

Good Luck!

Update!

Congrats to @dmerms and @kemie they just won a free copy of Specctr!

21 Comments

  1. Specctr will allow designers to save a lot of time spent on repetitive tasks to get the elements information such as color and spacings spec to the developers. It also provide better visual communications for presentations too.

    Specctr is a must-have as an essential workflow for screen design and puts Fireworks ahead of the game as it is very innovative and no other software does like that yet!

    Great work from OnePixel!

  2. Pingback: id23 blog

  3. This looks very very interesting. We do a lot of projects at my design studio where the development is handled by an external team, so the amount of time we spend creating spec sheets is insane. Specctr seems to be just the right tool for cutting down on all that time.

  4. Specctr looks very promising and I’m excited to give it a try on production work in the upcoming weeks.

  5. Creating a complete visual design styleguide for a Fortune 500 Financial services company took so much time creating the specs manually. A tool like this would speed it up and hopefully set the standard for styleguides and comp specs.

  6. This would save me so much time! Great extension. Totally worth the price.

  7. This seems like a great tool! I’ve switched our devs over to fireworks for web and app assets and this could really help them pull all the info they need!

  8. I want a copy of Specctr! It looks like the guys at On Pixel are really pushing the boundaries of how we use the Fireworks JS API and I wanna drool over its awesomeness!!!

  9. I’ve been waiting patiently for the past month for a return email from ExtendingFireworks.com. When I opened it up I was stoked to see such a tool as Specctr. We run internal and external promotions regularly and we have to throw ideas back and forth, hand spec EVERYTHING and then try to get our boss to understand why it takes so long. It’s almost as if you’ve had a hidden camera in my office for the past year and developed Specctr for me!

    Great work. Looking forward to more too!

  10. As a designer/developer who codes their own designs I rarely have the need for speccing for another dev.

    But I bought Specctr a week ago and the time it’s saved me from flicking back and forth between Coda and Fireworks is already significant. Plus, a quick Spec helps highlight inconsistencies in the design!

  11. In addition to my full-time work as a UX Information Architect & Designer, I design non-profit websites as a volunteer. Specctr would be a great help with my workflow.

  12. Specctr seems to be nice for webdesign workflow. :-)

  13. To me Time is equal to Money , so wasting my time is automatically wasting my money and that I can not afford. Can’t wait to work with Specctr.

  14. Fireworks now have a professional workflow option…. that´s great!

    “Specctr or not Specctr: ……. that is the question”.

  15. Use ColorFill filter on AutoShape can change the Text&Arrow color ;-)

  16. This seems like an AMAZING tool… but I don’t use Fireworks. I generally do my visual design spec’ing in Photoshop or Illustrator. Would love, love, love the extension to be compatible with one of those. I’m guessing the the rest of the Adobe suite is similar enough that I could learn Fireworks quickly… but it WOULD require some extra time on my part… thus why I would like to win a FREE version of Specctr… ya know, just in case it doesn’t work out.

  17. There is a copy for me? I’d love to have it available when I work. http://dribbble.com/Graphic4Fun

  18. Seems very useless.

  19. Awesome tool. Specctr saves so much time.

Leave a Reply

Required fields are marked *.