Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jongold/figma-js
Little wrapper (+ types) for the Figma API
https://github.com/jongold/figma-js
Last synced: about 24 hours ago
JSON representation
Little wrapper (+ types) for the Figma API
- Host: GitHub
- URL: https://github.com/jongold/figma-js
- Owner: jemgold
- License: mit
- Created: 2018-03-23T16:21:30.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T21:31:15.000Z (10 months ago)
- Last Synced: 2024-05-23T07:42:02.081Z (8 months ago)
- Language: TypeScript
- Homepage: https://jongold.github.io/figma-js/
- Size: 810 KB
- Stars: 484
- Watchers: 10
- Forks: 45
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - figma-js
- awesome-figma - Figma.js - A simple JS wrapper for the Figma API. (Rest API integrations)
README
# Figma.js
A simple wrapper for the Figma API.
Cool projects using this:
- [figma-graphql](https://github.com/braposo/figma-graphql)
- [figmint](https://github.com/tiltshift/figmint)
## Usage
[Full documentation](https://jemgold.github.io/figma-js) is available on the web and most everything is typed with TypeScript.
### Creating a client
Quickest start is to grab a personal access token from your Figma account settings page
```typescript
import * as Figma from 'figma-js';
const token = '12345';
const client = Figma.Client({
personalAccessToken: token
});
```
Or if you're building an app with OAuth authentication, after you get back the OAuth access token…
```typescript
import * as Figma from 'figma-js';
const token = '12345';
const client = Figma.Client({
accessToken: token
});
```
### Doing cool things
Once you have instantiated a client, have fun!
```typescript
client.file('file-id').then(({ data }) => {
console.log(data);
});
```
### Just reusing types
All of the types in the Figma file format / API are exported.
```typescript
import * as Figma from 'figma-js';
const textNode: Figma.Text = {
// … this should autocomplete if your editor is set up for it!
};
```
## Contributing
We used the [`typescript-starter`](https://github.com/bitjson/typescript-starter) repo for this - refer to its README for more detailed instructions.
Helpful development commands:
```sh
yarn watch
yarn docs
yarn docs:publish
```
### Contributions welcomed
* [ ] [generate types automatically](https://github.com/jemgold/figma-js/issues/1)
* [ ] [add tests](https://github.com/jemgold/figma-js/issues/2)
### Committing
```sh
yarn global add commitizen
# instead of git commit
git cz
```
## Contributors
* [@jemgold](https://github.com/jemgold/) (Airbnb)
* [@chrisdrackett](https://github.com/chrisdrackett/)