First, you've already got some nice visual snaps/queues, for example when you are sizing objects, and/or when you are moving objects around, good job on that.
Now--let's say I've got ten text fields and ten labels above those text fields. I want to select all of them and click on an 'Align Left' button. Or maybe I've got a set of icons I've added, and I was moving quickly and they're not aligned. Let me collect them all with the selector and hit 'Align Center' or 'Align Bottom'. If you look at the controls in Illustrator, they've got 2 sets of controls--alignment and distribution. You can align horizontal left, center, right. Vertical left, center, right. Distribute horizontal on center, on left sides, on right sides. Distribute vertical on center, on top, on bottom. The additional control on all of this is that you can align to selection (meaning the objects you have selected will align themselves to each other only), align to artboard (meaning the objects will align to the center of the artboard).
Because OmniGraffle is very different, we would have to scope what we can and cannot convert. Please share what would be most important for you.
If I draw a wireframe in OmniGraffle, and it's got a series of layers in a canvas, what I would expect here would be that those all get converted and appropriately layered into ID. Both applications have the same outline structure of elements and layers, so that concept is shared and should be transferrable. In OG, all objects are just vector graphics. This means it would be difficult to recognize and properly convert checks, radios, tabs, etc. But honestly, I'd be OK with that. What I would want would just be for it to automatically inherit everything as either shape objects or text objects, appropriately sequenced and layered, and if I want to convert something to a specific type of control (versus just a rectangle, I want a button, for example), I can make that change in ID after import.
For me, the usage story/scenario is "As a long-time user of OG, I have quite a bit of documentation I don't want to re-create in ID. I would like to select an OG file and import that file into ID. ID would turn every canvas into a separate screen, and maintain colors, object ordering, font styling/size/color. ID would not attempt to interpret and convert 'like' objects (i.e. radio buttons in OG into actual radio buttons in ID). From here I can tweak the screens to add my interactivity as I want, but have saved myself a TON of time in initial creation of objects."
Get your friends to vote on it! :)Mike Earley supported this idea ·
We have started working on this—basic extraction of these code assets. If you would like to review/provide feedback on this, please let us know.
Every application that has tried to implement full-scale export of HTML/CSS ends up with bad HTML/CSS. Dreamweaver, MS's old Homepage app, RapidWeaver, really, anything--you name it, if it generates HTML/CSS automatically, it's not usable.
This is compounded, as you mention, when you get into an application using a framework like Dojo, Prototype, MooTools, jQuery, whatever--those frameworks have their own structures for how things must work. For example, Dojo's buttons require 2 div containers, and the ability to add images is applied to one of those containers--if it's applied to the other container it doesn't work.
If you look at CSSHat by the group doing CSSPiffle, I think this is the best implementation, and is also what you are talking about as your recommendation. I.e pick an element and generate it's css/html structure, and let me copy paste that 'widget' of code out and use it.