figma / plugin-samples Goto Github PK
View Code? Open in Web Editor NEW๐ Sample Figma plugins.
Home Page: https://www.figma.com/plugin-docs
License: MIT License
๐ Sample Figma plugins.
Home Page: https://www.figma.com/plugin-docs
License: MIT License
please add an example of https://www.figma.com/plugin-docs/oauth-with-plugins
Great work creating the text-search sample code for Figma, but I noticed that it's case sensitive, in other words if I search for "Walk" and there is a text with "walk" in it, it wouldn't find it.
So, I updated the code as I know how [I am no expert], so here's the changes if you want to update your code and make it a public plugin
In the ui.html file
And, in the code.ts
Thanks
I have created a collection of variables that has 4 modes (They are labeled Light, Dark, High-Contrast, and Wireframe). I see them when I export them, but the modes are encapsulated in comments and not part of the json.
When I try to import the exported json, it fails because of the comments. I removed the comments but then it just dumped all the variables into one mode column. I didn't even know it was working at first as there is no response when it finishes. So I pressed the button several times to only realize it created multiple collections with the same name.
I thought maybe I needed to manually change the collection name to use the name in the comments, but all this does is create new collections with the "." in the name. It does not add the mode and populate it with the expected values for the mode corresponding to the variables already in the first collection.
I also tried modifying the json with what I thought might be expected with the modes nested in the values for the color variable. That also failed either creating nested variables in the same mode or another variation I tried just failed to import anything. So I am stuck with manually adding the additional modes.
It's been a long time since I wrote some scripts, but I was looking into trying to see if I can figure out how to update the script to get it to properly parse the name into modes.
Hello!
I've recently started developing a plugin for Figma.
I have a user interface that should:
At the moment I have my two html files: ui.html and main.html.
From the ui.html, I have the classic:
window.location.href = 'html/main.html'
rigged to a button.
If I test it in the browser, it all works fine, the page changes normally.
But when I run it in Figma:
Uncaught DOMException: Failed to set the 'href' property on 'Location': 'html/main.html' is not a valid URL. at HTMLButtonElement.document.getElementById.onclick (<anonymous>:1080:30)
This is my webpack config file. I've taken most of it from the webpack sample, and tried to modify it a bit, but I'm no expert, so this might be the issue. I'm just dazzled that if I debug in Chrome, everything works fine.
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
module.exports =
//Client Config
(env, argv) => ({
mode: argv.mode === 'production' ? 'production' : 'development',
// This is necessary because Figma 'eval' works differently than normal eval
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
ui: './src/ts/ui.ts', // The entry point for your UI code
code: './src/ts/code.ts', // The entry point for your plugin code
},
module: {
rules: [
// Converts TypeScript code to JavaScript
{test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/},
// Enables including CSS by doing "import './file.css'" in your TypeScript code
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.html$/,
use: [{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: 'html/',
publicPath: 'html/'
}
}],
exclude: path.resolve(__dirname, 'src/html/ui.html') // Exclude ui.html since it gets loaded from the plugin
},
// Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
{test: /\.(png|jpg|gif|webp|svg|zip)$/, loader: [{loader: 'url-loader'}]},
],
},
// Webpack tries these extensions for you if you omit the extension like "import './file'"
resolve: {extensions: ['.tsx', '.ts', '.jsx', '.js']},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
},
// Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
plugins: [
new webpack.DefinePlugin({
'global': {} // Fix missing symbol error when running in developer VM
}),
new HtmlWebpackPlugin({
template: './src/html/ui.html',
filename: 'ui.html',
inlineSource: '.(js)$',
chunks: ['ui'],
}),
new HtmlWebpackInlineSourcePlugin(),
],
})
multilanguage support
I didn't find any other channel where I can post feature requests, thus posting here.
Benefits include:
Precedents include @types/chrome and @types/vscode (I set it up).
Also I would encourage setting up a GitHub repo for the API. This way people can report bugs or ask API questions in the open.
Error: in setValueForMode: Expected "newValue" to be one of the following, but none matched:
Expected "newValue" to have type boolean but got object instead
Expected "newValue" to have type number but got object instead
Expected "newValue" to have type string but got object instead
Expected "newValue" to be one of the following, but none matched:
Expected "newValue.r" to have type number but got undefined instead
Expected "newValue.r" to have type number but got undefined instead
Expected "newValue" to be one of the following, but none matched:
Expected "newValue.type" to have type "VARIABLE_ALIAS" but got string instead
at <anonymous> (PLUGIN_15_SOURCE:46)
at forEach (native)
at <anonymous> (PLUGIN_15_SOURCE:47)
at forEach (native)
at createTokens (PLUGIN_15_SOURCE:61)
at <anonymous> (PLUGIN_15_SOURCE:6)
at call (native)
at <eval> (PLUGIN_15_SOURCE:105)
(anonymous) @ figma_app.min.js.br:5
Document is undefined in code.ts. I can't createElement('a') for download some styles data I get from figma API.
How to access "document" in code.ts?
So user can download the json generate by the plugin?
function downloadObjectAsJson(exportObj, exportName){
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
var downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", exportName + ".json");
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
}
Hello team, I've noticed that the first link in the README leads to a 404 page.
This one-> Sample plugins using the Figma + FigJam Plugin API.
Attached is a screenshot for reference:
If you need any more information, please let me know.
Thank you!
I'm not seeing a good solid way to download a remote image and inject it.
Obviously it's being done in Unsplash and Google Sheet Sync...
It's looking as if they're being remotely processed via an undocumented API but I cannot find out how to do it?
The images are being ran through this... somehow?
https://www.figma.com/api/upnode/image?purpose=canvas&sha1=32ef6ede498d9bcc86f628f80a609137ef8bb68c&fileKey=34jAAw6DZI3xEM0K75ZnFm
Any tips?
Love that it's updated to Webpack 5, but it's pretty unusable out of the box.
It doesn't work with Node 17. I had to change build to -
"build": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode=production webpack"
Also, when you get it to build, you get hit with polyfill/utils errors.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
@ ./node_modules/webpack/lib/index.js 103:30-50 106:9-29
Hi, I am facing an issue while using this package for Figma plugin and the following is the error I am facing
node_modules/@figma/plugin-typings/index.d.ts:11:9 11 const console: Console ~~~~~~~ 'console' was also declared here.
Versions are
Node: 17
NPM: 8
Typescript: 4.4
open for suggestion
I am curious to know the maximum width and height of a Figma plugin window. I require this information to design the plugin keeping the measure.
Hi,
How can I debug the code.ts file using the react sample?
I see all other files available in the source panel webpack://./src, but not the code.ts, so there's no way I can set breakpoints there.
Help please :D
Thanks!
When I run the Codegen sample plugin it just gets stuck in a loading loop and doesn't produce any results or errors. @jake-figma @akbarbmirza
Use case
Hey!
At the moment, figma typings are hard-coded to figma.d.ts
in the React sample
Similar to #3 , I was wondering if instead of using a figma.d.ts
file in the React sample, we could add @figma/plugin-typings
to the dev dependencies, so that users are able to update their figma typings if they change after they pull the sample.
Thanks!
I tried the variables-import-export plugin. It worked to export variables ok. When I tried to import JSON following the design tokens specification it would only import colors and not dimensions.
I validated my tokens with this design tokens validator so they should be ok.
I'm running into this problem after cloning and running the build script on Vue Sample project
$ npm run build
> linktree@ build /Users/cassiano/Downloads/plugin-samples-master/vue
> webpack --mode=production
Hash: a8e004ca502fac76cfcc
Version: webpack 4.41.0
Time: 1396ms
Built at: 07/20/2020 2:15:48 PM
Asset Size Chunks Chunk Names
main.js 1.24 KiB 0 [emitted] main
ui.html 99.6 KiB [emitted]
ui.js 99.5 KiB 1 [emitted] ui
Entrypoint ui = ui.js
Entrypoint main = main.js
[0] ./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css& 552 bytes {1} [built]
[2] ./src/logo.svg 293 bytes {1} [built]
[3] ./src/App.vue?vue&type=style&index=0&lang=css& 544 bytes {1} [built]
[4] ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css& 1010 bytes {1} [built]
[7] (webpack)/buildin/global.js 472 bytes {1} [built]
[8] ./src/code.ts 1.39 KiB {0} [built]
[9] ./src/ui.js + 6 modules 6 KiB {1} [built]
| ./src/ui.js 158 bytes [built]
| ./src/App.vue 1.12 KiB [built]
| ./src/App.vue?vue&type=template&id=7ba5bd90& 195 bytes [built]
| ./src/App.vue?vue&type=script&lang=js& 248 bytes [built]
| ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90& 1.2 KiB [built]
| ./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js& 476 bytes [built]
| + 1 hidden module
+ 3 hidden modules
Child html-webpack-plugin for "ui.html":
1 asset
Entrypoint undefined = ui.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/ui.html 216 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module
node v13.9.0
npm 6.13.7
MacOS Catalina 10.15.4 (19E287)
MacBook Pro (16-inch, 2019),
2.6 GHz 6-Core Intel Core i7
16 GB 2667 MHz DDR4
I do export of variables and there and then I try import. On the first variable with transparency I get an error
I am developing a plugin for myself, I want to find all TextNodes and ignore nodes that are hidden. Do I use figma.skipInvisibleInstanceChildren = true;
but the result, I get in the function fillAll() still contains the hidden node (its parent is hidden)
My code:
figma.skipInvisibleInstanceChildren = true; figma.showUI(__html__);
function getAllText(){ let listNodeSelected = figma.currentPage.selection let listTextNode = [] for (const node of listNodeSelected){ let textNodes = node.findAll((node) => node.type === "TEXT"); listTextNode = listTextNode.concat(textNodes) } }
How to implement skipInvisibleInstanceChildren?
I think this is a great and useful project for people who make figma plugins!
However, it appears that PRs and issues are no longer being addressed since October 2020. Is it possible that this project is over? Are there any plans to choose a different maintainer or another third party to manage this?
The following snippet logs a warning unhandled promise rejection: Throw: The font "My Font Regular" could not be loaded
figma.listAvailableFontsAsync().then(fonts => {
for (const font of fonts) {
if (font.fontName.family === 'My Font' && font.fontName.style === 'Regular') {
figma.loadFontAsync(font.fontName).then(() => {
console.log('loaded fine');
});
}
}
});
I purposefully chose not to have an error handler, since this code shouldn't actually fail.
I'm developing a variable font and I seem unable to load it via a plugin. Is this just a consequence of figma/community#2 ?
html-webpack-inline-source-plugin
is no longer maintained and doesn't work with html-webpack-plugin@^4.0
.
More detailed information can be found here
Currently, the version is 3.5, latest LTS is 3.9.7. Could we grab an update?
Just letting you know about this. Also the website link here: https://www.figma.com/plugin-docs/bundling-webpack/ needs to be updated to the new name of the folder. If you're not able to repro the issue then let me know and I can try to help from my side.
I'd like to use the figma.d.ts types file and some of the example code, but there is no license included.
It looks like the React example uses the ISC license.
Would it be possible to add the license file to the repo?
Thank you!
After downloading according to the process and running tsc, the error reported in figma is: Invalid manifest field 'networkAccess', and the URLs in the configuration items are all 404. what should i do next?
Google analytics / firebase analytics in figma plugin?
Using the plugin sample on the official Figma's "Variable playground" results in :
/* [ Text ] - Example.English.tokens.json */
{}
/* [ Text ] - Example.German.tokens.json */
{}
/* [ Text ] - Example.Japanese.tokens.json */
{}
Any ideas?
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.