logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Dev Mode
Collaboration
Import and export
File settings
Account
File management
Team management
Sharing and permissions
Billing
Organization
Apps
Work with support
Help Center/Import and export/Export files

Export files

Motiff supports exporting layers and slices as images for the development of new features or for migrating content between tools.

Motiff currently supports exporting layers in PNG, JPG, SVG, and PDF formats, with the ability to change the sizes and name suffixes of the exported items.

Export steps

The display location of the export option is related to the user's access permissions:

  • Can edit: The Export section is at the bottom of the design panel.
  • Can view: The Export section can be accessed by clicking Export at the top of the right sidebar.

'Export 1.png'

You can export by following these steps:

  1. 1.Select the layers you want to export.
  2. 2.Click https://conan-test.fbcontent.cn/atom-test/9x71wp42x.svg in the Export section to create a new export configuration.
  3. 3.Set the relevant formats and settings for the export.
  4. 4.Click the Export below to start exporting.

Tip: Clicking Preview below the Export section allows you to preview the export effect. If multiple layers are selected, the preview will not be displayed. After exporting, the image will be saved in the default download location of the browser. If you need to adjust related settings, you can modify them in the browser's preference settings.

Tip: Under Can edit, you can use https://conan-test.fbcontent.cn/atom-test/jhlj9h6jn.svg to set the export range.

Export settings

Export size

You can set the size of the exported image using the dropdown selector or input box.

  • x represents the multiplier (e.g. 1x, 2x, 3x…), indicating that the export size is the current layer width and height multiplied by the corresponding multiplier.
  • w represents exporting at a specified width, and h represents exporting at a specified height (e.g. 100w means exporting an image with a width of 100px).

'Export size.png'

File suffix

The exported image files will be named after the layer name. You can add specific suffixes to distinguish different export files of the same layer. 'File suffix.png'

Export formats

You can set the file type for each export configuration. Motiff supports PNG, JPG, SVG, and PDF file types.

PNG

PNG (Portable Network Graphics) is a raster image format supporting lossless compression algorithms. It supports indexed color, grayscale, RGB color schemes, and other features such as the Alpha channel.

PNG supports high resolution, lossless compression, different levels of transparency, and a higher color depth. It is suitable for images with transparency (e.g. logos, icons) and photos and charts with extensive details and continuous color tones.

PNG files are larger and take up more space. Using PNG on web pages will result in longer page load times and slower response speeds.

Notes: The PNG supported for export in Motiff is 32-bit PNG, which is composed of 4 8-bit channels: R (Red), G (Green), B (Blue), and Alpha channel.

  • R (Red), G (Green), B (Blue) can express 16.7 million colors (256 x 256 x 256).
  • The 8-bit Alpha channel supports 256 levels of transparency.

JPEG

JPEG (Joint Photographic Experts Group) is an international organization established in the late 1980s and early 1990s to develop and standardize image compression formats. It is a standard for continuous-tone still image compression and a raster image format using a lossy compression algorithm.

JPEG files support a 24-bit color depth and have 16.7 million colors, but they do not support different levels of transparency.

JPEG can achieve a high compression ratio while retaining image quality, thereby reducing the image storage space and transmission time. Additionally, it is a popular format supported by almost all image-processing software, browsers, and operating systems.

Therefore, JPEG is suitable for photos or other images with rich colors and details. However, for images that need to retain all details or have transparent effects, other image formats (such as PNG or SVG) should be used.

SVG

SVG (Scalable Vector Graphics) is an XML-based vector image format for defining two-dimensional graphics.

Unlike raster graphics (e.g. PNG, JPEG), vector graphics use mathematical formulas to describe the shapes, colors, and positions of graphics. This allows SVG to scale without distortion.

SVG supports transparency. Although SVG is a vector graphic format, it supports embedding raster graphics (bitmaps) and text in various formats within SVG.

For images composed of simple geometric shapes and colors, the sizes of SVG files are usually smaller than raster image files (e.g. PNG, JPEG).

For images with a lot of detail and extensive colors (such as photos), SVG may not be the best choice, as these details need to be described with a larger number of mathematical formulas and path information, which can lead to large file sizes. In such cases, lossy compressed raster image formats are more suitable (e.g. JPEG), since they can use lossy compression algorithms to reduce file size while retaining acceptable visual quality.

PDF

PDF (Portable Document Format) is a cross-operating system file format. PDF files support vector graphics, raster graphics, and text. Each PDF file encapsulates a complete description of a fixed-layout flat document, including the text, fonts, vector graphics, raster graphics, and other information required to display it. Therefore, PDF files are compatible and can be viewed on various operating systems and devices.

Xcode, a suite of tools developers use, supports using PDF format files as images. PDF can achieve lossless scaling, making it a convenient and practical choice to build apps for Apple platforms.