2017.07.17 Subform release 3338

releases
#1

Hi friends,

Thanks for waiting patiently since our last release seven months ago.

We've taken this time to think through Subform's capabilities and address many of the issues ya'll raised with our first releases.
In particular:

  • The layout engine has been completely redesigned.
  • Direct manipulation modes have been added for creating and rearranging elements.
  • A proper font selection menu has been added.
  • The layout engine incorporates text size, line height, and wrapping.
  • The "heads up display" has redesigned so that you can understand what the layout engine is doing.
  • SVG images are now supported.
  • Images are no longer embedded; they're now copied to an images/ folder next to your Subform file. Any updates to these source images will be immediately reflected in your Subform file.

This new version is not backwards compatible with the last releases.
However, we specifically took time to think ahead on the technical aspects for this release, and we do not anticipate making breaking changes in the future.

With this release, we will begin a fixed release schedule, posting a new build on this forum every two weeks.

Subform is still in beta, and we're looking forward to working with ya'll to polish the software and make it work for you.

We specifically want to thank @sevenupcan for taking the time to write up his frustrations with the original layout engine.
This post really stuck with me (Kevin) and helped me realize that we needed to step very far away from CSS semantics and rethink layout from scratch.

We'd also like to thank @andy.thelwell for writing up his experiences with other layout engines, and grounding his suggestions in the context of what we're trying to achieve with Subform.

Since so many things have changed, Ryan has created:

With that, please enjoy the latest release!

OS X: Subform-3338.0.0+19791b5.dmg

Windows: We will release the Windows build in two weeks.

Best,

Kevin + Ryan

#2

Hell yeah! Just got a new surface so pretty bummed about the wait for windows but this new update is crazy good on my macbook. :wink:

#3

Very cool to finally have another release! Definitely going to take this for a spin, things feel pretty solid.

One think I noticed pretty quickly: I expect up/down and shift + up/down keys to change any numerical values (select width, shift + up to make it 20 larger, for example) like other GUI tools.

#4

Looking forward to firing this back up. Thumbs up for the continued hard work.

#5

Hi Kevin and Ryan

Unfortunately this release crashes when i try to open it. Here's a crash report: https://gist.github.com/Herlevsen/afb8c6a466e5987c80a336d68f133fa1

Hope that is helpful. Let me know if there is something else i can provide you with :slight_smile:

2017.07.31 Subform release 3426
#6

Thanks for sending this, it looks like an issue with fonts.

Can you please send us a list of all the fonts on your system by opening up the terminal and typing:

system_profiler SPFontsDataType > ~/Desktop/my_fonts.txt

and then taking the generated text file from your Desktop and either putting it up as a gist or emailing it to me directly (kevin@generalreactives.com).

Thanks!

#7

Hey Kevin

Here it is: https://gist.github.com/Herlevsen/c3b63b0b393e38b1a8d92d969f376eda

#8

Thanks for the quick reply! Ryan and I will dig into this and see if we can reproduce+fix the issue.

#9

Congrats Gents, keep pushing.

#10

Great work @kevin and @Ryan ! Loving the new update! :grinning: :+1: :+1: I do have two questions:

  1. Is it yet possible to have multiple artboards? I don't see how to add artboards?
  2. When trying to add saved components to an artboard with a "Grid" layout type setup, I noticed that the components are being placed one on top of the other (which is expected based on @Ryan 's explanation in the docs), but I am unable to move the placed components individually; meaning that trying to move any of the components causes all of the other stacked components to move too. This does not happen when placing a basic box. Is this a bug or am I doing something wrong?

Please let me know if my explanation for question #2 is unclear and I will create a video showing the issue described and supply you with the file.

#11

Right now, you have to duplicate an artboard to have multiples. Make sure the artboard is selected, then press shift-D to duplicate it.

We'll be adding in a proper artboard creation mode in a future update.

Great question. I haven't written up docs on the component functionality because we may make some tweaks yet, but here's what's going on:

When you add a component to the artboard, that component's positioning is the same for every instance of that component. As you've found, if you tell your component to live in column 2, row 2—all instances of the component will move to column 2, row 2.

You'll need to override the layout for the instance of the component that you want to position uniquely. You can do that by pressing the override button next to Element Layout:

You can now reposition that component instance to wherever you like—and no other instances of the component will be affected. You'll also see that the buttons available change to commit and remove:

Remove will take off your positioning override and return the instance to the default position of the component. Commit will set the position of this instance to be the new default for the component—so all instances will take that new position. (unless they are in a overridden state)

I hope that helps. The conceptual model of components can be a little tricky, especially when used in concert with the layout engine. I'll definitely be writing more about this in the future (and doing some video tutorials). In the meantime, let me know if you get stuck and I'll be glad to help you work through it.

#12

Thanks for the quick and detailed reply! Your suggestions did work. I am not sure what the use case is for having a component's position be part of the properties that is repeated for every instance but I hope to better understand why in your upcoming documentation and video tutorials. :wink:

Also, I've noticed that I cannot give unique names to instances of a component, changing the name of one instance renames all other instances, even the ones with overrides. I would expect to be able to create a button component for example and use instances of it for different call-to-actions and be able to give those different instances unique names.

I've also noticed a potential bug where every time I open a previously saved Subform document, the layout looks messed up and I have to fix the errors although everything looked fine the last time I saved the document (see attached screenshot).

Screen Shot 2017-07-20 at 2.34.55 PM.png1792x1273 243 KB

#13

We'll definitely cover this in more detail, but the short answer is that components often need to be positioned in the same place, regardless of where they are used. Simple, common use cases: the status bar at the top of the screen in iOS or Android, or the Floating Action Button in material design.

Moreover, positioning (space before and after) and size are intrinsically related in Subform. You might create a component for a table row that you always want to stretch the full width of its parent. If component instances didn't preserve their layout settings, you'd have to manually reset those values for every instance you place.

Symbols in tools like Sketch don't carry any positioning information, so your intent as a designer is never captured. It's not clear if the component should always be positioned somewhere specifically, or if it can live anywhere. If it can (or should) resize, how exactly should it resize?

That's the kind of layout information that we think components should carry in a design system—and that the designer should purposefully encode into the platonic component.

Are you looking to rename the instances in the tree just for easier identification where you've overridden the text? Is there another purpose?

One option is to use states: the state names display underneath the component name in the tree. That may be overkill if you're just overriding the text, but otherwise leaving the instances the same.

Do the error boxes in this file contain text? We've identified a bug where this behavior can occur if the fonts haven't finished loading before the layout renders. If they aren't text, send me your file and we can take a look.

#14