日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

什么?Figma 的 Fig 文件格式居然解析出來了

來源: 責編: 時間:2024-01-24 09:01:27 232觀看
導讀大家好,我是前端西瓜哥。上周圖形編輯器交流群里有人問,對于 Figma 導出的 fig 文件,該如何解析其格式,拿到可讀數(shù)據(jù)。經(jīng)過群友的一番討論,這個問題最后算是解決了。fig 文件導出 Figma 的設計文件,我們會得到一個 fig 文件

2Dm28資訊網(wǎng)——每日最新資訊28at.com

大家好,我是前端西瓜哥。2Dm28資訊網(wǎng)——每日最新資訊28at.com

上周圖形編輯器交流群里有人問,對于 Figma 導出的 fig 文件,該如何解析其格式,拿到可讀數(shù)據(jù)。2Dm28資訊網(wǎng)——每日最新資訊28at.com

經(jīng)過群友的一番討論,這個問題最后算是解決了。2Dm28資訊網(wǎng)——每日最新資訊28at.com

fig 文件

導出 Figma 的設計文件,我們會得到一個 fig 文件。2Dm28資訊網(wǎng)——每日最新資訊28at.com

fig 是一種二進制的格式。2Dm28資訊網(wǎng)——每日最新資訊28at.com

它沒有使用 XML 或是 JSON 的格式,而是選擇使用了 Figma 自己實現(xiàn)的特殊編碼工具進行了序列化編碼,并做了封裝,最后得到一個二進制文件。2Dm28資訊網(wǎng)——每日最新資訊28at.com

二進制相比明文格式(JSON 和 XML),優(yōu)點有:2Dm28資訊網(wǎng)——每日最新資訊28at.com

  • 體積更小,因為數(shù)據(jù)更緊湊;
  • 解析速度快,像是 JSON 這種,要逐個字符解析然后構(gòu)建 AST,考慮轉(zhuǎn)義、空格等特殊情況,對于大文件,解析效率很差;
  • 高保真,比如一些類型明文格式其實是不好表達的,需要多做一層轉(zhuǎn)換(比如 Float32Array 類型,要保存為字符串就要轉(zhuǎn)為普通數(shù)組);
  • 安全性。因為編碼規(guī)則是應用自己實現(xiàn)的,此外方便做加密(比如異或加密)。編碼和解碼的規(guī)則我們是無法知道的,除非它主動公布出來,否則只能嘗試去做逆向。

先用 Figma 隨便畫幾個基本圖形。2Dm28資訊網(wǎng)——每日最新資訊28at.com

2Dm28資訊網(wǎng)——每日最新資訊28at.com

然后導出 fig 文件,拿到了一個名為 fig-file.fig 的文件。2Dm28資訊網(wǎng)——每日最新資訊28at.com

2Dm28資訊網(wǎng)——每日最新資訊28at.com

先用 vscode 打開看看。2Dm28資訊網(wǎng)——每日最新資訊28at.com

不是文本文件,應該就是二進制文件了。2Dm28資訊網(wǎng)——每日最新資訊28at.com

2Dm28資訊網(wǎng)——每日最新資訊28at.com

不管怎樣,強行用文本格式打開。2Dm28資訊網(wǎng)——每日最新資訊28at.com

2Dm28資訊網(wǎng)——每日最新資訊28at.com

PK 打頭,應該就是 ZIP 格式文件頭的標識。2Dm28資訊網(wǎng)——每日最新資訊28at.com

順便再查看一下這個文件的二進制內(nèi)容,看到開頭這個 50 4B 03 04,說明確確實實是個 ZIP 文件。2Dm28資訊網(wǎng)——每日最新資訊28at.com

2Dm28資訊網(wǎng)——每日最新資訊28at.com

基本上很多應用的導出文件都選擇 ZIP 格式,然后再把后綴名改成自己定義的,比如 fig、xmind。2Dm28資訊網(wǎng)——每日最新資訊28at.com

使用 ZIP 格式有以下好處:2Dm28資訊網(wǎng)——每日最新資訊28at.com

  • 進行了文件壓縮,體積更小,并且是單文件;
  • 保留了目錄結(jié)構(gòu);
  • 跨平臺,基本所有主流操作系統(tǒng)都支持 ZIP。雖然用戶一般來說并不會手動解壓它,但用戶安裝的應用程序能直接使用操作系統(tǒng)的底層 API 去解壓,有助于減少應用程序包體積;

解壓一下。2Dm28資訊網(wǎng)——每日最新資訊28at.com

unzip fig-file.fig

解壓內(nèi)容

解壓后的內(nèi)容為:2Dm28資訊網(wǎng)——每日最新資訊28at.com

.├── canvas.fig├── fig-file.fig # 這個是壓縮源文件├── images│   └── 0b15125516ae308a2d819f2970e851c0402949d2├── meta.json└── thumbnail.png

需要注意的是,解壓出來的內(nèi)容,并沒有一個根文件夾存放這些內(nèi)容。2Dm28資訊網(wǎng)——每日最新資訊28at.com

但如果你用可視化界面去解壓,通常會解壓出一個文件夾,這個文件夾和壓縮包同名。2Dm28資訊網(wǎng)——每日最新資訊28at.com

這個其實是操作系統(tǒng)的額外操作,目的是防止解壓出大量文件和當前文件夾的其他文件混在一起了,可能還會有文件同名的問題。2Dm28資訊網(wǎng)——每日最新資訊28at.com

canvas.fig 是真正的 Figma 數(shù)據(jù)內(nèi)容,記錄圖形樹中圖形的關(guān)系,以及圖形的屬性。2Dm28資訊網(wǎng)——每日最新資訊28at.com

images 文件夾,存放的是圖片,給里面的文件加上 .png 后綴可查看圖片。2Dm28資訊網(wǎng)——每日最新資訊28at.com

meta.json 是一些圖紙的基本信息,比如導出的客戶端使用的背景色,文件名等。2Dm28資訊網(wǎng)——每日最新資訊28at.com

thumbnail.png 是預覽圖圖片,如果你裝了 figma 桌面端,則在會從 fig 提取出這個圖片給文件預覽器預覽。2Dm28資訊網(wǎng)——每日最新資訊28at.com

2Dm28資訊網(wǎng)——每日最新資訊28at.com

等下,不對,canvas.fig?怎么又是 fig 文件,這是在玩套娃?2Dm28資訊網(wǎng)——每日最新資訊28at.com

經(jīng)識別,也是個二進制文件,但它的文件格式卻是。。。fig-kiwi?2Dm28資訊網(wǎng)——每日最新資訊28at.com

2Dm28資訊網(wǎng)——每日最新資訊28at.com

Kiwi

這個叫做 Kiwi 的特殊格式被 Figma 的前 CTO,Evan Wallace 開源了。2Dm28資訊網(wǎng)——每日最新資訊28at.com

https://github.com/evanw/kiwi。2Dm28資訊網(wǎng)——每日最新資訊28at.com

Kiwi 是一種基于 Schecha 的二進制格式,用于高效地對樹形數(shù)據(jù)結(jié)構(gòu)進行編碼。2Dm28資訊網(wǎng)——每日最新資訊28at.com

它受到 Google 的 Protoclol Buffer 格式的啟發(fā),但更簡單,編碼更緊湊,且對自定義字段有更好的支持。2Dm28資訊網(wǎng)——每日最新資訊28at.com

Kiwi 庫提供了工具,能夠解析二進制文件轉(zhuǎn)換為編程語言中的對象,目前支持 JavaScript (TypeScript)、C++、Rust、Skew。2Dm28資訊網(wǎng)——每日最新資訊28at.com

但要提供一個 Schecha,來進行類型的映射。2Dm28資訊網(wǎng)——每日最新資訊28at.com

好在這個 Schecha 有保存在 fig 文件里的。2Dm28資訊網(wǎng)——每日最新資訊28at.com

canvas.fig 文件

實際上這個 canvas.fig 文件并不是 Kiwi,它是一個復合產(chǎn)物。2Dm28資訊網(wǎng)——每日最新資訊28at.com

首先開頭的 fig-kiwi 字符串是一個注釋,表示它是一個 fig 文件(畢竟前面也看到了,fig 文件可能也是 ZIP),并使用了 kiwi 進行編碼。2Dm28資訊網(wǎng)——每日最新資訊28at.com

文件里有 Kiwi 的二進制數(shù)據(jù)部分,也有 Schecha 部分,需要把它們提取出來。2Dm28資訊網(wǎng)——每日最新資訊28at.com

這里要做 切片 了。2Dm28資訊網(wǎng)——每日最新資訊28at.com

有個開源項目 Figma-To-JSON 成功解析了 fig,我們看看它怎么做的。2Dm28資訊網(wǎng)——每日最新資訊28at.com

看了下,貌似是切在 50 89 這個地方,切好幾刀,得到一些切片。我們需要前兩個切片。2Dm28資訊網(wǎng)——每日最新資訊28at.com

第一個切片是 Schecha,第二個是 Kiwi 數(shù)據(jù)。2Dm28資訊網(wǎng)——每日最新資訊28at.com

每個切片都是 ZIP 壓縮的,需要先給它們解壓,然后再做 Kiwi 解碼。2Dm28資訊網(wǎng)——每日最新資訊28at.com

import { ByteBuffer, compileSchema, decodeBinarySchema } from "kiwi-schema"export const figToJson = (fileBuffer: Buffer | ArrayBuffer): object => {  // 提取 fig 文件的 schema 和 kiwi 格式數(shù)據(jù)  const [schemaByte, dataByte] = figToBinaryParts(fileBuffer)  const schemaBB = new ByteBuffer(schemaByte)  const schema = decodeBinarySchema(schemaBB)  const dataBB = new ByteBuffer(dataByte)  const schemaHelper = compileSchema(schema)  // 這個 json 對象就是最終結(jié)果了  const json = schemaHelper[`decodeMessage`](dataBB)  return convertBlobsToBase64(json)}

流程總結(jié)一下,大致如下:2Dm28資訊網(wǎng)——每日最新資訊28at.com

2Dm28資訊網(wǎng)——每日最新資訊28at.com

Figma-To-JSON

上面都是在說解碼 fig 文件的過程。2Dm28資訊網(wǎng)——每日最新資訊28at.com

如果你只是想要得到 fig 的結(jié)構(gòu),對過程不感興趣,可以直接用一個名為 Figma-To-JSON 的開源項目去解析。2Dm28資訊網(wǎng)——每日最新資訊28at.com

https://github.com/yagudaev/figma-to-json。2Dm28資訊網(wǎng)——每日最新資訊28at.com

下面是轉(zhuǎn)換結(jié)果,是一個一維數(shù)組,風格類似 quill 的 delta。2Dm28資訊網(wǎng)——每日最新資訊28at.com

每個節(jié)點保存有父節(jié)點的 id,可以關(guān)聯(lián)構(gòu)建出一棵圖形樹。2Dm28資訊網(wǎng)——每日最新資訊28at.com

2Dm28資訊網(wǎng)——每日最新資訊28at.com

拿到 fig 數(shù)據(jù)格式有什么好處呢?2Dm28資訊網(wǎng)——每日最新資訊28at.com

首先如果你開發(fā)自己的圖形編輯器,或者直接就是 Figma 的競品,你是要設計數(shù)據(jù)結(jié)構(gòu)的,那 fig 數(shù)據(jù)格式就有很好的參考價值。2Dm28資訊網(wǎng)——每日最新資訊28at.com

然后就是做二次開發(fā),寫一些工具做一些離線的批處理操作,比如提取 fig 的一些文本數(shù)據(jù)轉(zhuǎn)換為 excal 之類的奇怪操作。2Dm28資訊網(wǎng)——每日最新資訊28at.com

這樣你就不用聯(lián)網(wǎng)打開 Figma 網(wǎng)站,使用插件去進行這些操作。2Dm28資訊網(wǎng)——每日最新資訊28at.com

Figma 官方的看法

Figma 的 fig 格式算是半公開的,在網(wǎng)上找找能找到不少蛛絲馬跡。因為 Figma 還是比較開放的,使用的 Kiwi 編碼格式也公開了。2Dm28資訊網(wǎng)——每日最新資訊28at.com

但 Figma 不會主動提供在客戶端轉(zhuǎn)換 fig 的方式(但可以使用開發(fā)者 API 請求服務端數(shù)據(jù)),因為這 和它所希望的生態(tài)穩(wěn)定相悖。2Dm28資訊網(wǎng)——每日最新資訊28at.com

如果 Figma 主動提供 fig 的內(nèi)部格式出來,那它就要對這個格式負責,且 Figma 在開發(fā)新的功能時,fig 文件在未來發(fā)展中結(jié)構(gòu)大概率會有破壞性改變的。2Dm28資訊網(wǎng)——每日最新資訊28at.com

當然如果你想和 Photopea 一樣,嘗試去解析它轉(zhuǎn)換成的結(jié)構(gòu),那也是可以的,但你自己要對這個數(shù)據(jù)結(jié)構(gòu)負責。2Dm28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-66960-0.html什么?Figma 的 Fig 文件格式居然解析出來了

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 研究人員發(fā)現(xiàn)史上最大泄露數(shù)據(jù)庫,包含 260 億條信息

下一篇: 深入探討TypeScript中implements與extends的區(qū)別

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 龙南县| 荔浦县| 陕西省| 永城市| 界首市| 晋中市| 娄底市| 诸城市| 东乡| 新兴县| 手机| 贵南县| 宣汉县| 清水河县| 江门市| 宜丰县| 融水| 敦化市| 会泽县| 乌苏市| 万载县| 宁津县| 广南县| 松原市| 尉犁县| 肃北| 北票市| 惠安县| 平阴县| 淮安市| 滦平县| 玉树县| 安溪县| 车险| 广宗县| 古交市| 涿州市| 镇平县| 河东区| 达孜县| 济阳县|