skills.rest
guicheffer
guichefferCOMMUNITY
Explore all skills by this author →
Website𝕏@guichefferGitHub

figma-image-downloader

Download PNG screenshots of all FRAME nodes from Figma files.

3|Updated Dec 30, 2025
Search Tags:#automation#png#screenshots#figma#image export#design assets
One-click install
npx skills add https://github.com/guicheffer/devorch-cli --skill figma-image-downloader
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-image-downloader
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/figma-dev-mode/figma-image-downloader
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill figma-image-downloader

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the process of downloading screen screenshots from Figma design files, saving designers and developers significant manual effort.

Core Features & Use Cases

  • Automated Export: Downloads all FRAME nodes from a Figma file as high-resolution PNG images.
  • Flexible Input: Accepts Figma URLs and can optionally filter by a specific node ID.
  • Organized Output: Saves images to a structured directory within .devorch/artifacts/figma-screenshots/.
  • Use Case: Quickly grab all screens from a mobile app design in Figma to use as visual references for development or for creating a design documentation gallery.

Quick Start

Use the figma-image-downloader skill to download all screens from the provided Figma URL.

Frequently Asked Questions about figma-image-downloader

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I download all Figma screens as PNG images?▼

To download Figma screens as PNG images, you can use an automated bash script that retrieves all FRAME nodes from a specified Figma file URL via the API. This exports high-resolution design assets directly to a local directory.

What is the best way to automate extracting design assets from a Figma file?▼

Automating Figma image export involves using a bash script with curl and jq to query the Figma API. It targets all FRAME nodes in a design file, automatically downloading them as organized PNG screenshots for archiving or development reference.

Do I need a Figma API token to export screenshots from a file?▼

Yes, a Figma API token is required for authentication and data retrieval when exporting screenshots. The bash script relies on this token alongside curl and jq to securely access your Figma file and download the FRAME nodes.

Can I download screenshots for a specific frame node instead of the whole Figma file?▼

Yes, you can download specific frame nodes by providing an optional node ID along with the Figma URL. This filters the export process, allowing the script to target and retrieve only the designated design screens as PNG images.

Where are the exported Figma PNG images saved on my local machine?▼

Exported Figma PNG images are saved to a structured directory located at .devorch/artifacts/figma-screenshots/. This organized output path ensures your downloaded design assets are easy to find for documentation or development implementation.

Related Skills

Explore More Design & Creative Skills→
twjarviszyra-webtwjarviszyra-web
3

gif-search

Searches and downloads GIFs from Tenor using curl and jq.

Community
Basic
gihwan-devgihwan-dev
1

component-screenshot

Capture Storybook story screenshots as PNG assets by story-id.

Community
Intermediate
applewaveapplewave
1

figma

Generates React and Tailwind UI code from Figma designs via MCP.

Community
Advanced
CoRLab-TechCoRLab-Tech

figma-illustration-import

Import Figma vector illustrations into React components with SVG/PNG assets and Storybook stories.

Official
Intermediate