{"id":16584912,"url":"https://github.com/mikaelvesavuori/figmagic-example","last_synced_at":"2025-10-26T09:13:13.659Z","repository":{"id":40274177,"uuid":"129264556","full_name":"mikaelvesavuori/figmagic-example","owner":"mikaelvesavuori","description":"Using Figmagic (simplifying design token generation and asset extraction) with Webpack 5, React 16, Styled Components.","archived":false,"fork":false,"pushed_at":"2022-12-07T20:31:43.000Z","size":5540,"stargazers_count":58,"open_issues_count":3,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T01:42:06.579Z","etag":null,"topics":["boilerplate","design-specs","design-tokens","example","figma","figma-api","react","styled-components","theo","tokens","ux","webpack4"],"latest_commit_sha":null,"homepage":"https://figmagic.com","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/mikaelvesavuori.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":"SECURITY.md","support":null}},"created_at":"2018-04-12T14:31:51.000Z","updated_at":"2025-02-16T07:58:59.000Z","dependencies_parsed_at":"2023-01-24T22:01:16.134Z","dependency_job_id":null,"html_url":"https://github.com/mikaelvesavuori/figmagic-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikaelvesavuori%2Ffigmagic-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikaelvesavuori%2Ffigmagic-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikaelvesavuori%2Ffigmagic-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikaelvesavuori%2Ffigmagic-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikaelvesavuori","download_url":"https://codeload.github.com/mikaelvesavuori/figmagic-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244799626,"owners_count":20512289,"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":["boilerplate","design-specs","design-tokens","example","figma","figma-api","react","styled-components","theo","tokens","ux","webpack4"],"created_at":"2024-10-11T22:46:11.798Z","updated_at":"2025-10-26T09:13:08.612Z","avatar_url":"https://github.com/mikaelvesavuori.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Figmagic Example\n\nThis repository is a demo of [Figmagic](https://github.com/mikaelvesavuori/figmagic). In this project you're going to see how a project running Webpack, React and Styled Components might use tokens. There are pre-compiled tokens available under `/tokens`.\n\n![Figmagic Example Demo](docs/demo.png)\n\n_Figmagic Example Demo: On the left is a big Figma component assembled of a number of \"Elements\", Figmagic-compliant components that can be output into code. On the right is the React-composed version of those after just a few minutes of coding and closing elements correctly._\n\nNote that this demo is not meant to fully style and do all of the things in the Figma document. I wanted to straddle a middle-of-the-road solution where I did the least work possible to get it working with React and style only a few of the most obvious and helpful elements, like setting disabled state on the button and checkbox.\n\nFreshly pulled assets are under `elements`, `tokens` and `graphics`. The modified elements are contained under `src/elements`.\n\nThe Figmagic template design system is available at [https://www.figma.com/community/file/821094451476848226](https://www.figma.com/community/file/821094451476848226). That's the file providing the tokens seen here.\n\n## Installation\n\n- Run `yarn` or `npm install` inside of the repository to install all dependencies\n- Start the project by running `yarn start` or `npm start`\n- To sync graphics, run `yarn figmagic:graphics` or `npm run figmagic:graphics`\n- To sync elements, run `yarn figmagic:elements` or `npm run figmagic:elements`\n- To sync all of it, run `yarn figmagic:sync` or `npm run figmagic:sync`\n- Start Storybook with `yarn storybook` or `npm run storybook`\n\n## Using Figmagic for your own files\n\n- You will need to have a Figma file set up correctly (see above demo file)\n- You will also need to have a Figma API key\n- Set your URL and token in a file called `.env` in the root of your project (such as in this one, if you want to get started right away)\n- Clone [Figmagic](https://github.com/mikaelvesavuori/figmagic), install it with `yarn setup` or `npm setup`\n- Run the command `figmagic` in your project directory\n- To run local Figmagic with arguments, it could be done like `npm run figmagic -- --debug -f em` to set debug mode and grabbing fonts in `em` units\n\nRead more on the [Figma developer site](https://www.figma.com/developers/docs) if you need any further information.\n\n## How much work was added after doing a clean pull from the Figmagic demo template?\n\nThese changes should outline all of the (mostly minor) amendments done to a set of freshly-pulled elements:\n\n- Remove texts from H1-H6 + Paragraph + Microcopy + Select\n- Close input elements (Slider, Input, Checkbox)\n- Add `className=”Normal”` to Button so it picks the Normal style\n- Add props and event handling for demo form functionality\n- Add disabled styling to Checkbox and Button\n- Write a component (DemoForm) that composes the individual elements as per the component in the template\n- Minor changes due to the nature of Typescript.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikaelvesavuori%2Ffigmagic-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikaelvesavuori%2Ffigmagic-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikaelvesavuori%2Ffigmagic-example/lists"}