在pxCode裡，只要有了Posize+Flex，無論什麼樣的設計稿，都可以用最有效率的方式進行切版編輯，大大提升了效率。


音樂藝文

學習

以全中文介紹 pxCode 的內部功能，並進行細節的分段教學。

你或許會好奇，為什麼早已在設計軟體完成的設計稿，還要進行修正？—— 沒錯，因為這中間的切換，經常會有元件不適應（也可能是設計稿本身）的問題。


這篇文中，將會重點介紹網pxCode裡，使用者介面的四大功能項目，分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas

在pxCode裡，和其他編輯工具的共同點.，就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整，都必須先把結構（既HTML）的基礎打好。


對於剛入門的新手來說，有一些細節概念或許不是那麼清楚的，例如說什麼時候應該做出怎麼樣的調整，來進入下一步調整？

pxCode就會提供許多獨創的視覺編輯方式，讓甚至沒有任何資訊或設計背景的用戶，都可以輕易上手。

在 pxCode 裡，我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後，再動手執行，會更有效率！

在 pxCode 裡，我們支援 Sketch 和 Figma。導入設計稿進行編輯之後，就會自動產生 HTML 和 CSS 的程式碼。