Import a Figma file

You can import a Figma file into uxdeck as a new file: its pages, frames, auto layout, components and variants, variables, styles and prototype links come with it. It works from a .fig file saved to your computer, so you do not need anything installed in Figma.

Use it to carry on a design in uxdeck, to publish it as a site, or to bring a design system over once and build on it.

Save the .fig from Figma

In Figma, open the file and choose File > Save local copy. Figma saves a .fig file to your computer.

Bring it into uxdeck

1. Go to Home.
2. Drop the .fig anywhere on Home, or press Open a file and choose it.
3. It is read and uploaded in the Uploads tray at the bottom right, with a progress bar as it is read and uploaded. You can keep working meanwhile.
4. When it is done, press Open on its row.

A toast says what came in, such as “Brand site from Figma: 4 pages, 1280 layers, 36 components, 52 variables”.

You can also open a .fig from inside a file: File > Open a local copy…. It opens as a new file.

Large files: choose the pages

If a file holds more than one uxdeck file keeps, a dialog asks which pages to bring in, with each page’s size and the total against what fits. Your product’s pages start ticked; drafts and component pages start last. Press Bring in (it names how many pages) to import the ticked ones. The others can come in later, as another file.

What comes over

• Pages, sections and frames.
• Auto layout, including negative spacing and the gap between wrapped rows.
• Components, variants and instances, with their properties. Components from a library the file used are placed on a page called Imported components.
• Variables and their modes, and colour styles as variables in a collection called Color styles.
• Text styles and effect styles.
• Prototype interactions and flows.

The site, ready to publish

A real design file keeps covers, boards of components, typography sheets and drafts beside its screens. uxdeck leaves those off the site to start, so publishing shows your screens, not your boards. Check and change this in Deck settings > Site > Pages. See Site settings.

Catches

• Pasting Figma layers does not work. If you copy layers in Figma and paste them into uxdeck, it says so. For shapes alone, use Copy as SVG in Figma; text and layout do not come with them. Import the .fig instead.
• Some things are not carried yet: layout grid styles, video fills and video actions.
• Variable modes follow your plan. On Free, a collection keeps its first mode; Pro keeps up to 10.
• Fonts need to be on your side. A typeface the file uses but your workspace does not have shows in a stand-in until you add it. See Fonts.
• Very large or damaged files may not open; uxdeck says “This .fig is too large to open here, or it is damaged.”
• A new file counts towards your plan’s files. On Free, with no room left, the import stops and says so.