figma-lens CLI: inspecting a Figma design before writing the UI

A Figma board may have several versions of the screen you need to build. A loading state sits beside the finished result; the mobile layout is below the desktop frame. Some text may be hidden inside component variants. Before coding, you need to find the state the task refers to.

I built figma-lens CLI to inspect those files through the Figma API. It returns screenshots and design data for the area you’re looking at, along with suggested commands for further inspection. You can run it without Figma Desktop.

The CLI is an independent open-source project. It is not affiliated with Figma or the separate Lens • Find & Select Text community plugin.

Inspect the state before implementing it

The companion skill tells an agent to view the board and choose the relevant state before inspecting individual details. A full-screen preview helps locate a card or modal. To check its spacing and typography, the agent needs a close-up at the original size.

The agent should check the exact font family and weight, use exported assets, and copy the text from the selected state. After building the UI, the skill calls for a browser screenshot at the same dimensions as the design and a separate comparison of the visible text.

For implementation work, use the skill with the CLI. Extracting a design gives the agent evidence to work from; checking the finished page still requires viewing that evidence and comparing it with the UI in a browser.

Install and inspect a board

You need Node.js 20 or newer and a Figma account that can access the file.

npm install --global figma-lens
figma-lens --version

Create a personal access token in Figma’s account settings with file_content:read and current_user:read. Enter it through the terminal’s hidden prompt:

figma-lens auth login
figma-lens doctor

Copy a link to a board or flow and replace the example URL:

figma-lens scout "https://www.figma.com/design/FILE_KEY/File?node-id=1-2"

Open the overview screenshot returned by the command. The result lists discovered states and suggests follow-up commands, letting you inspect the relevant screen without fetching every layer. If the link already points to an exact screen, pass an intent describing the target to extract.

Results go into .figma-lens/. Add it to .gitignore, since screenshots and cached data may contain private designs.

Give the agent the inspection steps

Install the companion skill:

npx -y skills@latest add khanglvm/figma-lens --skill figma-lens --global --yes

Then give the agent a task such as:

Use the figma-lens CLI and its skill to inspect this Figma link: <link>.
Open the screenshots, identify the relevant screen state, and inspect its
important details before coding. Check the required fonts and reuse the
exported assets. Compare the finished UI with the source in a browser.

Follow-up queries use the cache and return focused output to limit how much design data enters the agent’s context. The skill tells the agent to open individual evidence files as needed, keeping a complete layer tree out of the conversation.

Limits to check

The agent needs image-viewing support and must open the screenshots it receives. Printing a path in the terminal does not complete that step.

Figma can report the requested font face. You still need a licensed font file and a browser check that the website loads it. File permissions and API limits also apply, and the CLI cannot read an unsaved local .fig file.

The design-to-code guide covers the inspection and verification steps. Installation options and the package are on npm.