https://github.com/fefeding/figma2html
https://github.com/fefeding/figma2html
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fefeding/figma2html
- Owner: fefeding
- License: mit
- Created: 2024-03-28T09:33:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-13T03:33:26.000Z (almost 2 years ago)
- Last Synced: 2024-05-13T04:31:16.845Z (almost 2 years ago)
- Language: JavaScript
- Size: 3.31 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @cicctencent/figma2html
工具类
```bash
npm i @cicctencent/figma2html
```
`需要手动拼上文件id和token: https://fefeding.github.io/figma2html/example/index.html?fileid=&token=`
[example](https://fefeding.github.io/figma2html/example/index.html)
# 使用
### 引用
```typescript
import {
convert,
nodeToDom,
loadFigmaFile,
getFigmaImage,
getFigmaFileImages
} from "@cicctencent/figma2html";
```
### 获取figma信息（这块请自行调用api获取，这里只给示例）
```typescript
// 用文件ID，和个人token拉取数据
data = await loadFigmaFile(fileKey, token);
```
```typescript
// 获取当前文件所有图片
images = await getFigmaFileImages(fileKey, token);
```
### 转换格式到自定义格式
```typescript
// 转换模板，并动态获取图片地址
const tpl = await convert(data, null, {
images,
async getImage(key) {
console.log('get image', key);
if(images[key]) return images[key];
return '';// 待实现动态获取图片地址
}
});
```
```typescript
// 把自定义格式转为document元素结构
const node = await nodeToDom(tpl, {});
node && document.body.appendChild(node);
```
# API
[API](docs/api/index.md)