@refore-ai/copy-to-design-sdk
Version:
Copy the HTML source and import it into the design platform via the plugin.
94 lines (72 loc) • 2.66 kB
Markdown
# @refore-ai/copy-to-design-sdk
By integrating this Refore Copy to Design SDK, your AI design tool can enable users to import HTML pages into Figma with a simple copy and paste.
## Install
```bash
pnpm add @refore-ai/copy-to-design-sdk
```
## Use
```typescript
import { CopyToDesign, PlatformType, ImportMode } from '@refore-ai/copy-to-design-sdk';
const copyToDesign = new CopyToDesign({
region: Region.China, // or Region.World
getAuthorizationPayload: async () => {
return {
accessToken: '<YOUR_ACCESS_TOKEN>',
appId: '<YOUR_APP_ID>',
};
},
});
const firstPageHTML = `<!DOCTYPE html>
<html lang="en">
<body>
Here is my content for first page
</body>
</html>
`;
const secondePageHTML = `<!DOCTYPE html>
<html lang="en">
<body>
Here is my content for second page
</body>
</html>
`;
await copyToDesign.copyPasteInPlugin({
content: [firstPageHTML, secondePageHTML],
platform: PlatformType.Figma,
});
alert(
'Copy successful. To paste these pages into Figma as editable designs, open the "Copy to Figma" plugin ( https://www.figma.com/community/plugin/1530991148057606658 ) and press Ctrl+V.',
);
```
## API Reference
### copyPasteInPlugin(options)
Copies HTML content to clipboard in a format that can be pasted into design tools.
#### Options
| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `content` | `string \| string[]` | Yes | - | HTML content to be converted, copied and pasted. Can be a single HTML string or an array of HTML strings for multiple pages. |
| `platform` | `PlatformType` | Yes | - | Target design platform. One of: `PlatformType.Figma`, `PlatformType.MasterGo`, `PlatformType.JSDesign`, `PlatformType.PixsoChina` |
| `width` | `number` | No | - | Width of the page viewport in pixels. |
| `height` | `number` | No | - | Height of the page viewport in pixels. |
| `importMode` | `ImportMode` | No | `ImportMode.Interactive` | Import mode. One of: `ImportMode.Interactive` (user can adjust import settings), `ImportMode.Quick` (direct import) |
| `topLayerName.referrer` | `false \| string` | No | `location.origin` | Imported page's top layer name's referrer part |
#### Example
```typescript
await copyToDesign.copyPasteInPlugin({
content: htmlString,
platform: PlatformType.Figma,
width: 1920,
height: 1080,
importMode: ImportMode.Quick,
});
```
## How to run example
Run vue example locally:
1. copy ./example/.env.sample to ./example/.env
2. replace `YOUR_ACCESS_TOKEN`, `YOUR_APP_ID` in ./example/.env
3. run command:
```bash
pnpm i
pnpm example:install # install dependencies
pnpm example:dev # run vue example
```