New Features of ZK 10.0.0
Hawk Chen, Manager, Potix Corporation
Feb. 27, 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 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 Figma Kit—a design-ready file packed with all our 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 Figma kit as a comprehensive, ready-to-use resource, containing all standard ZK components designers need to create layouts that developers can easily follow.
Support for Both Standard and Compact Themes
It comes with ZK’s two most popular themes Iceblue (iceblue) and Iceblue Compact (iceblue_c), allowing designers to experiment with both the standard and compact layouts to determine what works best for their project needs.
Custom Theme
Colors and font size used are grouped Figma's variant feature, making it easy to experiment with different colors according to your corporate theme or your project needs. They map to the CSS/LESS files used in the actual application, making it easy for developer to apply after the designer has defined the custom colors. To efficiently apply the custom theme to your LESS file, try xxx plugin. Here are the detailed steps:xxxx
Dynamic Status Representation with Variable Controls
The kit comes with different component states—hover, checked, collapsed/expanded—enabling accurate and versatile design representations that capture user interactions.
Advanced Customization Options
For advanced customization, you can simply ungrouping components to make detailed changes, ensuring that designs can be tailored to specific project requirements.
Typical Workflow (how designers and developers work together using this kit)
1. A designer designs the Web App using ZK Figma Kit. This includes making necessary changes and defining the details (theme, spacing, margin, layouting, etc) 2. Get the design approved internally (optional) 3. Developer follows the Figma file to build the actual web application. Custom attributes can be exported and applied to the LESS file referencing xxx section above.
Download
Download links:....
Summary
ZK Figma Kit aims to help you collaborate with your designers effortlessly, making robust yet beautiful applications for your projects. Please try it out and let us know how it works for you, and how we can further enhance it to boost your productivity. Send us your feedback at info@zkoss.org.
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |