Turn Figma frames into scenes, and scenes back into Figma frames.
The SSHOW Figma plugin turns Figma frames into a .sshow file, and turns the scenes in a .sshow file back into Figma frames. The conversion runs only inside Figma and never connects to the internet.
Send a Figma design to SSHOW
In your Figma design file, first select the frames you want as scenes. Each top-level frame becomes one scene: a frame that sits directly on the page, not inside a section or group.
If the plugin is new to you, find the SSHOW Figma Plugin at SSHOW on Figma Community, and run it once in this design file or save it. After that, it appears in the plugin menu.
-
Open Export to SSHOW
Right-click the name of a selected frame (the name shown above the frame on the canvas) to open the plugin menu. Choose SSHOW Figma Plugin › Export to SSHOW. A panel opens and shows the number of selected frames next to Selected. If you select other frames while the panel is open, the number updates right away.
Choosing Export to SSHOW opens the panel, with the number of selected frames next to Selected. Video: When you choose Export to SSHOW in Figma, the plugin window appears on a blank background and fills in, with 3 next to Selected and Cover in File name. -
Set the scope and name
To send every top-level frame on the page, click All on page. File name is filled in with the first frame’s name. Spaces and non-English characters, such as Korean, become _ or are dropped, and if nothing is left, the name becomes “design”. To change it, type a name in English letters.
-
Download the .sshow file
Click Download .sshow. The file downloads, and the bottom line of the panel shows “Downloaded” and the file name. The box below the options shows the conversion report in English. If everything carried over as is, it reads “All properties converted faithfully.” If not, it lists what changed or was dropped, with counts.
Clicking Download .sshow shows “Downloaded” and the file name, and the report appears in the box above. Video: In the Export to SSHOW panel with launch-deck in File name, clicking Download .sshow changes the bottom line from Building .sshow… to Downloaded launch-deck.sshow, and the box below the options reads All properties converted faithfully. -
Open the upload window
On the SSHOW Studio home, click New project at the top right. When the window opens, click Upload .sshow file. A window for choosing a file opens.
Clicking New project, then Upload .sshow file, opens a window for choosing a file. Video: Clicking New project at the top right of the Studio home opens the What will you make? window, and clicking Upload .sshow file opens a window for choosing a file. -
Upload the file
Choose the .sshow file you just downloaded. When the upload finishes, the project opens in the editor. The Scenes list (top left) shows your Figma frame names as scenes.
Choosing the file opens the editor, and the Scenes list shows the Figma frame names as scenes. Video: Choosing launch-deck.sshow fills the upload bar and opens the editor. The Scenes list shows Cover, Feature, and Closing, and the Objects list shows Card and Title.
Text with mixed styles becomes one style
In SSHOW, each text object has a single style. If one text layer mixes fonts or weights, all of it becomes Pretendard at regular weight. If it mixes sizes, it becomes 26px. If it mixes colors, its fill is dropped and the text can’t be seen.
Before you export, split words with a different style into their own text layers. If you already exported, select that text in SSHOW and add a fill as shown in Fills and gradients.
Add motion to the exported design
Exported scenes have no transitions, so when you play them, they jump straight to the next scene. Figma prototype connections and animations don’t come over either.
Layers that share a name across Figma frames become objects that share a name in SSHOW. Turn on a transition, and each of those objects moves smoothly to its spot in the next scene. As with Figma’s Smart Animate, objects pair up by name. For a layer inside a group or frame, the group or frame names must match too.
-
Select the first scene
Select the first scene in the Scenes list. You set a transition on the scene you move away from.
Selecting the first scene in the Scenes list opens it, with no object selected. Video: Clicking the first scene in the Scenes list opens it, and the circle appears small in its starting spot on the left. -
Turn on the transition
Click the first button in the button row at the top right, the curve-shaped one. The Motion - Transition panel opens. Click Easing, then click Apply. To adjust the duration and curve, see Fine-tune transitions.
The pointer opens the Motion panel with the curve-shaped button, then clicks Easing and Apply. Video: Clicking the curve-shaped button at the top right opens the Motion - Transition panel. Clicking Easing shows a curve, and then Apply is clicked. -
Copy the transition
In the panel’s title row, click the Copy button, the one with two overlapping squares. SSHOW remembers this scene’s transition.
-
Paste it into the next scene
Select the next scene in the Scenes list, and click the clipboard-shaped Paste button. The same transition takes effect right away. Repeat for every scene except the last one.
With the next scene open, clicking Paste in the Motion panel applies the copied easing right away. Video: In the Motion panel opened for the second scene, which showed No Transition, clicking the Paste button applies the easing curve copied from the first scene right away. -
Play it back
Click Presentation options next to the triangle-shaped play button, and choose Play from the Beginning. You can also press F5. Click the screen, and objects with matching names move smoothly to their spots in the next scene. Press esc to return to editing.
Clicking the presentation screen slides the card to its spot in the next scene as it grows. Video: Clicking the presentation screen of a deck sent from Figma slides Card to its spot in the next scene as it grows, while Title changes its text and position.
Import an SSHOW project into Figma
Do this in the Figma desktop app or in Chrome. In Safari, the plugin can’t read files.
-
Get a .sshow file
Click the SSHOW logo at the top left of the SSHOW editor to open the Menu. Choose Save a Copy, and the project downloads as a .sshow file. You can also press ⌘⇧S.
Choosing Save a Copy in the menu downloads a .sshow file. Video: Clicking the SSHOW logo at the top left opens the menu, and choosing Save a Copy makes the browser download a .sshow file. -
Open Import by SSHOW
Open a Figma design file. From the plugin menu, choose SSHOW Figma Plugin › Import by SSHOW. A panel opens with a box for choosing a file.
-
Choose the file
Click the dashed box, Choose a .sshow file, and choose the file you downloaded. You can also drop the file onto that box. When the bottom line shows “Ready” and the number of images, you’re ready to import.
Choosing the file shows its name in the box and “Ready” on the bottom line. Video: In the Import by SSHOW panel, clicking Choose a .sshow file and picking launch-deck.sshow shows the file name in the box and Ready on the bottom line. -
Create the frames in Figma
Click Import to Figma. Each scene becomes one frame. The frames are all selected, and the view zooms to fit them. The bottom line reads “Imported to Figma.” and the box shows the conversion report.
Clicking Import to Figma creates the frames, and “Imported to Figma.” appears on the bottom line. Video: Clicking Import to Figma creates a frame for each scene. The frames are all selected, the view zooms to fit them, and the bottom line reads Imported to Figma.
Imported frames all land stacked in one spot
For now, regardless of the Columns per row value, every frame is created stacked in the same spot on the canvas (X 0, Y 0). The last scene sits on top and covers the rest, so select the frames one by one in the Layers panel and move them aside.
What carries over and what doesn’t
| Item | Figma to SSHOW | SSHOW to Figma |
|---|---|---|
| Frames · scenes | Each top-level frame becomes one scene, with its name and background color. The bottom frame in the Layers panel becomes the first scene. The scene size follows the first frame’s size, so export frames of the same size together. Images in a frame’s background are dropped. | Each scene becomes one frame, with its name and background. |
| Shapes · paths | Rectangles and ellipses carry over as is, and so do circles with a hollow center. Partial arcs become full circles. Vectors, lines, stars, and polygons become paths. Layers that can’t be carried over, such as boolean shapes, become PNG images. | Rectangles, circles, and paths become rectangles, ellipses, and vectors. |
| Text | Characters, font, size, weight, line height, letter spacing, and alignment carry over. The font is looked up in SSHOW’s font list or on this computer. Text case, lists, indents, and paragraph spacing are dropped. | Fonts you can’t use in Figma switch to Inter at the same weight, so line breaks may change. |
| Images | A rectangle filled with an image becomes an image object, and the photo stretches to the rectangle’s size. Images repeated in a tile pattern stay as fills. | Image objects become rectangles filled with the image. An image stretched out of its aspect ratio is cropped instead, keeping its ratio. |
| Groups · frames | Groups become groups, and frames, components, and instances inside them become SSHOW frames. Auto layout is frozen at its current positions. A mask stays only when it’s the bottom layer of its group. | Groups and frames carry over as is. For a mask, the bottom layer of the group becomes the mask, and an inverted mask becomes a regular mask. |
| Fills · strokes · effects | Solid colors; linear, radial, angular, and diamond gradients; stroke weight, caps, joins, and dashes; and drop shadows, inner shadows, blurs, and background blurs carry over. Arrow ends, blend modes set per fill, and other effects are dropped. | The same properties carry over. Line heads and trim, glass, noise, and adjustments are dropped. Outer glow becomes a shadow, and a blur with a gradient turned on becomes a uniform blur. |
| Position · rotation · 3D | Position, size, rotation, and flips carry over. The anchor point, the center of rotation, sits at the object’s top-left corner. | 2D rotation carries over. 3D rotation, depth, perspective, and four-corner distortion are dropped. |
| Video · audio · tables | Figma video fills are dropped. | Video, audio, and tables become empty gray frames that keep the object’s name. |
| Variables | Colors and corner radii bound to Figma variables become their values, and the binding is removed. | Colors that use variables become black. Variables in text come over as their names in curly braces, not their values. |
| Motion · notes | Prototype connections and animations are dropped, and scenes have no transitions. | Transitions, animations, interactions, notes, and scene descriptions are dropped. |
| Names · visibility · pins | Layer names, hidden and locked states, opacity, and blend modes carry over, and constraints become pins. | The same properties carry over, and pins become constraints. |
Project name · local files · rotation center
To use a non-English name. The Studio project name follows the uploaded file’s name. Click the name field at the top left of the editor, and the whole old name is selected. Type the new name and press ↩, and the project name changes too.
To open it as a file on this computer. In the SSHOW desktop app, choose Open .sshow file from the File menu. Local files don’t save automatically, so press ⌘S to save. For details, see Save and undo.
To rotate around the center. Objects from Figma have their anchor point at the top-left corner, so they rotate around that corner. In the toolbar, choose Edit Anchor Points (A), and drag the cross-shaped anchor point to the exact center. The anchor point snaps to the center.
When export or import doesn’t work
-
Why don’t I see the SSHOW Figma Plugin?
The plugin runs only in Figma design files. If you’re in another kind of file, such as FigJam, open a design file. If the plugin is new to you, find the SSHOW Figma Plugin at SSHOW on Figma Community, and run it once in this design file or save it. After that, it appears in the plugin menu. -
Why does the frame count show 0?
Only top-level frames on the current page count. Move frames inside sections or groups out onto the page, and put top-level components inside a frame. Selected counts frames only when the frames themselves are selected. If you selected a layer inside a frame, select the frame again. -
Why do scenes change instantly when I play?
Exported scenes have no transitions. Select the earlier scene, and in the Motion panel, click Easing, then Apply. -
Why does the font look different?
This happens when the font you used in Figma is neither in SSHOW’s font list nor on this computer. Drag the font file onto the editor to make it a project font. Then select the text and choose that font in Font Family. -
Why does my photo look stretched?
A photo that filled a rectangle with a different aspect ratio in Figma stretches to the rectangle’s size in SSHOW. Select the photo, and in the Image panel on the right, click Origin under Ratio. The width stays the same, and the height changes to the photo’s original ratio. -
Why can’t I choose a file in Safari?
Safari blocks Figma plugins from reading files, so you see “Could not read the file.” Try again in the Figma desktop app or in Chrome.
Updated 10/13/2026 · The videos on this page were recorded in the current editor.