{"id":16329000,"url":"https://github.com/jake-figma/component-inspector","last_synced_at":"2025-04-11T03:51:43.568Z","repository":{"id":176425612,"uuid":"540929646","full_name":"jake-figma/component-inspector","owner":"jake-figma","description":"A Figma plugin for inspecting Figma components","archived":false,"fork":false,"pushed_at":"2024-03-20T19:45:17.000Z","size":1409,"stargazers_count":106,"open_issues_count":4,"forks_count":12,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-25T01:51:13.488Z","etag":null,"topics":["figma-plugin"],"latest_commit_sha":null,"homepage":"https://www.figma.com/community/plugin/1162860898904210114","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jake-figma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-24T18:33:28.000Z","updated_at":"2025-02-27T02:50:21.000Z","dependencies_parsed_at":"2024-10-10T23:16:28.681Z","dependency_job_id":null,"html_url":"https://github.com/jake-figma/component-inspector","commit_stats":null,"previous_names":["jake-figma/component-inspector"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jake-figma%2Fcomponent-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jake-figma%2Fcomponent-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jake-figma%2Fcomponent-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jake-figma%2Fcomponent-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jake-figma","download_url":"https://codeload.github.com/jake-figma/component-inspector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248339261,"owners_count":21087214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["figma-plugin"],"created_at":"2024-10-10T23:14:38.564Z","updated_at":"2025-04-11T03:51:43.545Z","avatar_url":"https://github.com/jake-figma.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![](ComponentInspectorBanner.png)\n\n# Component Inspector\n\nA [Figma plugin](https://www.figma.com/community/plugin/1162860898904210114) for inspecting Figma components.\n\nThis plugin provides a look at Figma component properties similar to how they are described in code. This plugin does _not_ generate style code. It generates code that describes component properties.\n\nCurrently supporting instance and component code generation for:\n\n- React function components\n- Angular components\n- Vue components (both option and composition APIs)\n- Web components\n\nAs well as:\n\n- JSON\n\nWould love to hear from you about what works and what doesn't.\n\n## Conventions / Pro Tips\n\n### Slots\n\nCurrently, this plugin supports tag-named slots. Add the `--SLOT[tagname]` suffix to the name of a text component property in Figma and it will generate a slot for that attribute. For example, if you create a component with a text property named `\"heading--SLOT[h2]\"`, it would generate the following React instance and definition code:\n\n```tsx\n\u003cComponent heading={\u003ch2\u003eMy slot content\u003c/h2\u003e} /\u003e\n```\n\n```tsx\nconst Component: FC\u003c{\n  heading: ReactNode;\n}\u003e = ({ heading }) =\u003e \u003c\u003e{heading}\u003c/\u003e;\n```\n\nThe tagname will default to `span` if you use the suffix `--SLOT` without a tagname.\n\nIf your Figma component has a single text property, it will be treated as a generic slot.\n\n\u003e This can be configured by running the Component Inspector \u003e Configuration command.\n\n### Boolean visibility\n\nIf you have a boolean Figma component property that controls visibility of a text or instance swap property (or one of their ancestors), that boolean property will be ignored in generated code and the text or instance swap property will disappear when the boolean is false.\n\n### `\"undefined\"` variant options and instance swaps\n\nIf you have a variant option property that defaults to the string `\"undefined\"`, that property will be treated as truly optional (no default).\n\nIf you have an instance swap property that defaults to a component named `\"undefined\"`, that property will be treated as truly optional (no default).\n\n\u003e This can be configured by running the Component Inspector \u003e Configuration command.\n\n### Ignored property prefix\n\nYou can configure the component inspector to ignore properties named with a provided prefix.\n\n\u003e This can be configured by running the Component Inspector \u003e Configuration command.\n\n### Numeric variant options\n\nIf your variant options are all numeric or if the default value for a text property is numeric, the generated code will treat it like a number type property.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjake-figma%2Fcomponent-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjake-figma%2Fcomponent-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjake-figma%2Fcomponent-inspector/lists"}