{"id":16329067,"url":"https://github.com/theemo-tokens/figma-theemo","last_synced_at":"2025-04-24T17:31:17.061Z","repository":{"id":40765538,"uuid":"230966510","full_name":"theemo-tokens/figma-theemo","owner":"theemo-tokens","description":"Figma plugin to reference styles","archived":false,"fork":false,"pushed_at":"2023-09-07T16:04:36.000Z","size":1311,"stargazers_count":18,"open_issues_count":19,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T08:37:31.836Z","etag":null,"topics":["automation","design-ops","figma","figma-plugin","references","styles","transforms"],"latest_commit_sha":null,"homepage":null,"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/theemo-tokens.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}},"created_at":"2019-12-30T19:09:12.000Z","updated_at":"2024-05-15T01:37:24.000Z","dependencies_parsed_at":"2023-02-12T13:01:18.340Z","dependency_job_id":null,"html_url":"https://github.com/theemo-tokens/figma-theemo","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theemo-tokens%2Ffigma-theemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theemo-tokens%2Ffigma-theemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theemo-tokens%2Ffigma-theemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theemo-tokens%2Ffigma-theemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theemo-tokens","download_url":"https://codeload.github.com/theemo-tokens/figma-theemo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250674293,"owners_count":21469193,"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":["automation","design-ops","figma","figma-plugin","references","styles","transforms"],"created_at":"2024-10-10T23:14:40.432Z","updated_at":"2025-04-24T17:31:16.612Z","avatar_url":"https://github.com/theemo-tokens.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cimg src=\"assets/artwork.png\"\u003e\n\n# Figma Plugin: Theemo\n\nFigma plugin to automate your styles. It's main purpose is to allow you to have an\norigin style mapped to a reference style, which will kept in sync with the\norigin style.\n\nThis plugin will let you do this:\n\n1. Manage style references on a selected node\n2. Auto-update all references as you change origins (keep the plugin open for this)\n3. Export references to make it available for third-party consumers\n4. Import references (in case you duplicated a document)\n5. Switch contexts\n\n## Manual\n\n### 1. Manage References\n\nSelect a node for which you want to manage references, eg. a rectangle. Open the\n\"Theemo\" plugin and a dialog will appear that let you do it. Currently\nthese styles are supported:\n\n- Fill Style\n- Stroke Style\n- Effect Style\n\nFor each of those there is a section in the dialog where you can manage the\norigin style to the reference.\n\n- **Origin** That's the _original_ style.\n- **Reference** That's the style to which the origin is copied over when\n  references are updated.\n\n#### Transforms\n\nFor paint styles (Fill and Stroke) transforms are available. When styles\nare referenced from origin to reference you can put transforms in between.\nAvailabe are HSL + Opacity values. They will be applied during\nreferencing.\n\nUse this to automate your color palette. Make one color swatch for your\nbase value (e.g. \"Brand / 500\"). A darker color would take your base value as\nreference and set lightness to \"-20\" - name it for example \"Brand / 300\".\n\n### 2. Export\n\nYou can export your references to [jsonbin.io](https://jsonbin.io) and by that\nmake it available for third-party consumers, e.g. if you want to update your\ndesign tokens in your code. Here is how:\n\nEnter credentials in settngs:\n\n1. Create an account and copy the API Key\n2. Create a bin and copy the bin URL\n\nOn the tools tab the `Export Settings` button becomes available. Clicking the\nbutton will export your references.\n\n### 3. Import\n\nYou can import your earlier exported references from\n[jsonbin.io](https://jsonbin.io). That is really helpful when you duplicated\nyour document - figma will not copy over your stored references. Here is how to\nimport references:\n\n1. Duplicate a document\n2. Open the old document, open the plugin, go to settings and copy the Bin URL\n3. Go the new new document (the plugin should still be opened), paste the URL\n   into the input for import and click the button next to it.\n4. A notification will appear telling you how much references were imported.\n5. You can work with your new document the same way as the old one now - win!\n\n### 4. Contexts\n\nContexts are a lightweight way to organize various theme modes within one\ndocument. E.g. if you have light and dark mode in one document, you may want to\ngive styles for respective styles a specific suffix, e.g. `.$dark` - With\ndefined contexts, you can swap between them quickly and then use\n[Themer](https://www.figma.com/c/plugin/731176732337510831/Themer) to export\nthem.\n\n#### Workflow Suggestion\n\nUse it in combination with Themer:\n\n1. Set your variants for each context (`§light` and `§dark`)\n2. Select a context\n3. Use `Theemo` to map those \"compiled\" styles\n4. Use `Themer` to export and apply them\n\n### Things to Know\n\n- When setting the origin style the suggestions only show local styles, that is\n  also due to limitations of the current figma API, given security reasons for\n  shared team libraries. That's fair - figma keeps us safe, give them credit for\n  that :)\n\n  It still is possible to use library styles, then you can't use the style\n  references manage dialog, instead manually assign those style and THEN use the\n  theemo dialog in order to persist it.\n\n- Once you have one node \"under management\", you may want to change the local\n  style but once you update references, those new ones will be overridden. Re-select\n  the node again and the references dialog will provide you options for migrating\n  styles, to either keep the old one or use the new one.\n\n- Once you link origin to reference the node itself will show the reference as\n  its local style, which might give you wonders, yet is expected and the correct behavior.\n\n## Development\n\nTo develop this on your own. Install depencencies first:\n\n```bash\nyarn\n```\n\nSecond, start the watch server:\n\n```bash\nyarn start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheemo-tokens%2Ffigma-theemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheemo-tokens%2Ffigma-theemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheemo-tokens%2Ffigma-theemo/lists"}