This project contains demo apps using the Figma API. They are meant to demonstrate how to get started with the various aspects of the API.
See the developer documentation at http://www.figma.com/developers/docs
License: MIT License
This project contains demo apps using the Figma API. They are meant to demonstrate how to get started with the various aspects of the API.
See the developer documentation at http://www.figma.com/developers/docs
I've been converting the figma-to-react demo to typescript before making more substantial changes, and I've found some inconsistencies in the api usage here vs the documentation.
The code references an imageHash
property on a Paint
instance with type == 'IMAGE', but I don't see any reference to that property in the docs here: https://www.figma.com/developers/docs#fileformat
Sorry if this is the wrong place to report this. Is there a more suitable place to discuss the design of the figma-to-react demo?
When I try to make a figma call for the
get https://api.figma.com/v1/me
as described in the following documentation I get a 400 bad request.
I am aware that I need a header item for the X-Figma-Token object. I am using Postman to make this call, and it fails every time.
For reference I created my access token and the call does work successfully when I make a call using a curl inside studio code. Note this code is made from postman. so I am pretty sure the actual curl command works.
curl --location 'https://api.figma.com/v1/me' --header 'X-Figma-Token: <myAccessTokenHere>'
Anybody been able to get this api to work when making the following call https://api.figma.com/v1/me
from postman?
Hi, we can now convert a json file to a json data, now my question is, can we convert a json data to figma design?
Hi!
I'm interested in adapting the figma-to-react code to cover some more use cases / support typescript as a compile target / etc. Just wondering if you could add a license to this repo so the community can give proper attribution in the case of any borrowed code. I interpret this repo to be for exactly that purpose, so I'd expect any license to be relatively open. Just want to make sure there's no risk in basing work off the code here.
Hi 👋 Nice project. Can i help your readme create a logo for your solution?
Hi
I have had Figma installed on MacOs and removed it again - now I have a figma_age(lsof -i ) command running listening on port 44950 and 44960.
Thanks
i can see the demo app working on my local but how does it get the time and stuff from the design i cant see any variables being created anywhere you just have a piece of text called $time
hello,
I am looking for a similar repo to create a React function component
Is there any repository for figma to react functional component ? @mblair @coreyward
Thanks,
Prem
I have created the new component and I am using it in figmaComponent. My requirement is that I have managed the tab view and to display the tab view I have to manage the state for it. And I am doing setState on the tab click. So on tab click function is not called and so on my state is not getting set state.
Please help me out.
Is it possible to get a list of projects and teams that current user (whose token is being used) has access to?
GET /v1/images/:file_key
Error
{"params":["file_key"],"query":["ids"]} are required.
lib/figma.js
} else if (lastFill.type === 'IMAGE') {
styles.backgroundImage = imageURL(lastFill.imageHash);
I believe Figma have updated their API, now 'imageHash' is undefined, instead of it I've found out that it's new name is 'imageRef'.
this code does not work
function imageURL(hash) {
const squash = hash.split('-').join('');
return `url(https://s3-us-west-2.amazonaws.com/figma-alpha/img/${squash.substring(0, 4)}/${squash.substring(4, 8)}/${squash.substring(8)})`;
}
because
A reference to an image embedded in the file. To download the image using this reference, use the GET file images endpoint to retrieve the mapping from image references to image URLs
Do you have endpoint for getting single file?
i wants to get html string instead of creating files locally, i tried to find how to do that, can anyone help?
In figmaComponents.js
in the main component, the file is changing to MasterFClock
instead of MasterClock
causing a render issue
change the name of the frame from FClock to Clock in the Figma file
The tool is contained within figma-api-demo repo and the repo is not active since https://blog.figma.com/introducing-figma-to-react-d2d545cba3cc was published back in May.
I also checked https://www.figma.com/customers Success Stories and I was not able a word about "React" there.
I am trying to route the text node to create text in Google App script. I basically have the code running through a loop to create the text at any instances that are created in Figma. I'm not sure why the API is not running. here is my code.
function myFunction() {
var accessToken = "###-###-###"; // Please set your access token.
var fileKey = "###-###-###"; // Please set the file key.
var baseUrl = "https://api.figma.com/v1";
var params = {
method: "get",
headers: {"X-Figma-Token": accessToken},
muteHttpExceptions: true,
};
var fileInfo = JSON.parse(UrlFetchApp.fetch(baseUrl + "/files/" + fileKey, params))
var children = JSON.parse(UrlFetchApp.fetch(baseUrl + "/textnode/" + fileKey + "?format=jpg&scale=3&ids=" + fileInfo.document.children.map(function(c) {return c.id}).join(","), params))
if (!children.err) {
var s = SlidesApp.create("sampleSlide");
var shape = s.insertShape(SlidesApp.ShapeType.TEXT_BOX, 100, 200, 300, 60);
var textRange = shape.getText();
var selectionType = selection.getSelectionType();
var keys = Object.keys(children.text);
textRange.forEach(function(c, i) {
textRange.setText(children.text[c]);
textRange.insertText(chlidren.length);
if (i != textRange.length - 1)s.insertSlide(i+1)
});
} else {
throw new Error(children);
}
}
The .env
file should not be tracked in the git repo under the figma-to-react
folder. When the user adds their own key values the changes will be committed to the history. Instead you can include a .env.example
file as a template or remove the file and outline how to create it in the readme file.
Certain files in my Figma Projects seem to not be able to be fetched using the GET File endpoint as specified here.
The error returned is as follows:
Error: Request failed with status code 400
at createError (/workspaces/figmaDesignTracker/node_modules/axios/lib/core/createError.js:16:15)
at settle (/workspaces/figmaDesignTracker/node_modules/axios/lib/core/settle.js:17:12)
at IncomingMessage.handleStreamEnd (/workspaces/figmaDesignTracker/node_modules/axios/lib/adapters/http.js:269:11)
at IncomingMessage.emit (node:events:525:35)
at IncomingMessage.emit (node:domain:489:12)
at endReadableNT (node:internal/streams/readable:1359:12)
at processTicksAndRejections (node:internal/process/task_queues:82:21) {
config: {
url: 'https://api.figma.com/v1/files/GnPfKQyM2sfqWOJJGBMwks?',
headers: {
Accept: 'application/json, text/plain, */*',
'X-Figma-Token': ------redacted------,
'User-Agent': 'axios/0.21.4'
},
transformRequest: [ [Function: transformRequest] ],
transformResponse: [ [Function: transformResponse] ],
timeout: 0,
adapter: [Function: httpAdapter],
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
validateStatus: [Function: validateStatus],
transitional: {
silentJSONParsing: true,
forcedJSONParsing: true,
clarifyTimeoutError: false
},
method: 'get',
data: undefined
},
request: <ref *1> ClientRequest {
_events: [Object: null prototype] {
abort: [Function (anonymous)],
aborted: [Function (anonymous)],
connect: [Function (anonymous)],
error: [Function (anonymous)],
socket: [Function (anonymous)],
timeout: [Function (anonymous)],
finish: [Function: requestOnFinish]
},
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: false,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
strictContentLength: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
_closed: false,
socket: TLSSocket {
_tlsOptions: [Object],
_secureEstablished: true,
_securePending: false,
_newSessionPending: false,
_controlReleased: true,
secureConnecting: false,
_SNICallback: null,
servername: 'api.figma.com',
alpnProtocol: false,
authorized: true,
authorizationError: null,
encrypted: true,
_events: [Object: null prototype],
_eventsCount: 10,
connecting: false,
_hadError: false,
_parent: null,
_host: 'api.figma.com',
_closeAfterHandlingError: false,
_readableState: [ReadableState],
_maxListeners: undefined,
_writableState: [WritableState],
allowHalfOpen: false,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: undefined,
_server: null,
ssl: [TLSWrap],
_requestCert: true,
_rejectUnauthorized: true,
parser: null,
_httpMessage: [Circular *1],
[Symbol(res)]: [TLSWrap],
[Symbol(verified)]: true,
[Symbol(pendingSession)]: null,
[Symbol(async_id_symbol)]: 5,
[Symbol(kHandle)]: [TLSWrap],
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: null,
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kSetNoDelay)]: false,
[Symbol(kSetKeepAlive)]: false,
[Symbol(kSetKeepAliveInitialDelay)]: 0,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(connect-options)]: [Object]
},
_header: 'GET /v1/files/GnPfKQyM2sfqWOJJGBMwks? HTTP/1.1\r\n' +
'Accept: application/json, text/plain, */*\r\n' +
'X-Figma-Token: ------redacted------\r\n' +
'User-Agent: axios/0.21.4\r\n' +
'Host: api.figma.com\r\n' +
'Connection: close\r\n' +
'\r\n',
_keepAliveTimeout: 0,
_onPendingData: [Function: nop],
agent: Agent {
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
defaultPort: 443,
protocol: 'https:',
options: [Object: null prototype],
requests: [Object: null prototype] {},
sockets: [Object: null prototype],
freeSockets: [Object: null prototype] {},
keepAliveMsecs: 1000,
keepAlive: false,
maxSockets: Infinity,
maxFreeSockets: 256,
scheduling: 'lifo',
maxTotalSockets: Infinity,
totalSocketCount: 1,
maxCachedSessions: 100,
_sessionCache: [Object],
[Symbol(kCapture)]: false
},
socketPath: undefined,
method: 'GET',
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
joinDuplicateHeaders: undefined,
path: '/v1/files/GnPfKQyM2sfqWOJJGBMwks?',
_ended: true,
res: IncomingMessage {
_readableState: [ReadableState],
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
socket: [TLSSocket],
httpVersionMajor: 1,
httpVersionMinor: 1,
httpVersion: '1.1',
complete: true,
rawHeaders: [Array],
rawTrailers: [],
joinDuplicateHeaders: undefined,
aborted: false,
upgrade: false,
url: '',
method: null,
statusCode: 400,
statusMessage: 'Bad Request',
client: [TLSSocket],
_consuming: false,
_dumped: false,
req: [Circular *1],
responseUrl: 'https://api.figma.com/v1/files/GnPfKQyM2sfqWOJJGBMwks?',
redirects: [],
[Symbol(kCapture)]: false,
[Symbol(kHeaders)]: [Object],
[Symbol(kHeadersCount)]: 28,
[Symbol(kTrailers)]: null,
[Symbol(kTrailersCount)]: 0
},
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'api.figma.com',
protocol: 'https:',
_redirectable: Writable {
_writableState: [WritableState],
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
_options: [Object],
_ended: true,
_ending: true,
_redirectCount: 0,
_redirects: [],
_requestBodyLength: 0,
_requestBodyBuffers: [],
_onNativeResponse: [Function (anonymous)],
_currentRequest: [Circular *1],
_currentUrl: 'https://api.figma.com/v1/files/GnPfKQyM2sfqWOJJGBMwks?',
[Symbol(kCapture)]: false
},
[Symbol(kCapture)]: false,
[Symbol(kBytesWritten)]: 0,
[Symbol(kEndCalled)]: true,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype] {
accept: [Array],
'x-figma-token': [Array],
'user-agent': [Array],
host: [Array]
},
[Symbol(errored)]: null,
[Symbol(kUniqueHeaders)]: null
},
response: {
status: 400,
statusText: 'Bad Request',
headers: {
'content-type': 'application/json; charset=utf-8',
'content-length': '77',
connection: 'close',
date: 'Mon, 22 May 2023 12:30:58 GMT',
'access-control-allow-origin': '*',
'access-control-allow-headers': 'Content-Type, X-Figma-Token, Authorization',
'cache-control': 'no-cache, no-store',
vary: 'X-Figma-Token,Authorization',
'x-cache': 'Error from cloudfront',
via: '1.1 3f56d86af987a5808c3846bdd32ffcf2.cloudfront.net (CloudFront)',
'x-amz-cf-pop': 'LHR50-P8',
'alt-svc': 'h3=":443"; ma=86400',
'x-amz-cf-id': 'svdJNWBYOhpUwR278yM6xhJ-s8bYljvA0KxKjZufk77JfDzNeNG5gQ==',
'strict-transport-security': 'max-age=31536000; includeSubDomains; preload'
},
config: {
url: 'https://api.figma.com/v1/files/GnPfKQyM2sfqWOJJGBMwks?',
headers: [Object],
transformRequest: [Array],
transformResponse: [Array],
timeout: 0,
adapter: [Function: httpAdapter],
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
validateStatus: [Function: validateStatus],
transitional: [Object],
method: 'get',
data: undefined
},
request: <ref *1> ClientRequest {
_events: [Object: null prototype],
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: false,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
strictContentLength: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
_closed: false,
socket: [TLSSocket],
_header: 'GET /v1/files/GnPfKQyM2sfqWOJJGBMwks? HTTP/1.1\r\n' +
'Accept: application/json, text/plain, */*\r\n' +
'X-Figma-Token: ------redacted------\r\n' +
'User-Agent: axios/0.21.4\r\n' +
'Host: api.figma.com\r\n' +
'Connection: close\r\n' +
'\r\n',
_keepAliveTimeout: 0,
_onPendingData: [Function: nop],
agent: [Agent],
socketPath: undefined,
method: 'GET',
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
joinDuplicateHeaders: undefined,
path: '/v1/files/GnPfKQyM2sfqWOJJGBMwks?',
_ended: true,
res: [IncomingMessage],
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'api.figma.com',
protocol: 'https:',
_redirectable: [Writable],
[Symbol(kCapture)]: false,
[Symbol(kBytesWritten)]: 0,
[Symbol(kEndCalled)]: true,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype],
[Symbol(errored)]: null,
[Symbol(kUniqueHeaders)]: null
},
data: {
status: 400,
err: 'Render timeout, try requesting fewer or smaller images'
}
},
isAxiosError: true,
toJSON: [Function: toJSON]
}
The interesting thing here is the err message: "Render timeout, try requesting fewer or smaller images". I was under the impression that images were ignored when using this endpoint as it is only returning a JSON tree of nodes.
As far as I am aware, it is not possible to fetch files that are failing due to this error. Is there a way to make this endpoint handle larger files?
Hi, guys.
I have never used node.js, but I was very interested in the transform function. I did everything according to the instructions. opened the project through a "JetBrains WebStorm".
C:\nodejs\figma-api-demo-master\figma-to-react>node main.js NenS4ISbne6VYlkmnyX3MdYP
↓
TypeError: Cannot read property 'children' of undefined at main (C:\nodejs\figma-api-demo-master\figma-to-react\main.js:94:22) at processTicksAndRejections (internal/process/next_tick.js:81:5)
как исправить ошибку ?
Tried to test the React demo, but following the readme, running npm install
, shows a ton of messages:
npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: Way too old
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated [email protected]: Please migrate to Workbox: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw
npm WARN deprecated [email protected]: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: Please migrate to Workbox: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
> node-gyp rebuild
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!
gyp ERR! node -v v12.6.0
gyp ERR! node-gyp -v v5.0.3
gyp ERR! not ok
node-pre-gyp ERR! build error
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/chokidar/node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.