Open Design

Unlock the power of programmatic design

Meet the first developer toolkit to read, change, and display data from design files to create any design automation or tool.

Get early access

Build and automate anything on top of design files

Turn Sketch, Figma, Photoshop, Illustrator, and XD design files to readable JSON objects and assets to read, change, convert, and display their design data.

Easily connect your design system with code, create a pipeline for continuous delivery of image assets, or create your own version control system.

Export text for translation
const design = await openDesignSdk.importDesignFile('/tmp/file.sketch')
const designContents = design.getContents()
const textLayers = await designContents.findTextLayers()

const texts = textLayers.map(({ artboardId, layer }) => {
  return { artboardId, layerId: layer.id, text: layer.getTextValue() }
})

All the design data packed into JSON

Accessing design layers programmatically at scale or across formats seems impossible.

With Open Design, you can get all data from color styles to layout in a unified JSON-based format that we call Octopus via API.

How can you use it

  • Sync design tokens
  • Export text for translation
  • Connect design data with code
Generate localized design versions
const design = await openDesignSdk.importDesignFile('/tmp/file.xd')
const designContents = design.getEditableContents()
const textLayers = await designContents.findTextLayers()

textLayers.forEach(({ layer }) => {
  const originalText = layer.getTextValue()
  layer.setTextValue(translations[originalText])
})

Coming soon

Modify designs programmatically

Changing or updating designs used to be possible only through manual controls in some paid design tool.

With Open Design, you can change designs programmatically and at scale without ever opening a design tool.

How can you use it

  • Auto-fix design tokens
  • Generate localized design versions
  • Quickly switch styles at scale
Sync design elements across formats
const design = await openDesignSdk.importDesignFile('/tmp/file.sketch')
const conversion = await design.convert({ targetFormat: 'xd' })

const xdFileStream = await conversion.getResultStream()
xdFileStream.pipe(fs.createWriteStream('/tmp/file.xd'))

Coming soon

Convert design files in any direction

Design file formats were developed in silos and are not compatible with each other.

Thanks to Open Design, you can now convert Figma files to Sketch via API. More format converters are coming soon.

How can you use it

  • Sync design elements across formats
  • Easily migrate from one design tool to another
  • Backup Figma files in other formats
Embed live components in your Design System
const design = await openDesignSdk.importDesignFile('/tmp/file.sketch')
const embedUrl = design.getPreviewEmbedUrl()

<iframe src={embedUrl} width={800} height={600} />

Coming soon

Display designs in real time with our rendering

To view the latest design version, you have to either send a static screenshot or open a paid design tool.

With Open Design, you can display and embed live designs anywhere.

How can you use it

  • Embed live components in your Design System
  • Embed live design previews in Jira
  • Display rendered designs in any tool
Auto-export assets in any format
const design = await openDesignSdk.importDesignFile('/tmp/file.sketch')
const designContents = design.getContents()

const exportedLayers = designContents.findLayers({ name: /icon/i })
exportedLayers.forEach(async ({ layer }) => {
  const bitmap2x = await layer.render({ format: 'png', ratio: 2 })
  fs.writeFile(`/tmp/exports/${layer.name}@2x.png`, bitmap2x)
})

Coming soon

Get any image asset through our SDK

Exporting assets is a manual, repetitive, and tedious task - both in design tools or inspect tools.

With our upcoming SDK, you can ask for any part of the design and export it in any resolution and any format.

How can you use it

  • Auto-update images in code
  • Push new visuals to banner ads
  • Auto-export assets in any format
Import designs to no-code tools
const design = await openDesignSdk.importDesignFile('/tmp/file.ai')
const artboards = await design.getArtboards()

artboards.forEach(async (artboard) => {
  const content = artboard.getArtboardContent()
  const jsonStream = await content.getJsonStream()

  jsonStream.pipe(fs.createWriteStream(`/tmp/artboards/${artboard.id}`))
})

Enable design file import in your product

Writing custom parsers that keep up with design format changes costs precious dev resources.

By leveraging Open Design, you get access to one up-to-date and standardized JSON format.

How can you use it

  • Import designs to no-code tools
  • Don’t worry about design format updates
  • Grow userbase by supporting more formats

Are you building a design tool, plugin, or a no-code tool?

Open Design powers trusted tools in the design space

Talk to us to leverage the Open Design technology. We offer a private Slack channel with daily support from a dedicated developer to all of our partners.

Avocode
Ceros
PSD to Sketch Converter

We helped cloud-based design platform Ceros to enable Sketch, PSD, and AI file import

Read case study
“Without the Open Design API, our Design File Import feature - one of the most game-changing things we’ve ever released - simply wouldn’t exist. It’s been immeasurably helpful. The Open Design team helped us build a killer feature, and it’s saved us both time and money.”
Alan Delong

Alan DeLong

Lead Software Developer at Ceros

Sign up for early access and tell us what you would like to build

Get notified about company news, updates and be the first to get early access to Open Design. Now you can explore our documentation to learn more about our API endpoints and the Octopus file format. The rest of our SDK is coming soon.