Просмотр файлов

CLI позволяет исследовать дизайн-документы без открытия редактора. Каждая команда также работает с запущенным приложением — просто опустите аргумент файла.

Установка

bun add -g @open-pencil/cli
# или
brew install open-pencil/tap/open-pencil

Информация о документе

Краткий обзор — количество страниц, общее число узлов, используемые шрифты, размер файла:

open-pencil info design.fig

Дерево узлов

Вывод полной иерархии узлов:

open-pencil tree design.fig

[0] [page] "Getting started" (0:46566)
  [0] [section] "" (0:46567)
    [0] [frame] "Body" (0:46568)
      [0] [frame] "Introduction" (0:46569)
        [0] [frame] "Introduction Card" (0:46570)
          [0] [frame] "Guidance" (0:46571)

Поиск узлов

Поиск по типу:

open-pencil find design.fig --type TEXT

Поиск по имени:

open-pencil find design.fig --name "Button"

Оба флага можно комбинировать для более точных результатов.

Запросы с XPath

Используйте XPath-селекторы для поиска узлов по типу, атрибутам и структуре дерева:

open-pencil query design.fig "//FRAME"

Полезные шаблоны

По типу:

open-pencil query design.fig "//TEXT"                    # Все текстовые узлы
open-pencil query design.fig "//COMPONENT"               # Все компоненты
open-pencil query design.fig "//INSTANCE"                # Все экземпляры

По атрибутам:

open-pencil query design.fig "//FRAME[@width < 300]"                # Фреймы шириной менее 300px
open-pencil query design.fig "//*[@cornerRadius > 0]"               # Скруглённые углы
open-pencil query design.fig "//*[@visible = false]"                # Скрытые узлы
open-pencil query design.fig "//TEXT[@fontSize >= 24]"              # Крупный текст
open-pencil query design.fig "//*[@opacity < 1]"                    # Полупрозрачные узлы

По имени и текстовому содержимому:

open-pencil query design.fig "//TEXT[contains(@name, 'Button')]"    # Имя содержит 'Button'
open-pencil query design.fig "//TEXT[contains(@text, 'Hello')]"     # Текст содержит 'Hello'

По иерархии:

open-pencil query design.fig "//SECTION//TEXT"            # Текст внутри секций
open-pencil query design.fig "//FRAME/TEXT"               # Прямые дочерние тексты фреймов
open-pencil query design.fig "//COMPONENT_SET//INSTANCE"  # Экземпляры внутри наборов компонентов

Доступные атрибуты

name, width, height, x, y, visible, opacity, cornerRadius, fontSize, fontFamily, fontWeight, layoutMode, itemSpacing, paddingTop, paddingRight, paddingBottom, paddingLeft, strokeWeight, rotation, locked, blendMode, text, lineHeight, letterSpacing

Пример вывода

  Found 5 nodes

[0] [frame] "Logo  92×32" (0:9)
[1] [frame] "logo-short-6  31×32" (0:10)
[2] [frame] "wrapper  128×73" (0:20)
[3] [frame] "pen-drawing  148×52" (0:21)
[4] [frame] "surprised-emoji  32×32" (0:26)

Свойства узла

Просмотр всех свойств конкретного узла по его ID:

open-pencil node design.fig --id 1:23

Страницы

Список всех страниц в документе:

open-pencil pages design.fig

Переменные

Список дизайн-переменных и их коллекций:

open-pencil variables design.fig

Режим работы с приложением

Когда настольное приложение запущено, опустите аргумент файла — CLI подключится по RPC и будет работать с активным холстом:

open-pencil tree              # просмотр текущего документа
open-pencil eval -c "..."     # запрос к редактору

Линтинг дизайна

Проверяйте документы на соответствие правилам именования, вёрстки, структуры и доступности:

open-pencil lint design.fig
open-pencil lint design.pen --preset strict
open-pencil lint design.fig --rule color-contrast
open-pencil lint design.fig --list-rules

Используйте --json для машиночитаемого вывода.

JSON-вывод

Все команды поддерживают --json для машиночитаемого вывода — передавайте в jq, используйте в CI-скриптах или обрабатывайте другими инструментами:

open-pencil tree design.fig --json | jq '.[] | .name'