2018.01.29 Subform release 4430

releases
#1

Hi friends,

A new release of Subform is available:

OS X: Subform-4430.0.0+fdc8d9e.dmg

Windows: Subform Setup 4430.0.0+fdc8d9e.exe

The focus of this release is code export features. By popular demand, you can now copy CSS styles to the clipboard for any element in Subform—or copy out any element as standalone HTML/CSS.

Additionally, Subform now generates a folder of exported code automatically, everywhen you save. The folder contains the structure and properties of your entire Subform file, which makes it possible to diff changes in version tracking systems like Git. When handing off modifications to developers, this helps illuminate exactly which properties have been changed.

For more details, spend 4 minutes checking out the demo video:

Since the last release:

Changes

  • Opening an element context menu (right click menu) now selects that element. This matches the behavior of Sketch/Photoshop and avoids confusing situations where the context menu refers to an element that’s different than the selected one.

Enhancements

  • Added HTML/CSS copy-to-clipboard, which includes both style and static layout CSS.

  • Added CSS style copy-to-clipboard, which includes styles for the full subtree of the selected element.

  • Subform automatically exports code for use with version tracking software / developer handoff (see video above).

  • Clicking on an input field now selects the entire contents of the field, making it easier to edit values quickly. Thanks @drew.mckinney for the suggestion!

  • The “reveal in tree” command has been added to the toplevel application menu, in addition to the element context menu.

  • A “stretch” preset has been added to the quick alignment presets in the self-directed and stack cross-axis controls; this preset is handy for setting an element to be full size, rather than having to type “0 1s 0”.

Fixes

  • Images now re-render immediately when they’re relinked.

  • Duplicating an element now increments the z-index of the duplicate rather than copying it.

#2
#3

Thses HTML and CSS exports are a good start, but I’m curious… What’s the general workflow of people using Subform? I know it’s a design tool (kind of competing with Photoshop and Sketch), but what happens usually after the design is approved? Do designers ship this to developpers who start building from scratch according to the specifications outlined by the Subform exports? All the absolute positionning of elements in the current exports seems hard to use in production code…

I’m asking this because I’m wearing both hats at work: I’m both a designer and developper (and a former Mechanical Engineer, moreover!). I’m trying to reduce my workload as much as I can. Until now, I’ve been using Semantic-UI to build apps (simple and responsive out-of-the-box), but it’s not ideal to freely explore design ideas. I’m using MS Visio for this right now (I know, but it’s good enough for me :yum:)… Using Subform might improve my design experience over Visio, but if I have to code everything from the ground up afterwards, I don’t gain much, it seems. Any suggestions?

#4