Enhancing Design Collaboration: The ZK Figma Kit for Seamless Web App Development"
m |
|||
| Line 9: | Line 9: | ||
In the world of web application development, collaboration between designers and developers has become more essential than ever. While ZK developers traditionally focused on directly building UIs, today, many companies employ dedicated design teams to lay out the visual aspects of their applications. | In the world of web application development, collaboration between designers and developers has become more essential than ever. While ZK developers traditionally focused on directly building UIs, today, many companies employ dedicated design teams to lay out the visual aspects of their applications. | ||
| − | To support this, we’re excited to introduce the ZK | + | To support this, we’re excited to introduce the ZK Framework UI Kit — a design-ready Figma file packed with all our core UI components, making it easy for design teams to create detailed, functional layouts. With this kit, designers can craft comprehensive UI plans in Figma that developers can seamlessly bring to life, ensuring a smooth and efficient transition from design to deployment. |
| + | |||
| + | 建議這邊插入一張截圖 | ||
= Key Features = | = Key Features = | ||
== Ready-to-Use Figma File for ZK Components == | == Ready-to-Use Figma File for ZK Components == | ||
| − | The ZK | + | The ZK Framework UI Kit is a comprehensive, ready-to-use resource that includes all core ZK components, giving designers everything they need to create layouts that developers can easily follow. |
| + | |||
== Support for Both Standard and Compact Themes == | == Support for Both Standard and Compact Themes == | ||
| − | The kit comes with ZK’s two most popular themes: Iceblue (iceblue) and Iceblue Compact (iceblue_c). Designers can experiment with both the standard and compact | + | The kit comes with ZK’s two most popular themes: Iceblue (iceblue) and Iceblue Compact (iceblue_c). Designers can experiment with both the standard and compact components to determine the best fit for their project’s needs. |
== Custom Theme == | == Custom Theme == | ||
| − | Colors and font sizes are grouped using Figma’s variant feature, making it easy to experiment with different colors and apply a custom theme to match corporate or project branding. These | + | Colors and font sizes are grouped using Figma’s variant feature(需確認, 還是叫做 local styles?), making it easy to experiment with different colors and apply a custom theme to match corporate or project branding. These styles map directly to the CSS/LESS files used in the application, simplifying the developer’s work once the designer defines the custom colors. |
| − | To apply the custom theme efficiently in your LESS files, we recommend using the [ | + | To apply the custom theme efficiently in your LESS files, we recommend using the [https://www.figma.com/community/plugin/742750636238601912/cssgen CSSGen Plugin]. The plugin will extract your local styles, you can then copy and paste them into your XXX file (Hawk, 哪個目錄下的哪個檔案?). 這邊要插入截圖 |
== Dynamic Status Representation with Variable Controls == | == Dynamic Status Representation with Variable Controls == | ||
| − | The kit supports variable-controlled component states—such as hover, checked, and collapsed/expanded—allowing designers to represent different UI states accurately and flexibly. | + | The kit supports variable-controlled component states—such as hover, checked, and collapsed/expanded—allowing designers to represent different UI states accurately and flexibly. 這邊要錄製動畫 (一個例子, 到右邊去選取改變他不同的 state) |
== Advanced Customization Options == | == Advanced Customization Options == | ||
| − | For advanced customization, components can be ungrouped to make detailed modifications, ensuring designs meet specific project requirements and preferences. | + | For advanced customization, components can be ungrouped to make detailed modifications, ensuring designs meet specific project requirements and preferences. 這邊要錄製動畫 (舉一個例子, 如何 ungroup, 做個改變, regroup) |
== others == | == others == | ||
| − | Should we add these as well: | + | Should we add these as well: (這邊需檢查我們是否有做,有做的部份,寫一些說明, 中英都可。沒做的就刪掉. 最後我會再整理一下) |
* auto-layout | * auto-layout | ||
* pre-defined token values for paddings | * pre-defined token values for paddings | ||
* variant with properties for dynamic switch | * variant with properties for dynamic switch | ||
| − | |||
= Typical Workflow: Designers and Developers Working Together = | = Typical Workflow: Designers and Developers Working Together = | ||
| − | # The designer creates the web app layout using the ZK | + | # The designer creates the web app layout using the ZK Framework UI Kit. Start by experimenting and choosing between the Standard and the Compact Components. Once the theme is decided, use all components from the same group (do not mix Standard and Compact components). |
| − | # Customize details such as | + | # Layout your pages. Customize details such as colors, spacing, and margins. |
# Internal approval of the design, if required. | # Internal approval of the design, if required. | ||
| − | # The developer follows the Figma file to build the web application. | + | # The developer follows the Figma file to build the web application. Local styles can be exported and applied to the LESS file (refer to "Custom Theme" above). |
== Download == | == Download == | ||
| − | Download the ZK Figma | + | Download the ZK Framework UI Kit (Figma) here: [download link]. |
= Summary = | = Summary = | ||
| − | The ZK | + | The ZK UI Kit is designed to simplify collaboration between designers and developers, enabling the creation of robust and visually appealing applications. This is our first version of the kit, and we’re committed to continuously improving it based on your feedback. We invite you to try it out, see how it enhances your productivity, and let us know any ideas or suggestions you may have at info@zkoss.org. |
[[Category:New Features]] | [[Category:New Features]] | ||
Revision as of 16:04, 14 November 2024
ZK 10.0.0
Introduction
In the world of web application development, collaboration between designers and developers has become more essential than ever. While ZK developers traditionally focused on directly building UIs, today, many companies employ dedicated design teams to lay out the visual aspects of their applications.
To support this, we’re excited to introduce the ZK Framework UI Kit — a design-ready Figma file packed with all our core UI components, making it easy for design teams to create detailed, functional layouts. With this kit, designers can craft comprehensive UI plans in Figma that developers can seamlessly bring to life, ensuring a smooth and efficient transition from design to deployment.
建議這邊插入一張截圖
Key Features
Ready-to-Use Figma File for ZK Components
The ZK Framework UI Kit is a comprehensive, ready-to-use resource that includes all core ZK components, giving designers everything they need to create layouts that developers can easily follow.
Support for Both Standard and Compact Themes
The kit comes with ZK’s two most popular themes: Iceblue (iceblue) and Iceblue Compact (iceblue_c). Designers can experiment with both the standard and compact components to determine the best fit for their project’s needs.
Custom Theme
Colors and font sizes are grouped using Figma’s variant feature(需確認, 還是叫做 local styles?), making it easy to experiment with different colors and apply a custom theme to match corporate or project branding. These styles map directly to the CSS/LESS files used in the application, simplifying the developer’s work once the designer defines the custom colors.
To apply the custom theme efficiently in your LESS files, we recommend using the CSSGen Plugin. The plugin will extract your local styles, you can then copy and paste them into your XXX file (Hawk, 哪個目錄下的哪個檔案?). 這邊要插入截圖
Dynamic Status Representation with Variable Controls
The kit supports variable-controlled component states—such as hover, checked, and collapsed/expanded—allowing designers to represent different UI states accurately and flexibly. 這邊要錄製動畫 (一個例子, 到右邊去選取改變他不同的 state)
Advanced Customization Options
For advanced customization, components can be ungrouped to make detailed modifications, ensuring designs meet specific project requirements and preferences. 這邊要錄製動畫 (舉一個例子, 如何 ungroup, 做個改變, regroup)
others
Should we add these as well: (這邊需檢查我們是否有做,有做的部份,寫一些說明, 中英都可。沒做的就刪掉. 最後我會再整理一下)
- auto-layout
- pre-defined token values for paddings
- variant with properties for dynamic switch
Typical Workflow: Designers and Developers Working Together
- The designer creates the web app layout using the ZK Framework UI Kit. Start by experimenting and choosing between the Standard and the Compact Components. Once the theme is decided, use all components from the same group (do not mix Standard and Compact components).
- Layout your pages. Customize details such as colors, spacing, and margins.
- Internal approval of the design, if required.
- The developer follows the Figma file to build the web application. Local styles can be exported and applied to the LESS file (refer to "Custom Theme" above).
Download
Download the ZK Framework UI Kit (Figma) here: [download link].
Summary
The ZK UI Kit is designed to simplify collaboration between designers and developers, enabling the creation of robust and visually appealing applications. This is our first version of the kit, and we’re committed to continuously improving it based on your feedback. We invite you to try it out, see how it enhances your productivity, and let us know any ideas or suggestions you may have at info@zkoss.org.
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |