AI for Coding
AI for Image and Video
Research Using AI
MS Office Suite
Operating Systems & Tools
Management Tools
Courses
  • Data Science 360 CourseExplore

    • Exporting Assets from Figma for Development

    Last Updated : 7 Oct, 2026

    Exporting assets from Figma allows designers to provide images, icons, graphics, and other design elements for use in development. Figma supports several export formats and settings, allowing teams to prepare assets for different development and design needs.

    Steps to Export Assets from Figma

    Follow these steps to export assets from Figma.

    Exporting Assets in Design Mode

    Step 1: Select the layer, frame, component, group, or section you want to export.

    design2

    Step 2: In the right sidebar, scroll to the Export section and click the + icon to add an export configuration.

    Step 3: Choose the export format, such as PNG, JPG, SVG, or PDF.

    File Format
    Selecting the file format

    Step 4: Adjust the export settings, such as scale, suffix, color profile, and format-specific options.

    Step 5: Click Export to download the asset.

    Exporting Assets in Dev Mode Figma

    Step 1: Open your Figma file and switch to Dev Mode.

    Dev Mode

    Step 2: Select the layer you want to export.

    Step 3: In the Inspect tab, find the Export section and click the + icon. Choose the format and configure the available export settings.

    File Formats
    Selecting the file format

    Step 4: Click Export to download the asset.

    Download assets in Dev Mode

    Dev Mode can detect certain assets, such as icons, and make them available for download. Developers can also download GIFs, MP4 videos, and original image files from the Assets section.

    Types can be Exported

    Figma allows designers to export assets in various formats, each with its own use case:

    • PNG: A raster format ideal for exporting icons, images, and other graphical elements.
    • SVG: A vector format perfect for exporting logos, icons, and other graphics that need to be scalable.
    • JPG: A raster format suitable for exporting photographs and other high-resolution images.
    • PDF: A format ideal for exporting designs that need to be printed or shared as a document.

    Note: Figma supports SVG and PDF exports at 1x. For larger raster exports, you can choose a different scale such as 2x or 3x.

    Examples

    To illustrate, consider a scenario where a designer is working on a mobile app. The designer creates various icons, buttons, and background images in Figma. By following the export steps:

    • Icons: Exported as SVG when they need to remain scalable.
    • Photographs: Exported as JPG when a smaller raster file is suitable.
    • Images with transparency: Exported as PNG.
    • Print or document layouts: Exported as PDF.

    Benefits of Exporting Assets from Figma

    • Consistency: Exporting assets ensures that what designers create is exactly what users will see, maintaining visual consistency.
    • Efficiency: Automated exporting tools in Figma speed up the process, saving time and reducing manual errors.
    • Collaboration: Figma’s collaborative features mean that designers and developers can work together in real-time, ensuring a smooth handoff.
    • Scalability: With support for multiple resolutions and formats, Figma ensures that assets are scalable and adaptable to different devices and screen sizes.

    Limitations Faced when Exporting Assets from Figma

    While exporting assets from Figma is a powerful feature, it's not without its limitations:

    • File size: Large design files can result in massive export files, which can be challenging to manage.
    • Format limitations: Some file formats may not support certain design elements, such as animations or interactions.
    • Version control: Exported assets may not be automatically updated when the design changes, requiring manual updates.
    Comment