But I think enabling rapid prototyping to work out some of the major ui/ux before a developer even writes any code would be useful as well. I know that Subform is meant to be a better, self-documenting design tool, that can be handed off to developers so that the developers can get a better feel for what the designers intended (and the designers can get a better feel for the limitations that developers have)… And that’s extremely useful. So I guess rapid prototyping is the goal, so that I can get feedback quicker and iterate quicker, and have the best work ready for development. And then if I make changes in Subform, which are very much liable to be breaking changes this early in the prototype phase, I’d need to go back and try to refactor the styles and it just wouldn’t be a quick workflow. The HTML export would help, but without the styles it would still take a decent amount of time to get the prototype ready. So the HTML / CSS export was not the output that I would necessarily send, but I could take it and add interactivity on top of it, and then I’d finally have what I want to send to others. You could get feedback and then get back to construction.Īnd I think it’s important to note that sending the Subform document to someone who has Subform wouldn’t quite accomplish this, since you can’t rig up events inside of your Subform designs. With the outputted HTML (and styles), you could hook up JS events to the elements and essentially take the artboards and turn them into prototypes that people can mess around with on their own device. What made the HTML (and CSS) export awesome was being able to quickly rig up and send a clickable, scrollable, prototype. Is HTML export (the markup structure) still useful for you? CSS styles export (a la Sketch)? Given that, we’d like to know more about your intended workflow and use cases for CSS/HTML export. So we’re reluctant to spend time on export features that chase perfect export fidelity to production web code. Like Sketch or Photoshop, it’s not our intent to make Subform a web IDE that exports a fully-formed website ready for production-that’s more the domain of tools like Dreamweaver and Webflow. This means we’d have to introduce some sort of translation tool or some pretty heavy hacks to get the layout output to appear correctly in the browser. Subform’s layout semantics-while similar to absolute positioning, flexbox, and CSS grid-aren’t exactly the same. Overall, though, we can execute this approach in Subform without too much difficulty. CSS doesn’t support multiple borders, so if you create them in Sketch, you get two conflicting style rules: There are some edge cases where this doesn’t perfectly map 1:1 with what you’ve created in the design tool: mulitiple borders are a good example. CSS is an amalgamation of styles (borders, colors, etc) and layout (floats, absolute positioning, flexbox, css grid, etc).Įxporting styles is relatively easy… this is essentially what a tool like Sketch does when you “copy CSS attributes.” You’ll get something that looks like this:īox-shadow: 0 2px 4px 0 rgba(0,0,0,0.50) HTML export is fairly straightforward-everything in Subform is contained within a tree hierarchy, which is just like the DOM.ĬSS is trickier. We took out the CSS and HTML export when we rewrote the layout engine and we’ve been meaning to discuss with the community how it might be reintroduced.
0 Comments
Leave a Reply. |