Tutorial / Mockplus Cloud / Add & Import Designs / Import Designs from Figma

Import Designs from Figma

Mockplus Cloud offers users a plugin to import artboards with assets from Figma. 

Download the Figma plugin

Download and install the Figma plugin.

Start the Figma Plugin

After successfully installing the plugin on your computer, you can open a project in Figma and right click on whitespace to open it by selecting: Plugins > Mockplus.

Create a New Project

Click on the triangle icon to expand the list of projects. Next, click on the "+" icon to create a new project.

You can then create a page group for this project and upload designs to it.

Switch Teams or Accounts

Click on "More" in the upper right-hand corner to switch teams or accounts.

Set Pixel Density

Before exporting your designs to Mockplus Cloud, you can select the pixel density—such as 1x, 2x, or 3x—that best suits your needs. 

For example, if the design is 750 x 1334 pixels, you need to select 2x. If it's 375 x 667 pixels, you need to select 1x.

When selecting pixel densities, you can refer to this:

You then have two options: "Upload all artboards" and "Upload selected artboard(s)."

Choose one option and click the "Upload" button to upload your artboards, along with their asset details, to the Mockplus Cloud.

Mark Assets for Export

With the Figma plugin, apart from exporting designs to Mockplus Cloud, you can also mark layers or groups as assets for export. 

Select the layers or groups you'd like to export as assets and click "Add slide layer". Those layers and groups will be uploaded to Mockplus Cloud along with your designs. 

And then, these asset details are available for your developers and other team members to view online. Mockplus will automatically generate all assets for different platforms like iOS, Android and Web platforms in the background. Varied asset formats and scales such as @1x, @2x and @3x are also automatically generated.

Notify Members

After updating your designs in Mockplus Cloud, you can notify your team members so they can check updates as soon as possible. Click “Notify members”, select the members to whom you want to send notifications to and enter a notification message. These members will then be notified in real time.