Subform is a modern tool for digital product designers.

Spend more of your time designing—instead of juggling multiple artboards and tediously propagating changes everywhere.

The fact is, you’re creating complex interfaces, not print campaigns. It’s time to move beyond illustration and photo manipulation software.

Subform is a CAD-inspired design tool focused on the unique constraints of UX/UI design. It empowers designers to create responsive layouts, enforce consistent styles, build stateful components, and work with real content—all inside of a familiar, desktop-based visual design environment.

Work responsively while you design.

Modern UIs aren’t static, they have to smoothly adapt to a slew of different device and screen sizes. But our current tools were built for designing fixed-size layouts: magazine spreads, posters, etc.

Not surprisingly, simulating a digital product in print-oriented tools is a nightmare. You can create multiple artboards to represent different screen sizes, but that’s a ton of extra work.

Figure 1. Even if an app or website targets only the iPhone and iPad, it still has to support 22 different viewport sizes. Multiply that by the number of different screens in the app—you’d need hundreds or thousands of artboards to design all the possible layouts.
Figure 2. UI designs created in Subform can dynamically adjust when the artboard is resized. It’s quick to preview how your layout will adapt to different screen sizes and orientations, as you’re designing. Embed this video.

Instead of duplicating artboards and pushing pixels for every screen size, let Subform do the drudge work with its automatic layout engine. Think of it like a paragraph’s “left”, “center”, “right”, and “justify” settings, but applied to everything in your design.

When the artboard changes size—or you add or remove elements—Subform follows your instructions to automatically adjust the layout in real-time. You can resize the artboard on the fly and instantly see how your design adapts to different screen sizes.

Figure 3. Subform can live preview your design on multiple devices at the same time, with each device rendering the layout appropriate for its size. Embed this video.

Style consistently, across your entire UI.

Interfaces often have design elements that need to be similar, but not exactly the same. Imagine a typical form: every field should look alike, but errors need a unique border stroke color, disabled fields need a different opacity, and so on.

This is tough do to with current design tools. Elements can typically share all of their styles—every border, opacity, fill, etc.—or none of them. In practice, this means spending a lot of time trying to manually keep style changes consistent across different elements.

Figure 4. Classes allow you to compose multiple shared styles together. Here a "corner radius" class keeps rounded corners consistent on buttons and forms. A "form input" class allows for changing the background color on only the inputs. Embed this video.

In Subform, elements can have multiple style classes. A class can define a bunch of different style properties—or just a single one. You can stack classes together on an element to compose any combination of styles.

Like a living style guide, classes let you define universal properties for a UI in one place. When you make a design change, Subform does the hard work of instantly propagating that change everywhere the class is used.

Create powerful, 
stateful components.

With only static symbols or smart objects in your toolset, it’s tough to design components that behave realistically. Subform’s component system is a leap forward: with multiple states, variable content, and responsive layout, components in Subform work just like they do in production.

Expressive states. Components aren’t exact copies. They might have stylistic variations: like a background color that adjusts to show an “active” or “disabled” state. They might have structural variations: like a dropdown menu that show/hides.

Subform components can have an unlimited number of different states. Instances can be toggled between states with a single click or hotkey, so you can explore and edit states in the context of your design.

Figure 5. A search component with multiple states. It's quick to toggle between these states with a hotkey. Embed this video.

Variable content. Individual component instances often need to vary their default content. Think of a button that needs to change labels, or a bunch of table row components, each showing unique results.

In Subform, text and image data can vary individually, without affecting any other component instances. Any style changes still propagate everywhere.

Figure 6. Using Subform’s content variants, content can be changed in an individual instance of the search bar. Other instances retain their content—and style changes still propagate everywhere. Embed this video.

Responsive layout. It’s not uncommon for a component to change dimensions or layout properties depending on where it’s placed. Maybe it should be full viewport width on mobile, but a fixed size on the desktop.

Components in Subform work hand-in-hand with the layout engine. Layout properties can change based on external parameters, like the width of it’s parent element or the length of a text string.

Figure 7. The search bar component can be positioned in a freeform manner, or set to automatically respond to the screen's width. Embed this video.

Work with real content, before production.

When creating design mockups, you’re stuck manually varying placeholder content. This is tedious, especially for data-dense UIs like lists and tables. What’s worse, it’s all too easy to cherry-pick idealized content that masks problems with a design.

Subform makes it easier and faster to work with real-world content. Every text box and image can draw from a collection of data, more like how digital products actually work. The content inside of an element can be varied with a single hotkey, making it easier to check a design before it goes to production.

Figure 8. It's easy to load in real-world datasets—like airline names and logos—and use them to populate and validate your designs. Embed this video.

In Subform, your layout updates with content. When content changes, elements adapt—like a button that gets wider to accommodate longer text.

Reusable components like buttons, menus, and tables preserve their design integrity, even as the data changes in their individual instances.

Figure 9. In existing tools (top), changing the label on a button component breaks the layout. But Subform (bottom) can preserve the original design intent: the button grows or shrinks with its label. Embed this video.

Enhance your workflow with a tool you can trust.

Professionals need reliable, trustworthy tools. That’s why Subform is a desktop application that can be used offline.

OS X / macOS 10.8 and higher
Microsoft Windows 7 and higher

Stay in control of your workflow—update to new versions of Subform (or don’t) only when it’s convenient for you.

Subform doesn’t lock your work behind a subscription fee, either. You can always export your designs as HTML/CSS or static images, whatever fits best into your workflow.

Figure 10. Export any artboard or subtree of your design as HTML/CSS or a static image.