Open Design

What Is Open Design?

Open Design is a headless design tool that can be used to automate design workflows, build products, and much more. It works with popular design formats like Figma, Sketch, Adobe XD, Adobe Photoshop, and Adobe Illustrator.

A core technology in Open Design is Octopus, a universal design format that can represent any design element in any supported format. To learn more about Octopus and what you can do with it, check out this page.

Open Design has four components that work with Octopus and serve as building blocks for you to create a solution:

  1. Import - converts a design to Octopus
  2. Export - converts a design to a popular design format
  3. Render - generates bitmaps and vectors from a design
  4. View - embeds an interactive design viewer in a website or app

The following diagram shows how the components fit together:

To learn more about the components and how they can be used, read on.

Import

Import converts a design from a popular design format into Octopus. From there, you can pass it to another component or work with it directly.

With a design in the Octopus format, you can do things like:

  • Extract all of the text strings and send them to a copywriting tool
  • Export bitmap assets
  • Count how many times a main component is used in a collection of designs
  • Read a design file structure
  • Get text and layer styles

Export

Export converts a design from Octopus into a popular design format. You can combine Import and Export together to convert designs between popular formats.

With Export, you can do things like:

  • Convert between popular design formats (for example, Photoshop β†’ Sketch or XD β†’ Sketch)
  • Backup Figma designs in the Sketch format
  • Build a custom exporter to convert to your application's internal format to enable design import (see this case study)

Render

Render generates bitmaps and vectors from all or part of a design.

With Render, you can do things like:

  • Generate a bitmap (PNG) of a single layer
  • Generate a bitmap of the entire artboard and resize it to be a thumbnail
  • Generate a vector (SVG) of an artboard or layer (coming soon)

To learn more about the technology behind Render, see this blog post.

View (coming soon)

View is an interactive design viewer that can be embedded in a website or application. Similar to Google Maps, you can build layers on top of the design that react to events (like when the user pans and zooms).

With View, you can do things like:

  • Embed a design on your website so that users can see it without having to download and open it
  • Build an application that interacts with a design file (like an inspect tool)

You can see View in action by opening a design in Octopus Inspector. To learn more about the technology behind View, see this blog post (where it's referred to as "The Stage").