Drama – Draw user interfaces and create interactive prototypes | Hacker News Reader

Drama – Draw user interfaces and create interactive prototypes

drama.app

165 pointsrobenkleene51 comments

Surprisingly not mentioned until the bottom of the page is that this is by an established boutique Mac software company, PixelCut (makers of PaintCode). This is not an overburdened Electron app dependent on a SaaS subscription, but an actual, honest-to-goodness Mac application for prototyping interactions.

I think it's somewhat obvious that this is a native application from the screenshots, but that might just be me…

> This is not an overburdened Electron app dependent on a SaaS subscription, but an actual, honest-to-goodness Mac application for prototyping interactions.

Well I'm sold

> This is not an overburdened Electron app

I was kind of hoping it was a (carefully made) Electron app, so I could use it on Windows.

It is amazing how vibrant the macOS-exclusive UI design ecosystem is, with many high quality apps: Sketch, Flinto, Principle, IconJar, PaintCode and more. The second best ecosystem is web apps, spearheaded by Figma, and arguably Adobe's XD standing on its own. There are almost no Windows- or Linux-exclusive tools.

I read somewhere that Sketch was only possible because of the high quality of osx/quartz at the time. Lots of low level work already done by Apple. But now that has become the reason they can’t compete with web based tools like Figma

I believe Sketch is coming out with an online version later this year or early next year.

I just want them to remove their regressive 1 computer = 1 license policy.

I have multiple Mac Computers and I can only use Sketch on one. I don't think it is a stretch to think that most designers might have multiple computers.

If they are worried about people using multiple instances of 1 license, why don't they do it like Jetbrains does for its IDEs?

> This is not an overburdened Electron app

And instead this is a Mac-only app. I'd take the “bloated”-but-portable version any day.

Many people actually like electron because portability matters more to them than the purity of a “truly native” app.

I upvoted you because it's easy to forget that, outside the US and a few western countries, most people use Windows (even design professionals). In some of those countries, the price point of Macs make them a non-option. As a result, it's been harder for them to have access to design tools which have often been Mac-only.

Furthermore, with modern Javascript JITs, performance issues are generally not easily summarized as "it's Electron". VSCode is the typical example of an Electron app with good performance.

Performance issues often have to do with specific operations needing to be optimized rather than some general multiplier. At times, it's been faster than Sublime for me, because Sublime happened to do something inefficient (e.g. trying to syntax-highlight a very large log file, whereas VSCode preferred to bail). I'm sure with infinite resources, native apps can be faster than Electron ones, but almost never do application developers have the resources to invest to get that far.

Disclaimer: I work on design tools

That definitely isn’t true in China, or even in Japan. Mac has a pretty good market penetration rate for the design field in Asia at least.

Asia isn't just China or Japan. India, and other peripheral countries don't have high Mac penetration.

But in the design industry? I don’t know many Indian designers, but the few I’ve met in Bangalore have all had Macs.

Even the design teams use Windows. I am sure bigger companies provide macs but the vast majority will use Windows simply because its cheap and easy to get.

You might be surprised to learn that some people inside of the US use Windows too (even design professionals)!

As a linux user, I also appreciate Electron apps over nothing at all. Of course I understand the overall disdain for them, but in my world it's a new app I would have not had the opportunity to use otherwise.

> Many people actually like electron because portability matters more to them than the purity of a “truly native” app.

I think the more accurate way to state this would be "many people like portability more than they hate electron".

Of all the complaints I've ever heard of around Electron, "purity" has never been one of them. Bloat and resource consumption are usually the biggest culprits.

“Bloat” is mainly a purity issue actually, it has no clear definition and is instead a matter of subjectivity about a software being «too much» for its purpose. Remember that emacs was said to be bloated, while nowadays it's way lighter than even the most lightweight native app you use.

And electron doesn't have that much performance issues in most apps (atom is a big counterexample of course, but the VSCode team showed that the issue doesn't come from electron itself but from architecture issues).

Granted, electron apps consume a big chunk of RAM, probably much more than if you did otherwise, but modern OSes are pretty good at dealing with background apps' memory and it's usually not a problem in practice for the end user.

I kind of agree with the feeling that there should be a better way, but short of alternative I'd take the portable app any day over the native app on a single platform (whichever platform).

> “Bloat” is mainly a purity issue actually

No, it's not. Crowding out other programs is not a "purity" issue. Burning through my battery is not a "purity" issue.

You can have portability without the bloat introduced by having Node and Chrome bundled in each app.

We've gone from using Electron to using the web view provided by the platform (macOS/Windows) and we've reduced the app size by 90%. The macOS app consumes about 20MB of memory...

We do have some native code in each platform which represents about 10-15% of the app but we could have reduced that a lot if we had used cross platform code (C++, Go, Nim, Rust, etc) compiled as libs for each platform.

It’s times like these when I feel old, because I notice how we went full circle. At the beginning of the decade, there was a move towards web views in native applications. Installing an update for Internet Explorer would result in script errors or other breakage all over the interface of Norton Internet Security.

I started doing web dev in the late 90s... I remember those times. Thankfully we live in a better world now. :)

The only problem we've found so far is Edge not doing CSS animations properly on SVG elements. Otherwise everything has been going smooth.

I usually hate the lazy and dismissive "what's the difference between this and x" comments, but as a UX/Design focused UI developer, I think I'm part of the target market for this. But this looks very similar to FramerX without some of the things I love most about FramerX.

It looks like all the input/output is proprietary Drama stuff. Framer lets me paste in content designed in Sketch, or import production components we've already built in React. The end result of a FramerX project can be exported as a static webpage you can do whatever you want with (host, A/B test, embed).

A designer can start designing a component in FramerX, and I can later add the logic while retaining their styles/animations/interactions. Then we can pull that completed component into our component library, which can then be used in production and imported into other FramerX projects.

I can't critique anything they show on their website, and the results look great (any attempt to make interaction design easier is a godsend), but right out the gate as a web guy it seems like a big disadvantage even if it outshined FramerX as a general interactive prototyper.

I celebrate these apps. I wish there were more apps that takes us out of Adobe world. I'm using Sketch + Pixelmator and I am planning on learning Affinity Designer too. I will give this one a shot.

Same. I'm actually working on my own app in this space, although what I'm doing is radically different. My app focuses on describing visual requirements, and the "canvas" is just a rendered simulation. Ditching wysiwyg entirely.

Any previews?!

Not yet, still in the prototyping phase, nailing down the core functionality. But just think "basically chrome dev tools but made for designers".

How is this better than or different from InVision?

Also, it is Mac only but does not say that anywhere on the site.

Do you mean Studio? Also, is Studio still being supported? Is it live?

I feel like a lot people felt it was half done? Maybe I need a new build.

I've only had minimal experience with InVision Cloud, which our designer used and seems to be similar to Drama. But being web-based it's not limited to Mac.

Studio is still being developed and is live, though it’s not reliable enough for mission critical work. Still very buggy and quirky.

I wish apps like InVision Studio and Framer X would focus less on being a place to do all your designing and more on being a really powerful prototyping tool. I don’t want a half-baked Sketch replacement.

This looks extremely similar to Principle app, even down to how some concepts are called (Driver for gesture-driven transitions). I’m a big fan of PaintCode and the quality seems pretty high, but it seems to lack a couple of features that make Principle a phenomenal app: masks and components.

Masks are available: https://www.drama.app/documentation/inspector#opacity-and-ma...

Components are coming in future updates.

This app looks like Kite Compositor (https://kiteapp.co/) and Principal (https://principleformac.com/) melded into one (both native Mac apps). Nice work!

Got to say that Kite is amazing, and it generates Swift code as well!

Honest question - do you find generated code to be useful? I've always had a very strong bias against it, due to the fact that implementation details can vary so widely.

How is this app different from Adobe XD?

It has an epic feature: It isn't an adobe product.

yup. I boycott them since they leaked my best password.

E0F4^DDu2hX&8Hk4

Here's a new one.

Congrats, you just made that password unusable…

Pro tip: add 2 in the end and it's fine again ;)

And now that one is wasted too :(

It supports rotating layers in 3D space, so you can draw things like this: https://player.vimeo.com/video/350311600?background=1#t=0s

It has a very fine-grained transition editor, allowing you to precisely control the animation of individual attributes of individual layers: https://www.youtube.com/watch?list=PLxEW8Fzn3xvw3eZX7oH8RcMz...

It can be used to create timeline-based animations: https://www.youtube.com/watch?v=jyOvkWLQ7qw

It has Drivers, allowing you to define how some layers should change when attributes of other layers change: https://www.youtube.com/watch?v=eDszsz-CG00

And finally, it has built-in version control system with real-time access to entire document history: https://www.youtube.com/watch?v=mW4h-v6vaOE

This looks very nice. There’s a lot of competitors in the space now, though. One thing that makes me think twice is the proprietary output. It’s extremely valuable for a design process if you can share the prototypes with people regardless of what platform they use. Arguably that’s one of the purposes of a prototype, to bring a design to life for everyone involved in the project. Very useful for user testing (the other purpose) over video, too.

I have played around with it the past day and the product is fairly efficient with excellent tutorials. I think it would be a capable product to create presentations with. I haven't had experience with Adobe XD or FramerX therefore I cannot compare and contrast.

I'm not sure if its frowned upon or not, but I have a questionnaire for designers/developers using such tools.

https://www.surveymonkey.com/r/2CVHGL2

Please share the results too.

will do. thanks

Is this strictly for building iOS/mobile UIs? From a quick look at the documentation and website I was left with the impression this is not for desktop or web applications.

If those platforms are not supported, is it on the roadmap?

Reply on news.ycombinator.com