A library for interacting with Figma APIs with typed responses and data structures for working with Figma programatically.
- 🚀 Full Figma API coverage with typed responses
- 🔒 Support for both API token and OAuth authentication
- 🔄 Support for variables (both local and published)
- 🛠️ Comprehensive component and style handling
- 📱 Export capabilities including PDF format
- 🧩 Support for component sets and variants
Add the package to your pubspec.yaml:
dependencies:
figma: ^7.3.4Or install it using the Dart package manager:
dart pub add figmaTo use the Figma API, you'll need an access token. You can obtain one in two ways:
- Personal Access Token: Generate from your Figma account settings
- OAuth Token: Implement OAuth flow in your application
import 'package:figma/figma.dart';
void main() async {
// Initialize the client with your access token
final figma = FigmaClient('your_access_token');
// Get a Figma file
final file = await figma.getFile('file_key');
// Access file data
print(file.name);
print(file.lastModified);
}// Get file with components
final fileWithComponents = await figma.getFileWithNodes(
'file_key',
['node_id_1', 'node_id_2']
);
// Get file styles
final styles = await figma.getFileStyles('file_key');
// Get component sets
final components = await figma.getFileComponentSets('file_key');// Export images
final images = await figma.getImage(
'file_key',
['node_id'],
format: 'png',
scale: 2
);
// Get image fills
final imageFills = await figma.getImageFills(['image_ref_1', 'image_ref_2']);// Get local variables
final localVars = await figma.getLocalVariables('file_key');
// Get published variables
final publishedVars = await figma.getPublishedVariables('file_key');// Get team components
final teamComponents = await figma.getTeamComponents('team_id');
// Get component info
final componentInfo = await figma.getComponent('component_id');// Post a comment
await figma.postComment(
'file_key',
'This is a comment',
clientMetadata: {'key': 'value'}
);
// Get file comments
final comments = await figma.getComments('file_key');-
Error Handling: The library throws
FigmaExceptionfor API errors. Always implement proper error handling:try { final file = await figma.getFile('file_key'); } on FigmaException catch (e) { print('Figma API error: ${e.message}'); }
-
Resource Management: When working with large files, request only the nodes you need:
// Instead of getting the entire file final specificNodes = await figma.getFileNodes( 'file_key', ['specific_node_id'] );
-
Rate Limiting: Implement appropriate rate limiting in your application to avoid hitting Figma's API limits.
Future<void> exportAllFrames(String fileKey) async {
final figma = FigmaClient('your_token');
final file = await figma.getFile(fileKey);
final frameIds = file.document.children
.whereType<Frame>()
.map((frame) => frame.id)
.toList();
final images = await figma.getImage(
fileKey,
frameIds,
format: 'png'
);
}When using this library in Flutter web projects that interact with JavaScript/TypeScript codebases:
// Dart
final jsonData = await figma.getFile('file_key');
// Convert to JSON string for JS interop
final jsonString = jsonEncode(jsonData);// TypeScript
interface FigmaFile {
// Your TypeScript type definitions
}
const figmaData: FigmaFile = JSON.parse(jsonString);Contributions are welcome! Please read our contributing guidelines and submit pull requests to our GitHub repository.
This project is licensed under the MIT License - see the LICENSE file for details.