Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/RocketCommunicationsInc/figma-testing-library

Last synced: 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/RocketCommunicationsInc/figma-testing-library
Owner: RocketCommunicationsInc
License: mit
Created: 2022-06-17T21:01:27.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-09-27T22:34:55.000Z (about 2 years ago)
Last Synced: 2024-04-09T05:36:53.545Z (6 months ago)
Language: TypeScript
Size: 215 KB
Stars: 14
Watchers: 3
Forks: 1
Open Issues: 1
Metadata Files:
- Readme: readme.md
- License: LICENSE

Awesome Lists containing this project

README

# Figma Testing Library

Figma Testing Library is a lightweight web component to help developers overlay Figma designs right on top of their code.
## Installation

Because it's a web component, you can use this in any framework, no framework, storybook, anything. Just plop this in your index.html

```

## Usage

### Generate a Figma Personal Access token

1. Login to your Figma account.
2. Head to the account settings from the top-left menu inside Figma.
3. Find the personal access tokens section.
4. Click Create new token.
5. 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.

### Finding the node

This 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.

The 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`.

1. Open up dev tools in fav browser.
2. Select the node you want to grab.
3. In the console enter: `figma.currentPage.selection[0].id`
4. This will return the node id that you will pass to the component.

### Finding the file ID

Your file ID can be found by inspecting the URL:

`https://www.figma.com/file//my-file`

### Markup

Once you have your Figma layer details, open up your code and wrap your component or thing you want to test inside a `` element. Inside this component's slot, you can arrange your code to match what's in your Figma file.

```

## Multi Holster Setup (ftl-belt)

If you want to setup multiple holsters, you can use the `` component
to avoid having to duplicate your fileId and token for every test.

* applies your access token and file id to any child holsters.
* displays a master control to manipulate all holsters at once.
* provides optional input fields for access token and file id in the browser so you don't accidentally commit your token.

```html

```

## FTL Holster

| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ----------------------------------------------------------------------------------------------------- | -------- | ----------- |
| `accessToken` | `access-token` | Your Figma Personal Access Token. Find it under account settings from the top-left menu inside Figma. | `string` | `undefined` |
| `fileId` | `file-id` | Your Figma file ID. https://www.figma.com/file//my-file | `string` | `undefined` |
| `node` | `node` | The node ID of the component you want to preview. | `string` | `undefined` |

## FTL Belt

----------------------------------------------