直屏旗艦來了 iQOO 12和K70 Pro同臺競技
旗艦機基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據(jù)博主數(shù)碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
大家好，我是前端西瓜哥。
上周圖形編輯器交流群里有人問，對于 Figma 導出的 fig 文件，該如何解析其格式，拿到可讀數(shù)據(jù)。
經(jīng)過群友的一番討論，這個問題最后算是解決了。
導出 Figma 的設計文件，我們會得到一個 fig 文件。
fig 是一種二進制的格式。
它沒有使用 XML 或是 JSON 的格式，而是選擇使用了 Figma 自己實現(xiàn)的特殊編碼工具進行了序列化編碼，并做了封裝，最后得到一個二進制文件。
二進制相比明文格式（JSON 和 XML），優(yōu)點有：
先用 Figma 隨便畫幾個基本圖形。
然后導出 fig 文件，拿到了一個名為 fig-file.fig 的文件。
先用 vscode 打開看看。
不是文本文件，應該就是二進制文件了。
不管怎樣，強行用文本格式打開。
PK 打頭，應該就是 ZIP 格式文件頭的標識。
順便再查看一下這個文件的二進制內(nèi)容，看到開頭這個 50 4B 03 04，說明確確實實是個 ZIP 文件。
基本上很多應用的導出文件都選擇 ZIP 格式，然后再把后綴名改成自己定義的，比如 fig、xmind。
使用 ZIP 格式有以下好處：
解壓一下。
unzip fig-file.fig解壓后的內(nèi)容為：
.├── canvas.fig├── fig-file.fig # 這個是壓縮源文件├── images│ └── 0b15125516ae308a2d819f2970e851c0402949d2├── meta.json└── thumbnail.png需要注意的是，解壓出來的內(nèi)容，并沒有一個根文件夾存放這些內(nèi)容。
但如果你用可視化界面去解壓，通常會解壓出一個文件夾，這個文件夾和壓縮包同名。
這個其實是操作系統(tǒng)的額外操作，目的是防止解壓出大量文件和當前文件夾的其他文件混在一起了，可能還會有文件同名的問題。
canvas.fig 是真正的 Figma 數(shù)據(jù)內(nèi)容，記錄圖形樹中圖形的關(guān)系，以及圖形的屬性。
images 文件夾，存放的是圖片，給里面的文件加上 .png 后綴可查看圖片。
meta.json 是一些圖紙的基本信息，比如導出的客戶端使用的背景色，文件名等。
thumbnail.png 是預覽圖圖片，如果你裝了 figma 桌面端，則在會從 fig 提取出這個圖片給文件預覽器預覽。
等下，不對，canvas.fig？怎么又是 fig 文件，這是在玩套娃？
經(jīng)識別，也是個二進制文件，但它的文件格式卻是。。。fig-kiwi？
這個叫做 Kiwi 的特殊格式被 Figma 的前 CTO，Evan Wallace 開源了。
https://github.com/evanw/kiwi。
Kiwi 是一種基于 Schecha 的二進制格式，用于高效地對樹形數(shù)據(jù)結(jié)構(gòu)進行編碼。
它受到 Google 的 Protoclol Buffer 格式的啟發(fā)，但更簡單，編碼更緊湊，且對自定義字段有更好的支持。
Kiwi 庫提供了工具，能夠解析二進制文件轉(zhuǎn)換為編程語言中的對象，目前支持 JavaScript (TypeScript)、C++、Rust、Skew。
但要提供一個 Schecha，來進行類型的映射。
好在這個 Schecha 有保存在 fig 文件里的。
實際上這個 canvas.fig 文件并不是 Kiwi，它是一個復合產(chǎn)物。
首先開頭的 fig-kiwi 字符串是一個注釋，表示它是一個 fig 文件（畢竟前面也看到了，fig 文件可能也是 ZIP），并使用了 kiwi 進行編碼。
文件里有 Kiwi 的二進制數(shù)據(jù)部分，也有 Schecha 部分，需要把它們提取出來。
這里要做 切片 了。
有個開源項目 Figma-To-JSON 成功解析了 fig，我們看看它怎么做的。
看了下，貌似是切在 50 89 這個地方，切好幾刀，得到一些切片。我們需要前兩個切片。
第一個切片是 Schecha，第二個是 Kiwi 數(shù)據(jù)。
每個切片都是 ZIP 壓縮的，需要先給它們解壓，然后再做 Kiwi 解碼。
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é)一下，大致如下：
上面都是在說解碼 fig 文件的過程。
如果你只是想要得到 fig 的結(jié)構(gòu)，對過程不感興趣，可以直接用一個名為 Figma-To-JSON 的開源項目去解析。
https://github.com/yagudaev/figma-to-json。
下面是轉(zhuǎn)換結(jié)果，是一個一維數(shù)組，風格類似 quill 的 delta。
每個節(jié)點保存有父節(jié)點的 id，可以關(guān)聯(lián)構(gòu)建出一棵圖形樹。
拿到 fig 數(shù)據(jù)格式有什么好處呢？
首先如果你開發(fā)自己的圖形編輯器，或者直接就是 Figma 的競品，你是要設計數(shù)據(jù)結(jié)構(gòu)的，那 fig 數(shù)據(jù)格式就有很好的參考價值。
然后就是做二次開發(fā)，寫一些工具做一些離線的批處理操作，比如提取 fig 的一些文本數(shù)據(jù)轉(zhuǎn)換為 excal 之類的奇怪操作。
這樣你就不用聯(lián)網(wǎng)打開 Figma 網(wǎng)站，使用插件去進行這些操作。
Figma 的 fig 格式算是半公開的，在網(wǎng)上找找能找到不少蛛絲馬跡。因為 Figma 還是比較開放的，使用的 Kiwi 編碼格式也公開了。
但 Figma 不會主動提供在客戶端轉(zhuǎn)換 fig 的方式（但可以使用開發(fā)者 API 請求服務端數(shù)據(jù)），因為這 和它所希望的生態(tài)穩(wěn)定相悖。
如果 Figma 主動提供 fig 的內(nèi)部格式出來，那它就要對這個格式負責，且 Figma 在開發(fā)新的功能時，fig 文件在未來發(fā)展中結(jié)構(gòu)大概率會有破壞性改變的。
當然如果你想和 Photopea 一樣，嘗試去解析它轉(zhuǎn)換成的結(jié)構(gòu)，那也是可以的，但你自己要對這個數(shù)據(jù)結(jié)構(gòu)負責。
本文鏈接：http://www.www897cc.com/showinfo-26-66960-0.html什么？Figma 的 Fig 文件格式居然解析出來了
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號