{"id":14981577,"url":"https://github.com/lekoarts/figma-theme-ui","last_synced_at":"2025-04-04T18:10:08.945Z","repository":{"id":37273223,"uuid":"232862965","full_name":"LekoArts/figma-theme-ui","owner":"LekoArts","description":"Convert a Theme UI config to Figma Styles","archived":false,"fork":false,"pushed_at":"2025-03-31T20:06:01.000Z","size":2156,"stargazers_count":177,"open_issues_count":14,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-31T21:23:03.101Z","etag":null,"topics":["figma","figma-plugin","figma-styles","plugin","svelte","theme-ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/LekoArts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["LekoArts"],"patreon":"lekoarts","open_collective":null,"ko_fi":"lekoarts","tidelift":null,"custom":null}},"created_at":"2020-01-09T17:13:50.000Z","updated_at":"2025-03-02T06:54:56.000Z","dependencies_parsed_at":"2023-10-01T05:21:50.469Z","dependency_job_id":"8c28a361-3409-4df4-8a24-031449bf55e4","html_url":"https://github.com/LekoArts/figma-theme-ui","commit_stats":{"total_commits":542,"total_committers":4,"mean_commits":135.5,"dds":0.07564575645756455,"last_synced_commit":"19769ea416a5639f03abbf07cbbbafda9b6ffe21"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LekoArts%2Ffigma-theme-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LekoArts%2Ffigma-theme-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LekoArts%2Ffigma-theme-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LekoArts%2Ffigma-theme-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LekoArts","download_url":"https://codeload.github.com/LekoArts/figma-theme-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226215,"owners_count":20904465,"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","figma-plugin","figma-styles","plugin","svelte","theme-ui"],"created_at":"2024-09-24T14:03:52.489Z","updated_at":"2025-04-04T18:10:08.922Z","avatar_url":"https://github.com/LekoArts.png","language":"TypeScript","funding_links":["https://github.com/sponsors/LekoArts","https://patreon.com/lekoarts","https://ko-fi.com/lekoarts"],"categories":[],"sub_categories":[],"readme":"# Theme UI Plugin for Figma\n\nConvert a [Theme UI][theme-ui] config to [Figma Styles][figma-styles].\n\n[Install the plugin](https://www.figma.com/c/plugin/797015796747379907)\n\n## Usage\n\nChoose a `.json` file that only contains your theme. Example:\n\n```json\n{\n  \"fonts\": {\n    \"body\": \"-apple-system, BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'\",\n    \"heading\": \"inherit\"\n  },\n  \"fontSizes\": [12, 14, 16, 20, 24, 32],\n  \"fontWeights\": {\n    \"body\": 400,\n    \"heading\": 700\n  },\n  \"lineHeights\": {\n    \"body\": 1.5,\n    \"heading\": 1.125\n  },\n  \"colors\": {\n    \"text\": \"rgb(0,0,0)\",\n    \"background\": \"#fff\",\n    \"brand\": {\n      \"primary\": \"hsl(205, 100%, 40%)\",\n      \"secondary\": \"#30c\"\n    },\n    \"teal\": [null, \"#e6fffa\", \"#b2f5ea\", \"#81e6d9\"]\n  }\n}\n```\n\nThe shape of the theme has to follow the [theme specification][theme-spec]. Otherwise the plugin can't find your styles. In your frontend code you can setup your bundler to be able to load `.json` files so that you can directly use it for your Theme UI config. This way the file is interchangeable.\n\nMore specifically, you'll need to bring the theme into the following shape (as shown above):\n\n- `fonts`, `fontWeights` and `lineHeights` have to have the same keys (above: `body` and `heading`)\n- `fontSizes` has to be defined as `Array\u003cnumber\u003e`\n- `fontWeights` and `lineHeights` need to have a `number` as property\n\nLastly, click \"Add Styles\" to create your Figma Styles.\n\n## Development\n\nInstall the dependencies:\n\n```sh\nyarn install\n```\n\nAnd build the plugin:\n\n```sh\nyarn build\n```\n\nGo to your \"Plugins\" tab inside Figma and press the \"+\" button on \"Development\". Choose the `manifest.json` file inside `figma-theme-ui` folder.\n\nYou now can open the plugin in any project. Run `yarn dev` to have rollup watch your changes. You'll need to re-open the plugin after every change.\n\n## Acknowledgements\n\n- Thanks to [Figsvelte][figsvelte] for his cool boilerplate to start a Figma plugin with Svelte\n- Thanks to [tailwindcss-figma-plugin][tw-plugin] for giving me an idea on how to use Figma's API\n\n[theme-ui]: https://theme-ui.com/\n[figma-styles]: https://help.figma.com/category/221-styles\n[theme-spec]: https://theme-ui.com/theme-spec\n[figsvelte]: https://github.com/thomas-lowry/figsvelte\n[tw-plugin]: https://github.com/impulse/tailwindcss-figma-plugin\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekoarts%2Ffigma-theme-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flekoarts%2Ffigma-theme-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekoarts%2Ffigma-theme-ui/lists"}