1// Notion API integration
2
3import { VariableData, MappingConfig } from '../utils/constants';
9export async function syncVariablesFromNotion(
10 databaseId: string,
11 apiKey: string,
12 mappingConfig?: MappingConfig
13): Promise<VariableData[]> {
14 // Validate inputs
15 if (!databaseId) throw new Error('Notion database ID is required');
16 if (!apiKey) throw new Error('Notion API key is required');
17
18 try {
19 // Query the Notion database
20 const data = await queryNotionDatabase(databaseId, apiKey);
21
22 // Use default mapping if not provided
34 * Query a Notion database
35 */
36async function queryNotionDatabase(databaseId: string, apiKey: string) {
37 const response = await fetch(`https://api.notion.com/v1/databases/${databaseId}/query`, {
38 method: 'POST',
39 headers: {
40 'Authorization': `Bearer ${apiKey}`,
41 'Notion-Version': '2022-06-28',
42 'Content-Type': 'application/json'
55 if (!response.ok) {
56 const errorText = await response.text();
57 throw new Error(`Notion API error (${response.status}): ${errorText}`);
58 }
59
63
64/**
65 * Process Notion API results into a more usable format
66 */
67function processNotionResults(results: any[]) {
3export enum StorageKeys {
4 CONFIG = 'variables-sync-config',
5 NOTION_API_KEY = 'notion-api-key',
6 CODA_API_KEY = 'coda-api-key'
7}
8
40
41export interface NotionConfig {
42 apiKey: string;
43 databaseId: string;
44 mappingConfig: MappingConfig;
46
47export interface CodaConfig {
48 apiKey: string;
49 docId: string;
50 tableId: string;
1// This is the main entry point for the Figma plugin
2
3import { syncVariablesFromNotion } from './api/notion';
4import { syncVariablesFromCoda } from './api/coda';
5import { applyVariablesToFigma, getExistingVariables } from './utils/variables';
6import { StorageKeys } from './utils/constants';
31 try {
32 figma.notify('Syncing variables from Notion...');
33 const variables = await syncVariablesFromNotion(msg.databaseId, msg.apiKey);
34 await applyVariablesToFigma(variables, msg.mappingConfig);
35 figma.notify('Variables synced successfully!');
62 try {
63 figma.notify('Syncing variables from Coda...');
64 const variables = await syncVariablesFromCoda(msg.docId, msg.tableId, msg.apiKey);
65 await applyVariablesToFigma(variables, msg.mappingConfig);
66 figma.notify('Variables synced successfully!');
2 "name": "Variables Sync",
3 "id": "variables-sync-plugin",
4 "api": "1.0.0",
5 "main": "code/main.js",
6 "ui": "ui/ui.html",
9 "allowedDomains": [
10 "notion.so",
11 "api.notion.com",
12 "coda.io",
13 "apis.coda.io"
14 ],
15 "reasoning": "This plugin needs to connect to Notion and Coda APIs to fetch variable data"
16 },
17 "permissions": [
20โโโ code/
21โ โโโ main.ts # Plugin main code
22โ โโโ api/
23โ โ โโโ notion.ts # Notion API integration
24โ โ โโโ coda.ts # Coda API integration
25โ โโโ utils/
26โ โโโ variables.ts # Figma variables utilities
45## Development
46
47This plugin uses TypeScript and follows the Figma plugin API guidelines.
48
49## License
1import { useState, useEffect } from "react";
2
3const USER_ENDPOINT = "/api/user";
4
5export function useUser() {
20 SUM(num_images) as total_images
21 FROM ${USAGE_TABLE}
22 WHERE our_api_token = 1
23 GROUP BY user_id, username
24 ORDER BY total_price DESC
1import { useState, useEffect } from "react";
2
3const PROJECT_ENDPOINT = "/api/project";
4const FILES_ENDPOINT = "/api/project-files";
5
6export function useProject(projectId: string, branchId?: string) {
1import { useState, useEffect } from "react";
2
3const ENDPOINT = "/api/projects-loader";
4
5export function useProjects() {
1import { useState, useEffect } from "react";
2
3const ENDPOINT = "/api/create-project";
4
5export function useCreateProject() {
