Does SketchMason export editable Figma files?

No. Exports are standalone HTML and a written brief in Markdown, so the Figma file is a manual rebuild. The section on rebuilding the screen in Figma walks through it step by step.

Is this for Sketch app files?

No. Sketch here means a rough drawing, made on the SketchMason canvas or photographed from paper, not a document from the Sketch design application.

When should I use this workflow?

Use it when you want to settle the layout and visual direction before a designer builds Figma components.

Sketch to Figma starts with a clear UI design

Explore a sketch-to-Figma workflow with SketchMason. Resolve your layout on the canvas, export a design brief, and rebuild in Figma.

Try SketchMason free

Resolve the screen before the handoff

Draw labelled rectangles for navigation, content and actions. Generate the design beside your sketch, then revise the hierarchy until the screen communicates the idea you want to share.

Bring a reference into Figma

SketchMason exports standalone HTML and written briefs. Use the rendered design as a visual reference and the brief to explain the layout to your designer. Recreate frames and components in Figma as a separate step.

What a useful handoff includes

For a signup screen, identify the heading, input fields, primary action and error state. Agree on those decisions before rebuilding the screen. Include the surrounding screens so your designer understands where the flow starts and ends.

Rebuild the screen in Figma, brief in hand

Export the written brief for each screen and work through it from the top. Make one frame per screen, named after the design, and a 390px frame for any mobile version you generated. Before drawing anything, turn the brief's colour table into Figma colour variables and its type table into text styles, so every layer uses them from the first rectangle. Both tables come from the project's style guide, so generate one from a mood board first. Then follow the page structure list in order, one auto-layout section per entry, which keeps the sections in the order the design set. Anything that repeats, such as a button, an input or a card, becomes a component the first time it appears. The brief records no spacing scale, so open the HTML export in a browser and read the gaps from there. For a signup screen, that is one vertical auto-layout stack: heading, email field, password field, primary button and an error message, with the field and the button as components the rest of the flow reuses.

Keep the style guide beside the file

The style guide your mood board produced exports as an image: colour swatches with their names and hex values, the type scale, radius, elevation and the button styles, all drawn in the guide's own colours and typeface. Pin it next to the Figma file during the rebuild. It answers the questions that come up most often, which colour and which size, without reopening the brief, and it gives whoever builds the component library a picture of the buttons to match.

Frequently asked questions

Does SketchMason export editable Figma files?: No. Exports are standalone HTML and a written brief in Markdown, so the Figma file is a manual rebuild. The section on rebuilding the screen in Figma walks through it step by step.
Is this for Sketch app files?: No. Sketch here means a rough drawing, made on the SketchMason canvas or photographed from paper, not a document from the Sketch design application.
When should I use this workflow?: Use it when you want to settle the layout and visual direction before a designer builds Figma components.