@refore-ai/copy-to-design-sdk
v2.0.0
Published
Copy the HTML source and import it into the design platform via the plugin.
Readme
@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
pnpm add @refore-ai/copy-to-design-sdkUse
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
await copyToDesign.copyPasteInPlugin({
content: htmlString,
platform: PlatformType.Figma,
width: 1920,
height: 1080,
importMode: ImportMode.Quick,
});How to run example
Run vue example locally:
- copy ./example/.env.sample to ./example/.env
- replace
YOUR_ACCESS_TOKEN,YOUR_APP_IDin ./example/.env - run command:
pnpm i
pnpm example:install # install dependencies
pnpm example:dev # run vue example