Figma Technical Discovery (ongoing)

This Issue intends to house notes and discussions pertaining to technical discovery of the GitLab Figma plugin. It is mostly centered on the initial MVC.

Resources

• Figma plugin API docs: https://www.figma.com/plugin-docs/api/api-overview/

Tech Stack

• vue
• vue-router
• apollo and vue-apollo
• typescript for non-ui code
• @gitlab/ui
• eslint + prettier

FAQ

🍏 How do we adopt Vue?

Mostly as normal. For reference, see https://gitlab.com/mle/gitlab-figma-plugin/-/blob/master/src/ui.js

🍏 How do we adopt Apollo/Vue Apollo for GraphQL?

There is no magic here. Simply following the official docs for adding graphql loaders to Webpack, and adding Apollo/VueApollo to a Vue app should be fine.

• Apollo example: https://gitlab.com/tomquirk/gitlab-figma-plugin/-/tree/master/src/plugin_ui

🍏 How do we adopt gitlab-ui?

Install @gitlab/ui and peer deps bootstrap, @gitlab/svgs, pikaday and moment

Considerations

All these libraries increase bundle size considerably. We need to consider how we can reduce this, with some combination of tree-shaking, purge-css and other optimizations.

🍏 How do we export an entire page?

using figma.currentPage.exportAsync (example: https://gitlab.com/tomquirk/gitlab-figma-plugin/-/blob/master/src/figma.ts#L6)

API ref: https://www.figma.com/plugin-docs/api/properties/nodes-exportasync/

🍊 How do we export selections?

Likely using exportAsync for each node in the selection.

API ref: https://www.figma.com/plugin-docs/api/properties/nodes-exportasync/

Open questions:

• can we produce a single data structure to upload to GitLab?

🍏 How do we store and retrieve a user's GitLab access token?

Use figma.clientStorage

API Ref: https://www.figma.com/plugin-docs/api/figma-clientStorage/

🍏 How do we notify user of plugin events/errors?

Via the interface, but also with Figma's notify method, or closePlugin('my message here') method

API ref: https://www.figma.com/plugin-docs/api/properties/figma-notify/

🍊 How do we publish the plugin?

Plugin submission/publishing is actioned from within the Figma application itself.

There is a manual review process

• Review guidelines: https://help.figma.com/hc/en-us/articles/360039958914-Plugin-Review-Guidelines

@mle notes that there are not subsequent reviews each time we wish to publish - there is only an initial review, and after that, we are free to publish without any blockers.