{"_id":"@cianfrani/figma-testing-library","name":"@cianfrani/figma-testing-library","dist-tags":{"latest":"0.3.0"},"versions":{"0.3.0":{"name":"@cianfrani/figma-testing-library","version":"0.3.0","description":"Web Components for Testing Figma Designs","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/figma-testing-library/figma-testing-library.esm.js","repository":{"type":"git","url":"git+https://github.com/markacianfrani/figma-testing-library.git"},"scripts":{"build":"stencil build --docs","start":"stencil build --dev --watch --serve","test":"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll","generate":"stencil generate"},"dependencies":{"@stencil/core":"^2.13.0"},"devDependencies":{"@types/jest":"^27.0.3","jest":"^27.4.5","jest-cli":"^27.4.5","puppeteer":"^10.0.0"},"license":"MIT","_id":"@cianfrani/figma-testing-library@0.3.0","gitHead":"6e43c68979fda030879f0e920011f86e7f2036fc","bugs":{"url":"https://github.com/markacianfrani/figma-testing-library/issues"},"homepage":"https://github.com/markacianfrani/figma-testing-library#readme","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-XT/paEX+A0qVHdHu/vobMJKjFB+k68vWOh7Z8vxj14mwhN+OeCUiL7q5UGa4yUV2jaX0+KqL9kCi9YEnNPFGPg==","shasum":"8dd8de232f815b3c1d5c6ff8968784d8fea8ac1c","tarball":"https://registry.npmjs.org/@cianfrani/figma-testing-library/-/figma-testing-library-0.3.0.tgz","fileCount":72,"unpackedSize":444949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB6fb+bOpsPBkX3gEqJcy5MgsslJBCPQmOLnP8EOiDwUAiEAodO+KxPOyU8pRzkRtjtIDTBkv0TImFS8mdtfjb2nwJg="}]},"_npmUser":{"name":"mark.cianfrani","email":"markacianf@gmail.com"},"directories":{},"maintainers":[{"name":"mark.cianfrani","email":"markacianf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/figma-testing-library_0.3.0_1722972538541_0.4872952491440006"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-06T19:28:58.419Z","0.3.0":"2024-08-06T19:28:58.671Z","modified":"2024-08-06T19:28:58.978Z"},"maintainers":[{"name":"mark.cianfrani","email":"markacianf@gmail.com"}],"description":"Web Components for Testing Figma Designs","homepage":"https://github.com/markacianfrani/figma-testing-library#readme","repository":{"type":"git","url":"git+https://github.com/markacianfrani/figma-testing-library.git"},"bugs":{"url":"https://github.com/markacianfrani/figma-testing-library/issues"},"license":"MIT","readme":"# Figma Testing Library\n\nFigma Testing Library is a lightweight web component to help developers overlay Figma designs right on top of their code.\n## Installation\n\nBecause it's a web component, you can use this in any framework, no framework, storybook, anything. Just plop this in your index.html\n\n```\n<script type=\"module\" src=\"https://unpkg.com/@rocketmark/figma-testing-library/dist/figma-testing-library/figma-testing-library.esm.js\"></script>\n```\n\n## Usage\n\n### Generate a Figma Personal Access token\n\n1. Login to your Figma account.\n2. Head to the account settings from the top-left menu inside Figma.\n3. Find the personal access tokens section.\n4. Click Create new token.\n5. A token will be generated. This will be your only chance to copy the token, so make sure you keep a copy of this in a secure place.\n\n### Finding the node\n\nThis component calls the Figma API to grab an image of a particular node in your Figma file. You can pull in a whole page, a single component, and even a single layer.\n\nThe easiest way to find a particular node id in your Figma file is by using Figma in the browser and opening up dev tools where you have full access to the Figma plugin api with `figma`.\n\n1. Open up dev tools in fav browser.\n2. Select the node you want to grab.\n3. In the console enter: `figma.currentPage.selection[0].id`\n4. This will return the node id that you will pass to the component.\n\n### Finding the file ID\n\nYour file ID can be found by inspecting the URL:\n\n`https://www.figma.com/file/<MY FILE ID>/my-file`\n\n### Markup\n\nOnce you have your Figma layer details, open up your code and wrap your component or thing you want to test inside a `<ftl-holster>` element. Inside this component's slot, you can arrange your code to match what's in your Figma file.\n\n```\n<ftl-holster\n\taccess-token=\"my figma token\"\n\tfile-id=\"my figma file id\"\n\tnode=\"my component node id\"\n/>\n\t<div style=\"display: flex;\">\n\t\t<my-component with-some-props>\n\t\t\t<my-button style=\"margin-left: 1rem;\"></my-button>\n\t\t</my-component>\n\t</div>\n</ftl-holster>\n```\n\n## Multi Holster Setup (ftl-belt)\n\nIf you want to setup multiple holsters, you can use the `<ftl-belt>` component\nto avoid having to duplicate your fileId and token for every test.\n\n* applies your access token and file id to any child holsters.\n* displays a master control to manipulate all holsters at once.\n* provides optional input fields for access token and file id in the browser so you don't accidentally commit your token.\n\n\n```html\n<ftl-belt\n\taccess-token=\"yourtoken\"\n\tfile-id=\"yourfileid\"\n>\n\t<ftl-holster name=\"Button Variant 1\" node=\"123:456\">\n\t\t<div>\n\t\t\t<!--setup code-->\n\t\t\t<my-component foo=\"bar\"></my-component>\n\t\t</div>\n    </ftl-holster>\n\n\t<ftl-holster name=\"Button Variant 2\" node=\"923:123\">\n\t\t<div>\n\t\t\t<!--setup code-->\n\t\t\t<my-component foo=\"bar\"></my-component>\n\t\t</div>\n    </ftl-holster>\t\n</ftl-belt>\n```\n\n<!-- Auto Generated Below -->\n\n\n## FTL Holster\n\n| Property      | Attribute      | Description                                                                                           | Type     | Default     |\n| ------------- | -------------- | ----------------------------------------------------------------------------------------------------- | -------- | ----------- |\n| `accessToken` | `access-token` | Your Figma Personal Access Token. Find it under account settings from the top-left menu inside Figma. | `string` | `undefined` |\n| `fileId`      | `file-id`      | Your Figma file ID. https://www.figma.com/file/<MY FILE ID>/my-file                                   | `string` | `undefined` |\n| `node`        | `node`         | The node ID of the component you want to preview.                                                     | `string` | `undefined` |\n\n\n\n## FTL Belt\n\n| Property      | Attribute      | Description                                                                                           | Type     | Default     |\n| ------------- | -------------- | ----------------------------------------------------------------------------------------------------- | -------- | ----------- |\n| `accessToken` | `access-token` | Your Figma Personal Access Token. Find it under account settings from the top-left menu inside Figma. | `string` | `undefined` |\n| `fileId`      | `file-id`      | Your Figma file ID. https://www.figma.com/file/MYFILEID/my-file                                       | `string` | `undefined` |\n\n\n----------------------------------------------\n","readmeFilename":"readme.md"}