Small Talks/2024/November/Enhancing Design Collaboration: The ZK Figma Kit for Seamless Web App Development

Author

Date

Version
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 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

Should we add these as well:

• auto-layout
• pre-defined token values for paddings
• variant with properties for dynamic switch
• design guidelines

Ready-to-Use Figma File for ZK Components

The ZK Figma Kit is a comprehensive, ready-to-use resource that includes all standard 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 layouts to determine the best fit for their project’s needs.

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 elements 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 [xxx plugin]. Here’s a step-by-step guide to streamline the process: [link to steps].

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.

Advanced Customization Options

For advanced customization, components can be ungrouped to make detailed modifications, ensuring designs meet specific project requirements and preferences.

Typical Workflow: Designers and Developers Working Together

1. The designer creates the web app layout using the ZK Figma Kit, customizing details such as theme, spacing, margins, and layout.
2. Internal approval of the design, if required.
3. The developer follows the Figma file to build the web application. Custom attributes, including colors and other styling elements, can be exported and applied to the LESS file (refer to [xxx section] above).

Download

Download the ZK Figma Kit here: [download link].

Summary

The ZK Figma 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.