figma/figma-api-demo

figma-api-demo's Issues

Is there any repository for figma to react functional component ? [Help Wanted]

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

MasterClock component render issue

Issue

In figmaComponents.js in the main component, the file is changing to MasterFClock instead of MasterClock causing a render issue

Fix

change the name of the frame from FClock to Clock in the Figma file

Undocumented api usage in figma-to-react demo

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?

Trying to use postman to make simple call failing https://api.figma.com/v1/me

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?

figma_age listening on MacOS port after deleting Figma - How to uninstall / remove this

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

Many warnings and errors

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

Is there a way to perform the "Resize To Fit" functionality

I'm looking for a way to programmatically run the same functionality as the resize-to-fit action. Is there an easy way to do this with the Figma API?

how can i get html string?

i wants to get html string instead of creating files locally, i tried to find how to do that, can anyone help?

How does this work?

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

Is figma-to-react production ready?

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.

No license file here

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.

'imageHash' is undefined

@MatthewDailey @0000marcell ,

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

Is there any way to the design of figma from json to figma again?

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?

Could not take images

GET /v1/images/:file_key
Error
{"params":["file_key"],"query":["ids"]} are required.

Can i create a logo for you project?

Hi 👋 Nice project. Can i help your readme create a logo for your solution?

"Cannot read property 'children' ",what is the problem?,

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)

как исправить ошибку ?

Error 400 when using the GET file endpoint for certain files

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?

Replace .env file in figma-to-react with .env.example for security reasons

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.

List of projects and teams that the current user can access

Is it possible to get a list of projects and teams that current user (whose token is being used) has access to?

I am having trouble with text node in Google App script

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);
        }
    }

imageRef is incorrect

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?

method call is not working in figmaComponent

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.

resize() function not taking arguments

Hi, I am trying to resize line node.

const rowLine = figma.createLine();
rowLine.resize(908, 1);

When I add number variables it gives me this error message:

Is there some mistake in function or am I using it wrong?