When fetching text node properties using the Figma REST API, there are a few common errors you may encounter and how to handle them:
1. Unloaded Fonts
If you try to access text properties like `fontSize`, `fontName`, `textCase`, etc. before the required font is loaded, you will get an error like:
Cannot write to node with unloaded font "[font]"
To handle this, you need to check if the font is loaded before attempting to access the text properties. You can do this by checking the `hasMissingFont` property of the text node:
javascript
const response = await axios.get(`https://api.figma.com/v1/files/FILE_KEY/nodes?ids=NODE_ID`, config);
const textNode = response.data.nodes[NODE_ID];
if (textNode.hasMissingFont) {
// Load the required font first
await figma.loadFontAsync(textNode.fontName);
}
// Now you can safely access the text properties
console.log(textNode.fontSize);
console.log(textNode.fontName);
2. Read-only Nodes
If you try to update text properties on a node that is read-only, you will get an error like:
Cannot write to internal and read-only nodes
This can happen if the node is an instance or if your plugin is running in "Dev Mode". To handle this, you need to check the node type and only attempt to update properties on editable nodes:
javascript
const response = await axios.get(`https://api.figma.com/v1/files/FILE_KEY/nodes?ids=NODE_ID`, config);
const textNode = response.data.nodes[NODE_ID];
if (textNode.type === 'TEXT' && !textNode.readonly) {
// Update the text properties
await axios.patch(`https://api.figma.com/v1/files/FILE_KEY/nodes/${NODE_ID}`, {
properties: {
fontSize: 18,
fontName: { family: 'Roboto', style: 'Bold' }
}
}, config);
} else {
console.error('Cannot update read-only or non-text node');
}
3. Dynamic Page Loading
If your plugin has the `"documentAccess": "dynamic-page"` manifest field, you need to handle errors related to accessing nodes on pages that haven't been loaded yet:
Cannot access children on a page that has not been explicitly loaded. Remember to call await page.loadAsync() or await figma.loadAllPagesAsync() first.
In this case, you need to ensure the page containing the text node is loaded before attempting to access it:
javascript
const page = await figma.getPageAsync(PAGE_ID);
await page.loadAsync();
const response = await axios.get(`https://api.figma.com/v1/files/FILE_KEY/nodes?ids=NODE_ID`, config);
const textNode = response.data.nodes[NODE_ID];
// Now you can safely access the text properties
console.log(textNode.fontSize);
console.log(textNode.fontName);
By handling these common errors, you can ensure your Figma REST API integration is robust and can gracefully handle various edge cases when fetching text node properties.
Citations:[1] https://www.figma.com/plugin-docs/working-with-text/
[2] https://www.figma.com/plugin-docs/api/api-errors/
[3] https://stackoverflow.com/questions/76826875/nodes-from-figma-rest-api-dont-have-visible-property
[4] https://www.figma.com/plugin-docs/api/TextNode/
[5] https://forum.figma.com/t/get-text-from-component-using-rest-api/53208