Open Design

 How Ceros launched Sketch, Photoshop, & Illustrator import thanks to the Open Design API by Avocode
Technology

How Ceros launched Sketch, Photoshop, & Illustrator import thanks to the Open Design API by Avocode

Matous RoskovecMatous Roskovec

December 2, 2020

We've spent years building our flagship product Avocode to enable people to work with design files in the browser. To do that, we developed technology to transform each design format into a JSON-based design format (we call it Octopus 🐙), which enabled us to work only with a single design format (instead of five). We had to ask ourselves, could the Octopus and our design parsing power other apps besides Avocode? Short answer - it can.

In January 2020, we started working on a project with Ceros to give them access to our Octopus format via an API to enable Ceros’ users to be able to import Sketch, Adobe Photoshop, and Adobe Illustrator design files and instantly turn them into production-ready websites.

After almost a year of close partnership, we’re excited to go public with this story. The Ceros dev team has successfully leveraged the Octopus format to work with design files in their web app and released the design file feature with their Ceros Studio 7 update. Ceros is now the third web app after Avocode and our Photoshop to Sketch Converter that is able to work with third-party design file formats via an API.

As more companies and app teams requested access to this technology, we’re excited to announce that both our format Octopus and our API are now open to the public as the Open Design API - and yes, documentation is a part of it; check it out. 🎉

 Documentation of the Open Design API for reading data in design files.

To help you understand better the potential of the Open Design API and how it can help products out there, we sat down with the Ceros team to understand their new Ceros Studio 7 update and what role our API played in its development.

Without further ado, let Molly O’Connell, Director of Partnerships at Ceros, introduce you to what is Ceros and why you should keep an eye out for it.

Ceros is a cloud-based design platform that allows marketers and designers to create immersive content without writing a single line of code. It is a tool that can transform and liberate your digital presence across all touchpoints, and it’s backed up by a team of experts.

Our team has pivoted to be entirely remote-first in 2020. We are around 225 people, but the Avocode team worked with our Product, Engineering, Partnerships, and Design teams.

We're a group of people who are wildly passionate about changing the way content is created on the web. We believe content creation has been constrained by technology for too long, and creativity has taken a backseat. We exist to unlock creativity. Our platform empowers the world's leading brands to share their stories and engage their audiences.

What value does the integration with Avocode bring to Ceros' users?

Jack Dixon, Creative Director at Ceros: Ceros’ partnership with Avocode empowers our customers to import Photoshop, Illustrator, and Sketch files into Ceros, instantaneously converting them to web-ready HTML5, without writing a single line of code. This cutting-edge file conversion technology integrated into Ceros’ cloud-based design studio offers unparalleled creative efficiency. Through this partnership, Ceros is now the world’s only design platform to offer this service.

Even prior to this integration, Ceros customers had a tremendous amount of flexibility in designing and building content within our design studio. But with this integration, we can now offer unparalleled design efficiency, giving our users more time to be creative.

The design file import feature inside the Ceros Studio.

What business value does Open Design API bring to you?

Jack Dixon, Creative Director at Ceros: When I initially discovered Avocode in an article I read, I felt like I’d struck gold. This was something that had been on my mind for almost 6 years of my time at Ceros.

Prior to finding Avocode, I wasn’t sure it was even physically possible to achieve this with the constraints of today’s web technologies. When I dug deeper and realized there was an API in development, I knew that this was a perfect fit for Ceros.

Avocode’s Open Design API has essentially saved us years of development if we’d built this with our own product team. We worked closely with Avocode’s technical team, ultimately developing and delivering a seamless experience for Ceros’ customers at break-neck speed.

Alan Delong, Engineering Team Lead at Ceros, puts it this way:

A Sketch design file being uploaded to the Ceros Studio.

What was your biggest struggle that you had before you started using Open Design API by Avocode?

Jack Dixon, Creative Director at Ceros: Ceros independently conducted several research and discovery projects with the goal of building our own file conversion engine, but ultimately struggled to make any meaningful progress due to the resources required to complete a feature of this scale.

While Ceros has made incredible progress in the way content is created for the web in the last 8 years, we knew that integrating with the existing tools designers and marketers already know and love would broaden our user base, and build more brand loyalty over time.

With our latest offering, Ceros Release 7, our customers are now at the forefront of unmatched creative freedom, power, and efficiency. A part of that magic is powered by Avocode, and we are so excited to see what our users create with it.

How would you assess the cooperation between Avocode and Ceros engineering teams?

Alan Delong, Engineering Team Lead at Ceros: After the terms of the project were agreed upon; we involved our lead designer efficiency engineer, two developers, a product manager, and our Head of Product Design. They all collaborated closely with the Avocode team throughout the course of the implementation. We also set up a shared Slack channel between the Ceros and Avocode teams, and despite the time zone difference, the Avocode team always responded to us in a timely manner.

Would you recommend Open Design API to other companies? If yes, what would be the reason?

I don't know of any other offering in the market that can transform all these different design formats into a single universal design schema. If any company is looking to work with files from multiple design programs, the Open Design API is hands down the right choice.

How are you satisfied with Avocode backend infrastructure?

Alan Delong, Engineering Team Lead at Ceros: The Avocode team provided us with the results of a penetration test they commissioned and remediated the few vulnerabilities that were found in a timely manner. There were no major vulnerabilities discovered. Overall, we've had no problems with the infrastructure Avocode put in place for us.

Subscribe to get the latest
Open Design news by email

Can you explain how is Ceros using Octopus - the Avocode open design format - to import Sketch, Adobe Photoshop, and Adobe Illustrator files?

Alan Delong, Engineering Team Lead at Ceros: Prior to our partnership with Avocode, designers that wanted to initially prototype their Ceros experiences in a visual design tool such as Photoshop or Sketch would need to manually upload, realign, and tweak all the assets from that design file into a blank Ceros experience.

Now, with Octopus, Ceros is able to automatically convert these designs into a Ceros experience, saving designers quite literally -hours- per experience. Without Avocode's expertise in proprietary design file formats, we would have spent an inordinate amount of time creating a conversion pipeline for every format. The Octopus design format allowed us to short-circuit that and write a straightforward translation from Octopus JSON into Ceros JSON.

How helpful is the Octopus format to you, and why?

Alan Delong, Engineering Team Lead at Ceros: The Avocode team created examples of Octopus from our collection of testing design files at the beginning of our cooperations. These turned out to be invaluable to us when we were implementing our side of the design file conversion pipeline.

We’re extremely happy to have helped with the design file import feature to Ceros. If you are tacking similar use cases, need to import design files to your product, convert file formats, sync design system tokens or automate some pipelines around design files, we’d be happy to help.

The easiest way for you to verify if the Open Design API is good for you, is to simply generate a token and trying it on your own.

Subscribe to get the latest
Open Design news by email