Last week was our first official sprint together as a team. We're excited to get going.
Over the last year, the most common feature request is to download an image of a design. While it's possible to take a screenshot, or for some components download an SVG file, it's not easy to capture the exact same pixel dimensions each time - plus it involves a lot of dragging and clicking. As several items on our roadmap are reliant on dynamically generating hosted images, we decided to spike on building this out as part of our first sprint.
Our components are authored with JSX and Theme UI. As a starting point, we created a service that can generate a hosted screenshot from a block of JSX, styled with Theme UI. We've made the service available in our app as well as our API.
Author and edit JSX to preview your designs. Generate an image of your design whenever you're ready. This JSX playground currently references our own theme file. This enables you to utilize scales for color, typography, border radii, and spacing. In the future we'll allow for constraining to your own custom theme. Check it out here.
Integrate our API into your own automated workflows for generative image creation.
curl \
-X POST \
-d '{"src": "<h1 sx={{ color: \"tomato\", lineHeight: 1, margin: 0 }}>Hello, world!</h1>"}' \
https://www.compai.pub/api/png
You'll get a response like this with a hash and a url to the image
{
"hash":"7ecdee251e5ca60e0ed1351573e680a8a596a52586773b6c1b7a6f29ce1c5e96",
"url":"https://compai.pub/v1/png/7ecdee251e5ca60e0ed1351573e680a8a596a52586773b6c1b7a6f29ce1c5e96"
}
It's an early beta that we'll be iterating on to fit our upcoming needs.
Drop us a line if you build anything with it!
Cole Bemis has used our API to create a new Figma plugin called Hosted Export which "...allows you to copy hosted image URLs for any frame inside Figma".