Component Inspector

Плагин Component Inspector позволяет просматривать свойства компонентов Figma аналогично тому, как они описаны в коде.

Этот плагин не генерирует код стиля. Он генерирует код, описывающий свойства компонента.

В настоящее время поддерживается генерация кода экземпляров и компонентов для:

• Компоненты функции React;
• Угловые компоненты;
• Компоненты Vue (как опции, так и составные API);
• Веб-компоненты;
• JSON.

Соглашения / советы профессионалов:

Слоты

В настоящее время этот плагин поддерживает слоты с тегами. Добавьте суффикс --SLOT[tagname] к имени свойства текстового компонента в Figma, и он сгенерирует слот для этого атрибута. Например, если вы создаете компонент с текстовым свойством с именем «heading--SLOT[h2]», он сгенерирует следующий экземпляр React и код определения:

My slot content} />

const Component: FC<{

heading: ReactNode;

}> = ({ heading }) => <>{heading};

Если вы используете суффикс --SLOT без имени тега, по умолчанию тэг будет span. Если ваш компонент Figma имеет одно свойство text, он будет рассматриваться как общий слот.

Это можно настроить, выполнив команду Component Inspector > Configuration command.

Логическая видимость

Если у вас есть логическое свойство компонента Figma, которое управляет видимостью свойства замены текста или экземпляра (или одного из их предков), это логическое свойство будет игнорироваться в сгенерированном коде, а свойство замены текста или экземпляра исчезнет, если логическое значение равно false.

«неопределенные» варианты вариантов и обмен экземплярами

Если у вас есть свойство варианта варианта, которое по умолчанию имеет значение строки «undefined», это свойство будет рассматриваться как действительно необязательное (без значения по умолчанию).

Если у вас есть свойство замены экземпляра, которое по умолчанию соответствует компоненту с именем «undefined», это свойство будет рассматриваться как действительно необязательный (без значения по умолчанию).

Это можно настроить, выполнив команду Component Inspector > Configuration command.

Игнорируемый префикс свойства

Вы можете настроить инспектор компонентов так, чтобы он игнорировал свойства, названные с предоставленным префиксом.

Это можно настроить, выполнив команду Component Inspector > Configuration command.

Параметры числового варианта

Если все ваши варианты вариантов являются числовыми или если значение по умолчанию для текстового свойства является числовым, сгенерированный код будет обрабатывать его как свойство числового типа.