Workflows & Integrations
Working with Figma
Import transparent PNGs and WebPs into Figma for design work.
Importing your cutout
- Export your image from NSS as PNG or WebP (both work well in Figma)
- In Figma: drag the file onto your canvas, or use File → Place image
- The transparent areas are immediately visible against the canvas background
Figma handles straight-alpha transparency natively. NSS exports are fully compatible.
Choosing PNG vs WebP
Both formats support transparency. For most Figma workflows, PNG is the safest choice:
- Universal compatibility — always works
- Lossless — no quality degradation
WebP is a good option if you're working in Figma and then exporting optimised assets for web — WebP is smaller and your design handoff stays at web-native quality.
Best practices in Figma
Keep the layer unlocked
Figma imports images as image fills inside a frame. To work with the transparency properly:
- Click the frame containing your image
- In the Fill panel on the right, confirm the fill type is "Image"
- The transparency works through Figma's compositing automatically
Using as a component
For product photos or brand assets you'll reuse:
- Import the cutout
- Wrap it in a Component (Ctrl+Alt+K / Cmd+Option+K)
- Instances maintain the transparent background
Overlaying on backgrounds
Simply place your cutout layer over a background layer. The transparency composites correctly. No "multiply" blend mode tricks needed — straight alpha works directly in Normal blend mode.
Exporting from Figma with the cutout
If you're using Figma as a compositing step and need to re-export:
- Select your composition frame
- In the Export panel, choose PNG (preserves transparency from your NSS cutout)
- Choose 2x or 3x for retina/high-DPI output
Figma Dev Mode
When handing off to developers, the exported PNG from Figma will include your cutout's transparency if you're using a PNG fill — make sure the developer exports as PNG, not JPG (which flattens transparency to white).