Export and copy
Take your design out of Kite: as pictures and PDFs, as code, into Figma, or as a whole file.
Export a layer
Select a frame, or any layer, and find Export near the foot of the inspector. Click + (Add export setting) to add a setting: the first is 1x PNG. Then click the button under the settings, Export followed by the layer's name, to make the file. It is drawn on Kite's side, so it can take a few seconds.
Size, suffix and format
Each setting has three parts:
- Size: a scale such as 0.5x, 1x, 2x or 4x, or a width or height in pixels such as 512w or 512h. Pick one from the list or type your own: scales go from 0.1x to 4x, and widths and heights up to 4,096 px.
- Suffix: words added to the end of the file's name, such as -dark. With none, a picture larger than 1x is named after its size, as in Card@2x.png.
- Format: PNG, JPG, WebP, AVIF, SVG or PDF. SVG and PDF are drawings rather than pictures, so they have no size.
The settings are saved on the layer, so they are there the next time anyone exports it. The − beside a setting removes it; a layer can have up to ten.
Which format to use
| Format | Good for |
|---|---|
| PNG | Screens, interfaces and anything with sharp edges or see-through parts. |
| JPG | Photos and pictures with soft colour, where a smaller file matters more than see-through parts. |
| WebP | Pictures for the web: smaller than PNG or JPG, and it keeps see-through parts. |
| AVIF | The smallest pictures for the web, for sites and browsers that take it. |
| SVG | Icons, logos and illustrations: a drawing that stays sharp at any size, and that code can use. |
| Print, and decks to send: a drawing, sharp at any size. |
Several at once
- A layer with more than one setting exports them all in one go, as a .zip.
- Select several layers and the Export section offers one button, such as Export 3 as one PDF: one PDF with a page for each layer, in the order they read on the board, top to bottom and then left to right, up to 50 at a time. Use it to send a set of slides or screens as one document.
Large pictures and limits
- A picture is at most 32 megapixels and 16,383 px on its longest side. Ask for more (a tall page at 4x, say) and Kite makes it as large as fits, and tells you the size it made.
- You can export 60 times an hour. Past that, Kite asks you to try again shortly.
Copy
Right-click a layer and open Copy/Paste as for the other ways to copy it. ⌘C on its own copies layers to paste elsewhere in Kite.
Copy as PNG or SVG
- Copy as PNG puts a picture of the layer on the clipboard, at 2x, ready to paste into a chat, a document or a slide.
- Copy as SVG copies the layer as SVG markup: text to paste into code or into another design tool.
Copy as HTML, React or Tailwind
Each copies the selection as code you can paste into a project:
- Copy as HTML: HTML with the styles written on each element.
- Copy as React: JSX with style objects. A single main component comes out as a React component with its properties; an instance comes out as the element that places it.
- Copy as Tailwind: HTML with Tailwind classes.
If the layers use your design system's variables, the variables they use come too, written as CSS, so var(--primary) still means something wherever you paste it: in a <style> block for HTML, and in a comment marked “Add to your CSS” for React and Tailwind. Pictures keep their full address, so the code still finds them.
There is no Copy as CSS. For one layer's CSS, open the CSS section at the foot of the inspector, which lists every property it has.
Copy to Figma
Copy to Figma copies the selection so it pastes into Figma as Figma layers. When it says Copied — paste it in Figma, switch to Figma and paste. See Figma.
Copy for agent
Copy for agent copies the start of a request for your AI tool: a sentence that names the file's link and the layers you have selected. Paste it into your agent, finish the sentence with what you want, and it knows exactly which layers you mean. See Working with agents.
Copy a link
- Copy link to selection copies a link that opens the file on that layer's page, with the layer selected and in view. Select one layer to use it.
- To link to a page, right-click it in the pages list and choose Copy link.
A link only opens for people who can already open the file. See Sharing.
Download a .kite file
A .kite file is the whole design file in one download: every page and layer, its pictures and its design system. Keep it as a backup, or move the work to another workspace.
- Click the Kite logo at the top left of the editor to open the file menu.
- Choose Download a .kite file.
To open one, choose New → Import .kite file… in your library: it becomes a new file of your own. See Bring work in. A .kite file holds up to 50 MB, pictures included, and 50,000 layers; a file with more says so before anything is downloaded.
Who can export and download
Exporting, copying as PNG or SVG, and downloading a .kite file are for the file's own people: its owner, the people in its workspace who can open it, and anyone invited to edit it. Someone who only has the link, or was invited to view it from outside the workspace, can look and comment but not download.