Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'figma-js' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
outputDir: './build/',
scale: '1'
}
for(const arg of process.argv.slice(2)) {
const [param, value] = arg.split('=')
if(options[param]) {
options[param] = value
}
}
if(!FIGMA_TOKEN) {
throw Error('Cannot find FIGMA_TOKEN in process!')
}
const client = Figma.Client({
personalAccessToken: FIGMA_TOKEN
});
// Fail if there's no figma file key
let fileId = null
if (!fileId) {
try {
fileId = FIGMA_FILE_URL.match(/file\/([a-z0-9]+)\//i)[1]
} catch (e) {
throw Error('Cannot find FIGMA_FILE_URL key in process!')
}
}
console.log(`Exporting ${FIGMA_FILE_URL} components`)
client.file(fileId)
outputDir: './build/',
scale: '1'
}
for(const arg of process.argv.slice(2)) {
const [param, value] = arg.split('=')
if(options[param]) {
options[param] = value
}
}
if(!FIGMA_TOKEN) {
throw Error('Cannot find FIGMA_TOKEN in process!')
}
const client = Figma.Client({
personalAccessToken: FIGMA_TOKEN
})
// Fail if there's no figma file key
let fileId = null
if (!fileId) {
try {
fileId = FIGMA_FILE_URL.match(/file\/([a-z0-9]+)\//i)[1]
} catch (e) {
throw Error('Cannot find FIGMA_FILE_URL key in process!')
}
}
console.log(`Exporting ${FIGMA_FILE_URL} components`)
client.file(fileId)
const Figma = require("figma-js");
const { get, matching, all, has } = require("shades");
const pickBy = require("lodash/pickBy");
const client = Figma.Client({
personalAccessToken: process.env.FIGMA_TOKEN,
});
const { file, fileImages, comments, postComment, teamProjects, projectFiles } = client;
const getFigma = (fn, id, params) =>
new Promise((resolve, reject) => {
const isParams = params ? { ...params } : null;
// eslint-disable-next-line
console.log("fetching", id);
fn(id, isParams)
.then(({ data }) => resolve(data))
.catch(reject);
});
requestType: RequestType;
id: string;
params?: FileParams | FileImageParams | PostCommentParams;
noCache?: boolean;
};
type FigmaResponse =
| ProcessedFile
| FileImageResponse
| Comment
| CommentsResponse
| TeamProjectsResponse
| ProjectFilesResponse;
// Initialise FigmaJS Client and import all necessary functions
const client = Client({
personalAccessToken: process.env.FIGMA_TOKEN,
});
const { file, fileImages, comments, postComment, teamProjects, projectFiles } = client;
const mapTypeToFunctionWithParams = {
[RequestType.File]: file,
[RequestType.Images]: fileImages,
[RequestType.PostComment]: postComment,
};
const mapTypeToFunction = {
[RequestType.File]: file,
[RequestType.Comments]: comments,
[RequestType.Projects]: teamProjects,
[RequestType.ProjectFiles]: projectFiles,
blurs: getBlursFromArtboard(primitivesPage.layers),
fonts: response.meta.fonts,
assets: null,
version: response.meta.appVersion, // Sketch Application Version
fileType: FILE_TYPES.SKETCH,
response,
};
} catch (err) {
throw new Error(err);
}
} else {
try {
const { token, exportAssets } = flags;
if (!token) throw new Error('Please add a Figma API authorization token');
const client = Figma.Client({ personalAccessToken: token });
const { data } = await client.file(file);
const primitivesPage = data.document.children.find(i => i.name.toLowerCase() === 'primitives');
if (!primitivesPage) {
throw new Error(`
No primitives page found, skipping exporting of tokens.
Please see https://github.com/inthepocket/hubble-sketch-plugin/wiki/Artboard-formatting#primitives-page on how to structure your Figma file.
`);
}
const response = flattenChildren(data.document);
let assets = null;
if (exportAssets) {
assets = await retrieveImageUrls(client, file, response);
function setFigmaToken(token) {
client = Figma.Client({ personalAccessToken: token })
}
fileId,
documentId,
fileExtension,
personalAccessToken,
output,
scale,
} = options || config;
output = output || 'assets';
fileExtension = fileExtension || 'svg';
scale = scale || '1';
personalAccessToken = personalAccessToken || process.env.FIGMA_TOKEN;
if (!personalAccessToken) throw new Error('No token specified!');
if (!fileId) throw new Error('No file id given');
if (!documentId) throw new Error('No document id given');
const client = Figma.Client({
personalAccessToken,
});
let itemDocument = {};
const items = [];
let itemsWithUrls = [];
const getFileInfo = async task => {
const file = await client.file(fileId);
itemDocument = file.data.document.children.find(
doc => doc.id === documentId
);
if (!itemDocument.name) throw new Error('node id not found');
task.title = `Found document ${itemDocument.name}`;
return itemDocument;
};
export async function getProjectData(projectKey: string) {
if (!FIGMA_TOKEN) {
throw new Error('Missing Figma Token');
}
const client = Client({ personalAccessToken: FIGMA_TOKEN });
const { data } = await client.file(projectKey);
return data;
}
export async function getStyle(styleKey: string) {
if (!FIGMA_TOKEN) {
throw new Error('Missing Figma Token');
}
const client = Client({ personalAccessToken: FIGMA_TOKEN });
const { data } = await client.client.get(`styles/${styleKey}`);
return data;
}