Import from Figma, Sketch and XD
Moio turns .fig, .sketch and .xd files into new documents and converts layers copied in Figma when you paste them into the editor. Moio imports the visual design with the conversions listed below. You rebuild its interactions, variables and interactive states yourself, apart from the scrolling and preview-entrypoint settings noted in the table. Also called: migrating a design, converting a design file.
warning
Upload the custom fonts a design uses before you import it (→ Font upload). A document that uses a font found neither in the built-in library nor among the workspace's uploaded fonts opens with the Missing Fonts dialog, and the replacement you pick there is written into the document and can't be undone.
Importing a file
Where: dashboard → open the project or folder the documents should land in → Import .fig, .sketch or .xd in the action bar, or drag the files onto the file list. In Shared with me, Recents and Starred the button shows once a folder is open.
- Each file becomes one new document in that folder, owned by you. Pages stay pages. An
.xdfile has none: its artboards land on one page and its main components on a second page, Imported symbols. - You need edit access to the folder. Without it the button is disabled and the drop area reads Cannot import into a readonly folder.
- Several files can go in at once. The import dialog lists each file as Queued, then with a spinner, then as Done or with an error. More files can be dropped onto the dialog while it runs.
- Files upload one after the other, so a large file holds up the ones queued behind it.
- Cancel abandons the files that haven't finished. Documents that are already Done stay.
- File type not supported means the file name doesn't end in
.fig,.sketchor.xd. Import failed means the file couldn't be uploaded or converted; no further detail is shown. - A
.figfile's library components become components of the new document (→ Components belong to one document). They arrive hidden, like deleted main components; their instances work (→ Deleting and restoring a main component).
note
A design file can be up to 500 MB.
What is carried over
The Figma column describes a .fig import. A paste from Figma converts layers the same way; the Fonts and Image fills rows describe a file import only. Dropped and Approximated happen without a message.
| In the design | From Figma | From Sketch and XD |
|---|---|---|
| Pages and structure | Pages become pages; frames, groups and sections all become frames. Hidden and locked layers and guides are kept; layout grids become Layout helpers. Dropped: slices, widgets and whiteboard objects. | Artboards and groups become frames; hidden layers and guides are kept. Sketch also keeps locked layers and layout grids; XD keeps neither. |
| Auto layout | Becomes Flex: direction, wrapping, gaps, padding, alignment, Fixed / Fill / Hug content (sizing), min and max size, absolutely positioned children. Approximated: baseline alignment becomes start alignment; evenly spaced distribution becomes Space between. | Sketch: dropped — layers keep their positions in frames without managed layout. XD: a stack becomes Flex with direction, gap and padding, but only with equal spacing between its layers; any other stack keeps its positions. |
| Grid auto layout | Becomes Grid: fixed, fr and auto tracks, gaps, each item's cell, span and alignment. Approximated: a track with a minimum and a maximum keeps one size. | — |
| Constraints | Carried over, including scale and the aspect-ratio lock (→ Constraints). | Carried over. |
| Components, variants, instances | Components, component sets and instances stay what they are. Variants keep their names, and the set gets no component behavior. | Sketch: symbols become components. XD: components with states become component sets, one variant per state. No component behavior in either. |
| Overrides | Carried over, nested instances, text and swapped instances included. Dropped: an override of a property that instances here can't change (→ Overrides). | Sketch: text and nested-symbol overrides only. XD: text, fills, strokes, visibility, opacity, corner radius, effects and the state of a nested component. |
| Component properties | Boolean and text properties become inputs, bound to the same layers. A slot property becomes a Slot input with its frame assigned to it, and the content an instance placed in the slot arrives in that instance (→ Slots). Dropped: instance swap properties — each instance keeps the component it showed. | — |
| Text | Per-range size, font, fill, underline, strikethrough, letter spacing and line height; links; bulleted and numbered lists; auto width and auto height; truncation; paragraph indent and spacing. Approximated: justified text becomes left-aligned. | Sketch: lists, no links; justified becomes left-aligned. XD: links, no lists. |
| Fonts | A file import matches each font by name against the workspace's custom fonts, then the built-in library. An unmatched font is kept by name and never substituted — the Missing Fonts dialog asks when the document opens. | Same. |
| Fills and strokes | Solid, linear and radial; angular gradients become conic gradients; blend mode and opacity per fill; stroke position, dashes, per-side widths, individual corner radii. Approximated: diamond gradients become radial. Dropped: video fills. | Solid, linear, radial and angular gradients. |
| Image fills | Fill, fit, tile and stretch, crop and flips. Exposure, contrast and saturation become effects on the layer. Dropped: temperature, tint, highlights and shadows adjustments. | Carried over. |
| Effects | Drop shadow, inner shadow, layer blur, background blur. Dropped: shadow spread and an effect's blend mode. | Shadows and blurs. |
| Masks, boolean operations, vectors | Carried over. | Carried over. |
| Styles | Dropped as styles: every layer keeps the colors and text settings its styles gave it. | Same. |
| Variables | Dropped: no variables are created and nothing is bound; layers arrive with plain values. | — |
| Prototype interactions | Dropped, with two exceptions. A frame set to scroll gets the Pannable object behavior on the same axis. A flow starting point marks its artboard as a preview entrypoint — the state that Set as preview entrypoint in the artboard's context menu toggles. | Dropped, without exceptions. |
Pasting from Figma
Where: editor → Ctrl + V with layers copied in Figma on the clipboard.
The toast Importing Figma clipboard content... shows while the selection is converted; the layers then land where any paste would (→ Where a paste lands).
- Layers convert as in a
.figimport (→ What is carried over). - Every paste brings its own components. Paste the same button twice and the document holds two unrelated components; nothing is matched against components it already has (→ Moving components between documents).
- Fonts are checked before the paste lands. Missing Fonts opens for the pasted text only; Cancel pasting discards the whole paste, Replace Fonts pastes with the replacements.
- Only copied layers convert; a copy of properties doesn't.
- Could not decode Figma clipboard content. means the conversion failed. Copy again, or import the file.
- A paste can also be refused because the editor tab is out of date (→ Clipboard version messages).
After the import: what to rebuild
| What you see | Why | Where to go |
|---|---|---|
| Missing Fonts blocks the document | A font is neither uploaded to the workspace nor in the built-in library. Cancel, then Back to Dashboard, leaves the document untouched: upload the font and open the document again. | Font upload |
| Hover and pressed variants do nothing in preview | The set arrives with No behavior, and a name like State=Hover is not a state name. Set the component behavior and rename the variants to Name:state, for example Primary:hover. | Component behavior, Naming states |
| A scrolling area drags but ignores the wheel | It arrived with Pannable. Remove it and add Scrollable. From Sketch and XD nothing scrolls at all. | Imported designs, Scrollable |
| Clicking does nothing | Interactions are not imported. Add events and actions to the layers. | How interactions run |
| A value that was a variable is a plain value | Variables are not imported. Create them and bind the properties again. | Variables |
| Changing a color means editing every layer | Styles arrive as plain values. A Color variable bound to the fills gives one place to change it. | Binding |
| Spacing or alignment is slightly off | Baseline alignment, evenly spaced distribution and min–max grid tracks are approximated; a Sketch file has no managed layout at all. | Flex layout, Grid layout |
Related
- Font upload — custom fonts and the Missing Fonts dialog.
- Variants and interactive states — turning imported variants into working states.
- Reusing content across documents — paste targets and what travels with a paste between documents.
- Scrolling in preview — why nothing scrolls by default, and Scrollable versus Pannable.