{"id":13725163,"url":"https://github.com/thomas-lowry/figsvelte","last_synced_at":"2025-04-07T15:08:39.406Z","repository":{"id":42956994,"uuid":"231702852","full_name":"thomas-lowry/figsvelte","owner":"thomas-lowry","description":"A boilerplate for creating Figma plugins with Svelte","archived":false,"fork":false,"pushed_at":"2023-10-07T04:00:30.000Z","size":287,"stargazers_count":269,"open_issues_count":6,"forks_count":23,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-31T12:08:52.341Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thomas-lowry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-01-04T03:28:08.000Z","updated_at":"2025-02-06T21:33:01.000Z","dependencies_parsed_at":"2024-10-26T20:29:09.989Z","dependency_job_id":"5957b827-444e-41a5-8996-b84c4eb76143","html_url":"https://github.com/thomas-lowry/figsvelte","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigsvelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigsvelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigsvelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigsvelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomas-lowry","download_url":"https://codeload.github.com/thomas-lowry/figsvelte/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247675597,"owners_count":20977376,"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":[],"created_at":"2024-08-03T01:02:14.699Z","updated_at":"2025-04-07T15:08:39.384Z","avatar_url":"https://github.com/thomas-lowry.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Figsvelte\n\nA boilerplate for creating Figma plugins using Svelte.\n\nThis starter project has everything you need to start developing a Figma plugin usign Svelte. Your JS, CSS, SVG and image assets can be bundled on build. The package will take care of compiling your typescript + app on save during development, and also minify on build.\n\nAdditionally, this package comes preconfigured with [Figma Plugin DS Svelte](https://github.com/thomas-lowry/figma-plugin-ds-svelte) where you have access to a large range of components and icons that match the Figma UI, to get you up and running quickly. Note: installing this boilerplate will install the component library as a dependency.\n\nOnly what you import/use will be included in the final build for small bundle size.\n\n## To get started\n\n```bash\nnpx degit thomas-lowry/figsvelte figma-plugin\ncd figma-plugin\nnpm install\n```\n\n_Note that you will need to have [Node.js](https://nodejs.org/) installed._\n\n## Connecting your plugin to Figma\n\nConnecting your plugin to Figma\nAfter installing, go to **Plugins / Development / New Plugin** in the Figma desktop app for Mac OS or Windows and choose the option **\"Link existing plugin\"**.\n\n_You also can just type \"New Plugin\" in Figma global search to go there_\n\nFrom there you need to link a **manifest.json** file located at **public** folder in your directory:\n\n```bash\n/figma-plugin/public/manifest.json\n```\n\nNow edit this file to give a new name for your plugin, and you will be able call it from Figma: **Plugins / Development / Your Plugin Name**\n\n## Development\n\nDuring development, watch your project for changes with the following command.\n\n```bash\nnpm run dev\n```\n\nStart building your plugin UI in `'src/Plugin.svelte'`.\n\n## Build\n\nWhen ready to package up your final Figma Plugin:\n\n```bash\nnpm run build\n```\n\n## Useful info\n\nTo include an external CSS file:\n\n```javascript\nimport styles from \"./styles.css\";\n```\n\nTo include an SVG:\n\n```javascript\nimport SvgName from './image.svg';\n\n//use in your markup\n{@html SvgName}\n```\n\n_For more info on using the Icon component system with SVGs from [Figma Plugin DS Svelte](https://github.com/thomas-lowry/figma-plugin-ds-svelte), refer to the repo._\n\n_For info about Figma API visit [Figma API Overview](https://www.figma.com/plugin-docs/api/api-overview/)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-lowry%2Ffigsvelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomas-lowry%2Ffigsvelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-lowry%2Ffigsvelte/lists"}