The best part about this is that this product is literally the philosophy of how Xcode's Interface Builder works. While IB is not cross platfrom it supports dynamic layouts at any resolution including "live" preview, state based buttons, and compression resistance/content hugging on views.
IB has three main problems.
- It's not cross platform
- the interface is clunky and has a lot of "hidden" settings that aren't easy to uncover
- IB is extremely unstable when working with a team triggering misplaced views and other errors seemingly at random
IB is definitely something we looked at a lot when first kicking around the ideas behind Subform. The fact of that matter is that nearly all of the UIs we design today are going to end up using a layout engine of some sort, be that Apple's AutoLayout, Flexbox, Cassowary, etc.
I was really tired of not having access to that at design-time. Layout decisions are something that I want to make as a designer, not delegate to the development team—and hope they work out. (Or have to document ad nauseum)
This feels like it's the right time for a tool like this to come in.. Maybe even a touch late?... Figma has done a stellar job with constraints - which is what I took as the biggest selling point with Subform. Even Sketch does this with the help of a plugin... Although it did look much more impressive in the Subform video.
The biggest potential issue I see here is that it looks like I will need to learn a whole new system of design, which seems to almost combine front-end x-code style work with more familiar UI design tools? I will be interested to hear feedback from people trying this first.
Even Sketch does this with the help of a plugin...
When you said that I suddenly had the feeling that Sketch will become the equivalent of what Sublime Text did/is for editors.
Hi Rhys, thanks for your thoughts. Our layout engine is indeed quite a bit more capable than what's in Sketch or Figma. In addition to a basic constraint system with edge pinning, we also have a computed mode that's very similar to how Flexbox works, albeit with a nicely understandable UI and no gnarly syntax.
We'll have more articles and demos coming out soon that go into depth on how the layout system works. Once you start using it, it's hard to imagine designing UIs without it.
I think you've nailed how a product like yours should work. It is indeed not built upon traditional print design principles. However, you're now in a market that gets quite crowded. Figma just released their thing and Sketch has been the first to get a lot of widespread adoption. I feel like in those cases, pricing is going to become something important as well. Now, I have options so you must be reasonably price, are you going to stay at 99$, pay for updates (Sketch) ? What's the plan ?
Second thing is, I don't work alone, I work with developers. The most important thing for them is how they're going to work with the tool. Is it going to have any shortcut to make development easier ? Are they the ones that also have to learn the tool ? I'm challenging you guys, because I think it's a great tool hehe. But usually, you have less designers than developers, so that means it has to be a cheap learning curve for them (I want to sell your tool to my boss). Are they also going to need a license ? Are you guys integrated with a tool like Avocode (https://avocode.com/) ?
First of all, I think that it is fantastic for this industry that there are so many new tools becoming available.
This shows that there is an interest and a need for the skills that product designers bring to the table.
It also will raise the bar on the tools we use. Sketch has forced Adobe to improve it's tooling suite for product designers, just as new tools like Subform and Figma will likely push Sketch to improve.
Related specifically to subform—I like the rules for sizing/distance relationships piece. I'm constantly measuring and trying to keep standard distances in sketch.
I've been a late adopter to the Sketch movement, but it hasn't been too bad to make the jump as everyone knows, and it already looks like Subform adopts a few of those patterns. In other words, the learning curve to this platform doesn't intimidate me. It certainly promises a lot.
Interesting to see they've gone down the Kickstarter approach instead of boot-strapping off what they've built so far, unless those demo's are completely smoke and mirrors.
Demos were all made inside the real live app. We explicitly didn't want to ship vapor, Kevin Lynagh (@lynaghk) and I have been working on the app for a year.
When I think about this, Figma, and even Sketch, suddenly the idea that just a few years ago it was perfectly natural to design high-fidelity mockups in Photoshop seems really antiquated…
Looks great, would be interested to see it running with 30+ art boards rather than just a single one just to see how the engine copes.
Is this some sort of Alpha release? I'm not sure that I could justify dropping $99-$129 for a very rough copy of Subform. I'll probably wait until it becomes more polished. With that being said, I am eager to give it a try. I dropped Photoshop immediately after experiencing what Sketch offered. And I would do the same to Sketch if Subform (or any other tool) can help me to do my job significantly better than Sketch does.
Have you tried Figma? I used it to design 4 apps for Circle with Disney and it is incredible. Constraints. Sketch import and feature parity. Unlimited versioning. Commenting. Redlining. Export. Framer integration.
I'm not a fan of apps that are only accessible via the Web. Does Figma have an offline version?
They have an Electron wrapper app with tabs, etc. I think Offline is something they are considering in the future.
I like the thinking behind this kind of product. We need tools that are designed from the ground up for digital product/interaction design rather than print media (or even static screen media). States are a big deal and nobody has taken that on yet.
From a business standpoint, this seems like it'll be a hard field to get traction in though. Sketch has already made some significant improvements to symbols (making them nestable, resizing rules, etc.) and they've been very clear that this is only an incremental step towards the kinds of things they plan to do. Adobe XD has live prototyping. And both are profitable businesses with established teams and audiences.
I think there's a lot of room in the market for good design tooling. It's not a zero sum game—everyone's workflows are slightly different and every tool has its strengths and weaknesses. CAD is a great example. Here's a list of CAD tools on the market: https://en.m.wikipedia.org/wiki/List_of_CAx_companies
Figma blows Sketch and XD out of the water. They are just getting started. I think Subform has plenty of room to play in this field.
But what Figma was smart about was vetting a private alpha with real product designers using it on real projects. This builds trust and evangelism and is something that Subform lacks. It's virtually a black box that people have to put $129 into to see if it even works or fits a felt need.
I think it will be hard to find designers forking over this kind of money for.
Curious to hear where Figma's nailing for you. I'm impressed by their feature parity for a new product, but to be honest didn't see anything that would compel me to use it over Sketch. Multiplayer editing seems to be a big deal for them and could be useful on occasion, but I don't know of any designers who have that need as a significant part of their day-to-day workflow.
Multiplayer editing is meh.
I used it at Circle to design apps cross-platform... our Android engineer was on Windows and could pop in, spec the designs and build UI.
It is much faster than Sketch with less layout bugs. Less typographical bugs and nits.
Constraints are a game-changer for doing layout for multiple screen sizes.
Global color palettes without a plugin that persist across an entire organization.
Unlimited visual version control that is lightning fast and easier to use than any other design-based or OS-based versioning out there.
And the KILLER feature is Vector Networks. It has a better pen tool than Illustrator, Sketch, Affinity, or any other vector program period. The pen tool alone is a game changer for designing icons or even complex vectors.
I could go on but they really have built an amazing tool that is just at its infancy.
What your kickstarter doesn't address is exactly what you need the 100k for. What do you plan to invest it in? Also, could I ask what your roadmap looks like? What features/changes do you plan to implement, when do you expect to release this and what pricing model do you see yourselves using, and also, is that the interface style you'll be using?
Hey Christian — So all of the demo stuff you see on our website and Kickstarter is already built.
Our biggest risk going forward with Subform is that we miss the product/market fit. In other words, our design process is not your design process. Everyone works differently, and we're not sure if everyone will find value in Subform as it stands today.
The reason that we're on Kickstarter (and not in some venture capitalist's office), is that we want to find professional designers who can invest not just money, but also time, to help us build a modern design tool. Kickstarter felt like the right choice to start building those relationships.
If the Kickstarter is successful, backers will get copies immediately after the Kickstarter campaign ends. (Early November) We have a basic roadmap going forward, but it'll will no doubt change as our backers use Subform and give us a sense of what the biggest feature priorities are for them going forward.
Understood. Consider specifying this in the campaign, it might help people find reasons to invest.
Not sure I see an answer here. Why a Kickstarter at all and not just an open purchase underneath a "you're supporting us" beta tag?
would be more interested in a "Components" extension for Sketch that expands upon existing Symbols functionality with states.
(does this already exist? if not, someone make this please.)
There's these for Sketch: http://states.design/ and https://evilmartians.com/chronicles/state-machine-the-state-switcher Both are pretty much hacks on layers so not by far as smart as proposed in Subform.
 I say this without judgement
I'm really keen for them to succeed with their new tool.
I have two main concerns, the first is that if it's being designed for both Mac and PC, will it feel right on each OS? and will it feel responsive. Equally, it would be awesome if in the future the app is not limited to Mac and PC, perhaps Linux, Google Chrome?
The second is if this app will allow designers to design free-form first and then add constraints. One of the biggest things I've struggled with other tools is that when designing something early on, my brain can't think in a structured way and so I have to work by drawing things first and then at some point I can set things to be dynamic. Having said that, maybe that's just because I'm not used to working in a more dynamic workflow.
I'm really keen to try Subform though, I wish them all the best and I hope we get chance to contribute to its development.
Linux support is possible if we have enough interest. We haven't seen that yet, but we're definitely open to it. Getting that sort of feedback from our backers is one of the main goals we have in doing the Kickstarter.
You can design in a freeform manner similar to how we do in current design tools. Using the layout engine is entirely optional—and you can mix-and-match. One element can use constraints, another can be positioned freeform, etc.
Kevin made a quick demo of how that works here: https://subformapp.com/learn/layout/
You already have my +1 for Linux support, but it would definitely be appreciated :)
Thanks for sharing the video. Really interesting to see.
And still no sign of Skala... :'(
Really nice product and I'm very curious to give it a try, not sure I'm willing to give $129 for a beta app though.
If you want to get faster user adoption, make it possible to export sketch files.
I wish them luck, it's needed. In the meantime, this has been out for quite a while and it works very similarly although it's not perfect: http://antetype.com/
Congrats on all the progress you guys! There are a lot of great ideas in here, excited to see where it goes :)
The feature set looks very similar to Antetype. Are there any key differences you can call out?
Hey Weston—That's a great question. Antetype is probably the closest analog in terms of using a layout engine. We felt like the semantics and UI could be simplified a lot to make it easier to use, so we did a lot of work in that area. We also spent a good deal of time building more robust components, incorporating data variants, and composable style classes.
The demos and tutorials at https://subformapp.com probably explain it better than words can. We're also going to be releasing more articles and screencasts over the next couple of weeks that might help illuminate the differences further.
The composable classes are a big deal, but you know that already :-)
Great to see tools like this becoming more available. Once tools like this become more widespread you'll see a lot more creativity happening again on the web. (Think back to when Quark Express put typesetting tools directly in the hands of designers - no more pasting up artboards)
I'm still waiting on a module based design / programming tool. Much in same manner as 3D software works… where you link rendering effects together - except in the case of the web it would be Contact Forms, etc…