在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/

網頁教學影片