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


音樂藝文

學習

職場產業

Posize 和 Flex？——pxCode 兩個簡單功能，掌握 RWD 切版的關鍵要素

📢  pxCode Posize & Flex

從這支影片當中，你可以認識到如何在 pxCode 裡掌握 Posize 和 Flex 的功能，進而將 #Figma 和 #Sketch 設計稿轉換成響應式網頁。

每當導入一個設計稿，我們都需要進行群組和編輯的分析，以此達到一個清晰的切版介面。

或許你會好奇，到底 #POSIZE 代表著什麼意思？它其實是 pxCode 裡一個結合了 POSITION 和 SIZE 的獨特名字，藉此加速響應式網頁的切版過程。

👉 收看影片以了解更多！

0:09  Group 的類別
0:20  Posize
1:10  Posize 的操作
1:54  Posize 與程式碼
2:06  Flex
2:33  Flex 的操作
3:15  Fusion Flex
4:46  總結

____________________

📲 有任何疑問，歡迎留言，也可以私訊我們！

pxCode: https://www.pxcode.io/​
Facebook: https://www.facebook.com/pxCode​
Medium: https://pxcode.medium.com/

加速網頁切版的過程？【pxCode 教學 5-5】Posize 和 Flex：透過這兩個工具，讓你比其他工具快上10倍

📢 從設計到響應式，全都自己來！

在這支影片，可以了解如何從 #Figma 或 #Sketch 的設計檔，透過 #pxCode 三大步驟的視覺化編輯，達到原本需要繁複程序才能完成的響應式網頁，並獲得 #HTML, #CSS, #React 的程式碼。

透過直覺式，卻又邏輯性的編輯模式，不用花錢也不用寫程式，就讓你省下十倍之多的編輯時間。

👉 到底怎麼辦到？
____________________

⏱ Timeline:

🔵  0:18 : pxCode 3 steps
============================
🔵  0:48 : a. Split to Sections 
🔵  0:57 : b. Analyze Group
🔵  1:12 :  b1. Suggestion
🔵  1:24 :  b2. Clean Up
🔵  1:45 :  b3. Boundary 
🔵  1:53 :  b4. Layout
🔵  2:28 : c. Smart Responsive
============================
🔵  2:59 : Preview 
🔵  3:12 : Export Code
🔵  3:22 : Recap 
 
____________________

📲 有任何疑問，歡迎留言，也可以私訊我們！

pxCode: https://www.pxcode.io/​
Facebook: https://www.facebook.com/pxCode​
Medium: https://pxcode.medium.com/

UI/UX 神器！從設計檔到響應式網頁：Figma, Sketch 免費轉換成 HTML, CSS, React（不用寫程式！）

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

最簡單的前端切版工具！——只要掌握這四個編輯功能，就可以輕鬆RWD

📢 完整的 pxCode 編輯介面介紹

透過這支影片，就可以了解 pxCode 裡清晰簡單的使用者介面。

pxCode 的使用者介面主要分成 #導覽列、#屬性、#工具列、#編輯區 四個項目。而這樣簡單清楚的分類，直接幫助了使用者可以清楚地進行編輯，達到更快速的切版作業。此外，導覽列的編輯，對應了 #HTML 的產出；而屬性的編輯，則影響了 #CSS 的結果。

透過直覺式，卻又具有邏輯性的編輯模式，不用花錢也不用寫程式，就讓你省下十倍之多的編輯時間。

👉 pxCode 到底怎麼辦到？

0:06  編輯介面
0:21  導覽列 Navigator
0:39  屬性 Inspector
0:47  排版類屬性 
1:01  樣式類屬性
1:16  工具列 Toolbar
2:13  編輯區 Editing Canva
2:54  總結

____________________

📲 有任何疑問，歡迎留言，也可以私訊我們！

pxCode: https://www.pxcode.io/​
Facebook: https://www.facebook.com/pxCode​
Medium: https://pxcode.medium.com/

最簡單的前端切版工具！【pxCode 教學 3-5】使用者介面：這四個編輯工具，你就可以完成 RWD

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


要做RWD網頁切版——你知道，最重要的是結構（HTML）嗎？

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

pxCode教學