Design Overview
Tencent Design's editor is built on the high-performance TGFX graphics engine, delivering a design experience on par with industry-standard tools, with built-in AI assistance and real-time collaboration.
Core Features
| Module | Description |
|---|---|
| File Creation | Create files, manage pages, component system, auto layout, version history |
| Import | Import Figma .fig files, images, and SVG |
| Import CoDesign Files | Import read-only files from a CoDesign design share link |
| Share & Collaboration | Link sharing, real-time multi-user collaboration, comments, permissions |
| Layers | Layer basics, frames, masks, selection, copy & paste, constraints, etc. |
| Text & Typography | Variable fonts, lists, text sizing, text styles |
| Other Properties | Stroke, layer effects, corner radius |
| Auto Layout | Auto layout overview, horizontal and vertical flow |
Design Toolkit
The editor includes a complete design toolkit:
- Shape tools: Rectangle, ellipse, line, polygon, star
- Pen tool: Bezier curve drawing with node editing (add/remove anchors, convert curve types)
- Text tool: Rich text styles, font management, paragraph settings, text style reuse
- Selection tool: Single, multi, marquee, and deep selection (penetrate Groups)
- Masks: Clipping mask, rectangle mask
- Boolean operations: Union, subtract, intersect, exclude
- Color picker: Sample any color from canvas or screen
- Slice: Mark export regions and export assets with one click
Style System
Tencent Design supports a full style reuse system:
- Fill: Solid, linear gradient, radial gradient, image fill
- Stroke: Position (inner/center/outer), cap, join type, dash settings
- Effects: Drop shadow, inner shadow, Gaussian blur, background blur
- Shared styles: Text styles and color styles, reusable across files
Component System
The component system is the backbone of scalable design:
| Concept | Description |
|---|---|
| Main component | Changes to the main component propagate to all instances |
| Instance | A copy of the main component — individual properties can be overridden |
| Component set | Groups related variants (e.g., button states) into one component |
| Variant properties | Switch between variants quickly within an instance |
Auto Layout
Auto layout enables child elements within a container to adapt automatically:
- Direction: Horizontal, vertical, wrap
- Spacing: Gap between elements, padding (supports independent 4-side setting)
- Alignment: Justify (main axis), Align (cross axis)
- Child sizing: Fixed, Fill, Hug content
Auto layout is essential for responsive design and component variants.
Design Variables (Design Tokens)
Tencent Design supports Variables — abstracting colors, numbers, and strings into reusable tokens:
- Supports variable collections, organized by purpose
- Supports multiple modes (e.g., light/dark, Chinese/English)
- Variables can be bound to fill, stroke, corner radius, spacing, and more
- Read and write variables in AI workflows via Design MCP's
get_variables/set_variablestools