This article explains how to map design tokens—style, component, template, and file tokens—to appropriate carriers in Figma and Sketch, covering token categories, multi‑mode and multi‑business handling, component token strategies, property naming conventions, handoff methods, and version management.
NetEase Cloud Music’s GMTC talk unveils C2D2C—a lossless design‑development workflow that treats code as a shared language, letting designers export layer data and component metadata via Sketch/Figma plugins, which developers convert back into code, boosting designer efficiency by 25%, developer efficiency by 33%, and overall collaboration by 38% across major product scenarios.
This article explains the common line‑height inconsistencies between UI design and front‑end implementation, introduces the open‑source Fin Line‑Height Fix plugin for Figma and Sketch, and provides step‑by‑step usage instructions plus code examples for iOS, Android, and React Native.
The article introduces the Fin Line Height Fix Tool, an open‑source solution from NetEase’s Dolphin team that resolves visual fidelity problems caused by inconsistent font heights between design tools and implementation, offering Figma and Sketch plugins plus iOS, Android, and React Native code to ensure pixel‑level line‑height consistency and streamline designer‑developer collaboration.
This article provides a comprehensive tutorial on developing Sketch plugins using JavaScript, CocoaScript, and skpm, covering background motivation, required knowledge, quick start steps, project structure, manifest configuration, menu nesting, API usage, actions, WebView integration, debugging, hands‑on examples, and best practices for front‑end engineers seeking to bridge design and code.
This article explains why a design system is essential, outlines the Shufang case study, and details practical steps—tool selection, color palette, base styles, icon library, componentization, global rules, and brand language—to create a scalable, consistent UI framework.
This article explores the history and resurgence of the Aero (frosted‑glass) effect, its application in the 58 Part‑time online earning redesign, the UI problems it solves, and provides a step‑by‑step guide using Sketch and After Effects to create the effect.
This article explains how to set accurate font line heights in Sketch for mobile UI design, presenting single‑line and multi‑line formulas, practical examples, testing results, and verification steps to ensure consistent visual alignment across iOS, Android, and front‑end implementations.
Discover how a simple Sketch plugin automatically adjusts line height to match iOS defaults, eliminating pixel‑perfect discrepancies and saving designers from tedious manual tweaks.
By leveraging a custom Sketch‑plugin workflow that extracts layered designs into an extensible widget and ConstraintLayout system, the Amap team automated car‑navigation UI generation, enabling rapid theme‑customisation, pixel‑perfect verification, and resource integration, cutting design effort by over 50 % and development effort by more than 80 %.
This guide walks you through Sketch plugin architecture, manifest configuration, command definitions, Actions and JavaScript APIs, CocoaScript bridging, UI panel creation with AppKit, sidebar navigation, debugging techniques, logging methods, and using SketchTool for automation, providing practical code examples for each step.
The article presents a flexible, Sketch‑driven theme‑customization workflow for car‑navigation apps in which UED designers create and upload resources to a cloud platform, Jenkins packages them into the APK, and real‑device previews verify the result, enabling developers‑free, low‑cost, rapid, and maintainable UI theming across multiple projects.
This article details the background, challenges, and step‑by‑step solution for standardizing UI across Youzan Retail’s iOS and Android apps, covering designer and developer perspectives, the creation of a shared style library, component architecture, resource management, delivery outcomes, pitfalls, and future automation plans.
This article details the development of Kirby, a Sketch plugin created by Ctrip's front‑end team to manage design resources, enforce design language standards, and provide a full stack of features—including design token handling, static scans, WebView GUIs, and native integrations—while explaining the underlying Sketch plugin architecture, APIs, and tooling.
This guide explains how Sketch’s Libraries feature enables component‑based design, improves collaboration, and streamlines the handoff between designers and developers by showing how to create, use, and update shared symbol libraries, with practical steps and cloud‑sync tips.
This article compares Adobe XD and Sketch across usability, compatibility, drawing capabilities, speed, resource panels, and prototyping features, highlighting XD's cross‑platform support, free pricing, and unique tools while weighing its limitations against Sketch's strengths for UI designers.
This article explains what Sketch Libraries are, why they’re essential for design consistency, and provides a step‑by‑step guide on creating, adding, and updating libraries—including naming conventions, color symbol setup, and how changes propagate across projects.
This article outlines a comprehensive Sketch workflow that integrates visual planning, specifications, slice management, annotation, versioning, update tracking, complex component notes, and design summaries, while also showing how to leverage plugins, online annotation, Git, and collaboration tools to dramatically improve design efficiency.
This guide shows UI designers how to prepare Sketch files for Zeplin, create shared icon styles, and add exportable slices so developers can instantly access accurate measurements, assets, and naming conventions, streamlining the handoff process.
