docs /paste/figma
Paste from Figma
Paper lets you import your work directly from Figma easily: simply copy any selection in a Figma file and paste it directly into Paper as editable layers.
This page lists a few notes and gotchas you might want to be aware of while doing so.
Overview
Copy and paste to import
Importing your work from Figma to Paper is easy:
- Make a selection in Figma (you can select the entire content of a page by hitting ⌘A)
- Copy the selection (right click → copy or ⌘C)
- Go to a Paper file and paste (right click → Paste or ⌘V)
That’s it! You’re good to go and continue working in Paper.
Pasting images
If your selection contains images, you’ll be prompted to connect to Figma through Paper’s extension for Figma. This is optional, but without it images cannot be imported.
A few things to keep in mind:
- The Figma account you connect must be able to open the file, otherwise the paste will succeed but images will be missing.
- Figma APIs are rate limited, and depending on your plan you may hit it faster than expected.
Translation notes
It’s important to note that some things won’t translate perfectly when going from Figma to Paper, for two reasons:
- Some features are not available in Paper just yet—like components, variables, masks, inline text styles, and more. We’re actively working on these, and they will more gracefully translate in the future. Keep an eye on our roadmap for when these features will be supported.
- Paper relies on CSS, meaning you can’t achieve something that wouldn’t be possible natively in the browser through CSS rules. Gradient strokes and arbitrary length for dashed borders, for instance, are possible in Figma but not in CSS, and therefore aren’t supported in Paper either.
Components & variables
Components, instances, and variables are currently detached when pasted into Paper.
“Code connected” components are not supported.
Masks
Masks aren’t yet supported in Paper. When pasted, any mask and its affected nodes are hidden. You can un-hide them from the layer tree panel.
Gradients
Diamond gradients are transformed into a radial gradient, as CSS does not support diamond-shaped gradients. Radial gradient rotation is also dropped, as CSS does not support angles on radial gradients. This won’t have any visual impact on your design, though.
Strokes
Where possible, strokes are faithfully recreated when pasted into Paper, with some translation to preserve design intent. Some stroke features can not be preserved, because CSS doesn’t support them:
- arbitrary dash lengths
- gradient strokes
- independent strokes excluded from layout (eg. a bottom border that’s excluded from layout in Auto layout settings)
Effects
Where possible, effects are faithfully recreated when pasted into Paper, with some translation to preserve design intent. Some effects are not preserved:
- noise
- texture
- glass (we fall back to a background blur effect)
- repeat (available in Figma Draw)
- symmetry effects (elements flipped vertically/horizontally)
Drop shadows, layer blurs, and background blurs are faithfully recreated.
Inner shadows have possible edge cases: instead of being assigned to the parent, they are set on every child with some logic, as CSS expects (in Figma, you can set it on the parent and they get set on all children).
Text
Paper doesn’t yet support “rich text”, meaning multiple text styles within a single text node isn’t possible just yet (think for instance a bolded word within a sentence).
Truncated text also works slightly differently: in Paper, when a text node is truncated, its height is set to “Fit” (whereas in Figma the height can be of any arbitrary size).
Blend modes
Figma’s “pass-through” blend mode has no equivalent in CSS when working with background blends. Where possible, some translation will take place to preserve the design intent.