漲姿式!讓你一分鐘玩轉XD切圖

"關注像素大廚,把繁瑣的事情交給我"👉node

閒言碎語不要講,接下來咱們話端詳~微信

此次給你們帶來 XD 切圖+自動標註+線上協做<1分鐘!ide

相比較上一版本 XD 導入速度至少提高5倍優化

2

那麼讓咱們來看看如何玩轉 XD 切圖吧!!設計

大幅提升工做效率

XD切圖流程視頻

  • 導出切圖到PxCook

您能夠在 Adobe XD 的圖層中,激活「添加導出標記」圖標,或在 Adobe XD 的右邊欄中最後一個分欄中,將「添加導出標記」勾選上。在 Adobe XD 中,導出當前設計稿到 PxCook 中。code

新版本中,咱們加入了對 Adobe XD 的切圖支持,同時完全優化了從 XD 到 PxCook 的導入過程,使得導入速度比以前提高了5倍!!讓設計師和工程師之間的銜接更加緊密高效~cdn

  • 定義切圖的範圍

在有些狀況下,可能須要特殊定義切圖的範圍,以固定切圖的尺寸。咱們能夠經過將一個「描述範圍」的形狀圖層放置於須要切圖的組內,而後將該形狀圖層變爲透明便可,以下圖所示:視頻

3

支持自動標註

  • 支持工程師查看自動標註

在 PxCook 軟件開發模式下,工程師可經過點選畫板中元素的方式,直接查看元素之間的間距「圖1」。同時在軟件右邊欄中可查看該元素的詳細尺寸,樣式,及相應代碼「圖2」,最後工程師可直接選擇並下載相應切圖「圖3」blog

4

  • 切換百分比標註

在開發模式下,工程師能夠經過畫板右下角開關來激活百分比標註模式。百分比標註的參考層是經過查看標註的兩個元素自動計算獲得的。您也能夠經過在畫板中右鍵來設置當前選中的元素作爲百分比標註的參考層。要注意的是在同一個畫板中,只容許同時存在一個手動設置的參考層。開發

5

在線協做效率提高

設計師可添加協做人員進入項目,完成的設計稿及切圖可直接導入到 PxCook 協做項目中,並自動適配工程師所需的尺寸,工程師可直接查看相應代碼,一鍵複製所需代碼!

iOS 類型下: 支持 Objective-C SwiftReactNative 類型的代碼生成。

Android 類型下: 支持 XMLReactNative 類型的代碼生成。

Web 類型下: 支持 CSS 類型的樣式代碼生成。

6


-End-

以上就是本次 PxCook XD 切圖功能的優化成果,

感興趣的小夥伴們快來體驗一下吧!爲「產●設●研」而生!

微信關注公衆號:像素大廚PxCook

可獲取更多設計資訊,和各類做圖小技巧

7
相關文章
相關標籤/搜索