
Launch HN: Anima  App (YC S18) – Sketch to Code Toolkit - avishic
Hi HN,<p>We are Avishay, Michal and Or, founders of Anima App (<a href="https:&#x2F;&#x2F;www.animaapp.com" rel="nofollow">https:&#x2F;&#x2F;www.animaapp.com</a>). 
We let designers create UIs in Sketch and then export HTML and CSS.<p>One the biggest pain points that we’ve experienced working in the software development industry, like so many before us, is the process of taking design to production. Designers today use tools like Sketch to design websites, web apps, or mobile apps, but these tools are limited and static. After experiencing the pain first-hand for over a decade, we resigned ourselves to try to make any kind of improvement we could.<p>We started by building our own fully-featured design studio software that allowed users to design iOS apps and export Swift code. But we quickly learned that although people were excited about it and tried it out, after about a week they went back to using Sketch. We realized that while writing algorithms for a layout engine is hard, getting adoption for your new product is harder!<p>Luckily one of our users pointed us in the right direction when they said that out of everything we’ve built, they were only really excited about our Auto-Layout engine. And so we decided to yank out our Auto-Layout solution and release it as a Sketch plugin. That was the turning point for us. Auto-Layout became very popular (100k users) and to this day is a main engine of growth for us.<p>In the past year and a half we shipped three products:<p><pre><code>  • Auto-Layout - Responsive Design for Sketch[1]  
  • Launchpad - Export Sketch to HTML[2]  
  • Timeline - Interaction Design for Sketch[3]
</code></pre>
The team consists of Michal, our co-founder&#x2F;designer and 2 technical founders, myself (Avishay) and Or (previously founded the Yo app).<p>Of course we are dogfooding our products and have built our websites using our own tools.<p>We’re sure that Hacker News readers will have a ton of experience in this space, and would love to hear about your experiences and ideas!<p>[1] <a href="https:&#x2F;&#x2F;medium.com&#x2F;sketch-app-sources&#x2F;introducing-auto-layout-for-sketch-24e7b5d068f9" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;sketch-app-sources&#x2F;introducing-auto-layou...</a><p>[2] <a href="https:&#x2F;&#x2F;launchpad.animaapp.com" rel="nofollow">https:&#x2F;&#x2F;launchpad.animaapp.com</a><p>[3] <a href="https:&#x2F;&#x2F;timeline.animaapp.com" rel="nofollow">https:&#x2F;&#x2F;timeline.animaapp.com</a>
======
seangp
I run a design studio and some of our designers are big fans. We've
unfortunately had to disable Anima across the team due to compatibility issues
between designers who have created UIs with the help of your Sketch plugin and
those who don't have the plugin installed.

The latter group often spend quite a bit of time fixing broken alignments etc
when picking up a Sketch file that's used Anima. This means everyone is forced
to install the plugin. The other issue then is when pushing to Zeplin, many
elements aren't aligned as designed regardless of whether we've got your
plugin enabled or not.

It doesn't happen every time, but it's happened enough times to warrant a
studio-wide disabling of the plugin. I don't know if it's possible to easily
solve this dependency issue in a future release, but if you can, we'll
certainly start using it again.

~~~
orarbel1
The way our Auto-Layout plugin works is by hooking into the internals of
Sketch and enforcing layout rules in real-time (i.e when the mouse moves). If
someone doesn't have the plugin installed, the Sketch file can still be opened
but they won't have the code that enforces the layout rules, so yes it will
look and behave differently.

So while using Auto-Layout can save an enormous amount of time creating UI, it
definitely needs to be used by all designers that work on the file.

In terms of exporting to other parties such as Zeplin, we have a feature that
turns off all the layout rules just before exporting. If you have tried it out
here it is:
[https://animaapp.github.io/docs/v1/launchpad/faq.html#Export...](https://animaapp.github.io/docs/v1/launchpad/faq.html#Export-
to-other-plugins)

And thank you for the kind words!

~~~
seangp
Thanks for the insight - that's good to know. If I remember correctly, the
last time we looked into it, the solution for exporting was to detach all
symbols. I wasn't aware of the feature you've mentioned. Will definitely give
that a try!

------
eigenvalue
If this works well, I could see it reducing a huge amount of drudgery in the
industry. But it could also reduce billable hours for less experienced
developers who take on this sort of work. I have been wondering for a while
why such a tool didn't already exist given its obvious utility.

~~~
orarbel1
You definitely have a point.

This type of solution has obvious upside. The truth is that it has been tried
many times before (Flash, Frontpage, Adobe Muse). The hard thing here is to
being adopted both by the designers who start the process and at the same time
generate code that developers will agree to work with.

The way we tackle this is by giving designers tools to express what they want
in ways that were not available before, and then use the output to generate
code. For example, one popular feature is Stacks[1] which is basically CSS
Flexbox for Sketch. When designers use Stacks, we can then use that data and
generate an actual CSS Flexbox from it.

Designers are adopting this approach but in terms of code generation, we still
have a lot of room for improvement. The code works great, but it's not always
optimal in the way that a good human developer would write it.

We have an internal goal, which is to pass the "Turing Test", where a
developer will not be able to recognize whether our algorithms or by a fellow
human developer.

[1] [https://medium.com/sketch-app-sources/auto-layout-
introducin...](https://medium.com/sketch-app-sources/auto-layout-introducing-
stacks-flexbox-for-sketch-c8a11422c7b5)

~~~
jbob2000
For a proper development shop, the developers wouldn't use the generated code.
It would require so much rework to fit their framework that you might as well
just write it from scratch. I have worked with tools like yours, Adobe has an
enterprise product that is a bit ahead of yours.

Writing HTML and CSS is not the hard part of front-end development. A modest
developer can put this together quickly. The hard part is using javascript or
someone other tech to piece it all together.

I would encourage you _not_ to chase your internal goal. Instead, focus on
making designers better instead of trying to turn designers into developers.
W3C will release a new CSS/HTML spec, or some fancy new JS framework will come
out and you'll be left scrambling to re-engineer.

~~~
orarbel1
We get this a lot and I do understand where you're coming from. Replacing
human engineers will not happen any day now, but we project our vision years
ahead.

For the time being, even if developers don't use the generated code, but
rather just inspect it is better then guessing how a component should work by
staring at a static image or a GIF.

If you take for example this elaborate interactive component:
[https://handoff.animaapp.com/#/timeline/XKHmOQP5Hcuipv/anima...](https://handoff.animaapp.com/#/timeline/XKHmOQP5Hcuipv/animated-
designer-developer)

It was made completely by Michal, our co-founder/designer in Sketch with
Anima. No code was manually written. Trying to convey this today usually
involves hand-waving or for advanced teams, a GIF. By handing off functional
code, a developer can interact and see the values that make this work. Even if
not using the actual generated code.

Does that make sense? What do you think?

~~~
dwaltrip
So it becomes a medium of communication rather than an actual usuable code.
That is interesting...

------
pbadg3r
This reminds me of [https://pagedraw.io/](https://pagedraw.io/)

------
addcn
Congrats on all the new products! Somehow I missed a year of your releases --
my loss. I remember how transformative auto-layout was for my team when it
came out. For the first time designers could, for themselves, grapple with the
tradeoffs of different layout / resizing rules pre handoff. I think the
unrecognized impact of tools like yours is that they give designers a
playground to think about some problems in a more developer-like way.
Regardless of how much of the code makes it into production I think that's a
win for designers and their teams. Looks like timeline has the potential to do
the same thing for interactions and animations.

You guys helped invent this space not too long ago and I'm curious where you
all see things going long term?

~~~
orarbel1
Thank you.

Today the tools we provide force designers to think in a more structured way.
A great example of this is Stacks, which forces a layout to be consistent.
Unstructured design, or in other words, floating layers corresponds to CSS's
absolute position. Stacks, however, corresponds to CSS's Flexbox.

By enforcing designs to adhere to concepts which are borrowed from the
development world, we can actually convert design to code.

In the long-term, we see that not only layout will be structured and
translated, but all aspects of a user interface.

------
bastijn
The textboxes on your website homepage are not aligned but offset to the
bottom right. (iOS, chrome, iPhone 6s). Kind of a immediate turndown for a
site that proclaims to be a designer end-2-end tool. Would probably fix that
(was the site made with your tool?).

Finally, this is very hard to do correctly but as always great risks have huge
payoffs if you manage to get it right. I wish you luck. Back-and-forth is
where the future is.

P.s. not sure if you have it but also make a code-2-designer. Can't count the
times we had our devs fix issues in the design only to have a turnaround time
of weeks before design handed over the new templates.

How to call this new breed of designers though? We have had devops for the new
ops* which has a nice ring to it. But this?

*Semi-ops depending on your company and company size.

------
ap46
For those curious, checkout FOSS Pix2Code

[https://github.com/tonybeltramelli/pix2code](https://github.com/tonybeltramelli/pix2code)

------
redindian75
I remember using Autolayout, but I think Sketch now natively supports it. But
Sketch is 2016 - Figma is the future :)

Seriously, you guys should start aligning with Figma & Atomic...

~~~
orarbel1
Yes. We're definitely planning to expand to more platforms. Stay tuned :)

------
phanindra_veera
Show a demo on the landing page. Will drive more sales

~~~
avishic
Until we have a new one:
[https://www.youtube.com/watch?v=1gnxY6eC_78](https://www.youtube.com/watch?v=1gnxY6eC_78)

