Updated: November 3, 2021

Using Figma Stencils with Other Design Tools

Intro

You can transfer SAP Fiori design stencils from Figma to other design tools. This article outlines how to do this for Sketch, Axure RP, and Adobe XD.

Information
You can copy assets between the design tools without a Figma license.

Step 1: Open Stencils in Figma

  1. Go to www.figma.com, and sign up for a starter account (free).
  2. Import the stencil file using the button in the top right corner.
  3. Select the stencil you need (see the stencils within the layers panel on the left side).

Step 2: Export/Copy to Your Tool

Sketch

  1. Select the stencil.
  2. Set up the export:
    1. In design panel on the right, go to the Export section and click the “+” icon.
    2. Choose SVG as the export file.
    3. In the overflow menu (), deselect “Outline Text”.
       If you don’t deselect “Outline Text”, you won’t be able to change text afterwards in your design tool.
  3. Click Export to export the selection.
  4. In Sketch, open the exported SVG file via File / Open Local Document… .

Axure RP

  1. Install the Axure RP Plugin.
  2. Select the stencil on the canvas.
  3. Under the main menu on the top left go to Plugins / Axure / Copy Selection for RP.
  4. Open Axure RP and paste the component to your canvas.

Adobe XD

  1. Right click on the stencil and use the Copy as SVG option.
  2. Open Adobe XD and paste the SVG directly to your canvas.