Get Started

What is Tencent Design

Tencent Design (Ardot) is an AI-driven next-generation intelligent design tool by Tencent, dedicated to providing one-stop full-process solutions for product, design, and R&D teams. As Tencent's self-developed professional design platform, Ardot deeply integrates AI capabilities to seamlessly connect inspiration with product, enabling rapid visualization of creative ideas.

Core Positioning: AI-Driven Intelligent Design Partner

Ardot takes the AI Assistant as its core, deeply empowering the entire design workflow to solve three major pain points: efficiency bottlenecks, creative exhaustion, and collaboration gaps in traditional design tools.

Install the Client

You can start using Tencent Design directly in your browser via the Web app — no installation required. For the desktop client, see the Installation Guide.

Core Capabilities

Capability	Description
Vector Editing	Vector mesh, boolean operations, 3D rotation, and enhanced shape tools for complex effects
Dynamic Layout	Auto layout with true ratio locking, ultra-fast response even with complex nested layouts
Seamless Collaboration	Real-time multi-user collaboration, comments, and proofing with zero communication cost
Full-Process Security	Intelligent permission center, comprehensive behavior tracking, secure asset management

Core Value

For Designers

• Full-process AI empowerment, releasing creativity, reducing repetitive work
• Professional vector editing and motion design capabilities
• Powerful design system management

For Product Managers

• Rapid prototyping based on professional design systems
• Built-in quick animations for interactive prototypes
• Accelerated product iteration

For Developers

• Real-time trackable design file status
• Auto-generated usable code from designs
• Online inspection of specs and asset download

Multi-Platform Access

Tencent Design works across all your devices with real-time sync:

Platform	Notes
Web	Use in your browser — no installation required
MacOS (Apple Silicon)	For M1/M2/M3/M4 chips — Download
MacOS (Intel)	For Intel chips — Download
Windows	Desktop app — Download
WeChat Mini Program	View and comment on mobile — expected late April
VS Code Extension	Expected late April

Sign Up and Login

Visit the Tencent Design website. The following login methods are supported:

Login method	Best for
WeChat scan	Quick login for individual users
Phone / Email	Universal login method
iOA Enterprise	Tencent employees and enterprise users
QQ	Tencent account system

Tip: Enterprise users are recommended to use iOA or email login for unified account management.

5-Minute Quick Start

Create a complete mini project (like creating a button) and run through the full "Create-Edit-Share" workflow.

Step 1: Create Artboard

1. Select the Frame tool from the toolbar, or use shortcut F
2. Drag on the canvas to create an artboard
3. Adjust size, position, and fill color in the right properties panel
4. Or click preset sizes for quick setup

Step 2: Add Elements

1. Use Rectangle tool R to draw button background
2. Use Text tool T to add button text
3. Use Pen tool P to draw decorative elements

Step 3: Share & Collaborate

1. Click the Share button in the top toolbar
2. Set access permissions (View only / Can edit)
3. Generate a link or invite team members

Editor Interface Overview

┌──────────────────────────────────────────────────┐
│  Top toolbar: File name / Tool switcher / Share   │
├──────────┬───────────────────────┬───────────────┤
│          │                       │               │
│  Layers  │       Canvas          │  Properties   │
│  Panel   │   (Main edit area)    │  Panel        │
│  (left)  │                       │  (right)      │
├──────────┴───────────────────────┴───────────────┤
│  Bottom bar: Zoom level / Current page            │
└──────────────────────────────────────────────────┘

Area	Description
Top toolbar	Select, shape, text, pen tools, AI assistant
Layers panel	View and manage layer hierarchy and page list
Canvas	Main editing area, supports pinch/scroll zoom and drag to pan
Properties panel	Adjust position, size, fill, stroke, interactions, and more

Common Shortcuts

Shortcut	Action	Shortcut	Action
V	Select tool	Cmd/Ctrl + C/V	Copy / Paste
R	Rectangle tool	Cmd/Ctrl + Z	Undo
O	Ellipse tool	Cmd/Ctrl + Shift + Z	Redo
T	Text tool	Cmd/Ctrl + G	Group
P	Pen tool	Cmd/Ctrl + Shift + G	Ungroup
F	Frame tool	Cmd/Ctrl + Alt + K	Create component
C	Comment tool	Cmd/Ctrl + +/-	Zoom canvas
Space + drag	Pan canvas	Cmd/Ctrl + \	Open AI assistant
Delete	Delete	Cmd/Ctrl + Alt + S	Save version manually

View Shortcuts

Shortcut	Action
Cmd/Ctrl + 0	Fit to canvas
Cmd/Ctrl + 1	Zoom to 100%
Cmd/Ctrl + 2	Zoom to fit

Workspace Overview

The workspace is the central hub for managing files and projects:

Area	Description
Drafts	Personal private space — ideal for work-in-progress
Projects	Team collaboration space — share files with permissions
Recent	Recently opened files for quick access
Archived	Archived files retained in full

Tip: Keep personal explorations in Drafts and deliverables in Projects for better permission management.

Artboard & Views

Create Artboard

• Select Frame tool, shortcut F
• Drag to create or choose preset sizes

Artboard Operations

• Zoom: Scroll wheel or Cmd/Ctrl +/-
• Pan: Space + drag
• Guides: Drag from rulers to create guides
• Grid: Enable grid display from View menu

Layers & Objects

Operation	Description
Create layer	Use toolbar tools or Cmd/Ctrl + Shift + N
Select layer	V to select, click to select, multi-select with Shift or marquee
Move layer	Drag or use arrow keys
Copy/Paste	Cmd/Ctrl + C/V, paste in place Cmd/Ctrl + Shift + V
Group	Cmd/Ctrl + G / Ungroup Cmd/Ctrl + Shift + G
Scale proportionally	Hold Shift while dragging
Lock	Cmd/Ctrl + Shift + L
Hide/Show	Cmd/Ctrl + Shift + H

Design Tools

Basic Shapes

• Rectangle tool R: Draw rectangles and squares
• Ellipse tool O: Draw ellipses and circles
• Polygon tool L: Draw triangles and polygons
• Pen tool P: Draw vector paths

Boolean Operations

Support path union, subtract, intersect, and exclude operations to create complex shapes.

Text

• Text tool T to create text boxes
• Support font, size, color, line height, alignment, and more

Styles

Fill & Stroke

• Fill: Solid color, gradient, image fill
• Stroke: Color, width, line style (solid/dashed)

Effects

• Shadow: Inner/outer shadow
• Blur: Gaussian blur, background blur
• Blend modes: Various overlay effects

Color Management

• Use Color Manager to manage team color palettes
• Create Color/Effect Styles for easy reuse

Auto Layout

Basic Setup

1. Select element, click Auto Layout in properties panel
2. Set direction (horizontal/vertical)
3. Set spacing and alignment

Advanced Features

• Responsive: Set min/max width
• Nested auto layouts for complex structures

Collaboration & Handoff

Team Management

1. Create team: Click "Create Team" in workspace
2. Invite members: Set roles (Admin/Editor/Viewer)
3. Permission management: Fine-grained file access control

Real-time Collaboration

• See team members' cursors and avatars in real-time
• Support multiple users editing the same file

Comments & Annotations

• Use Comment tool C to add comments
• Support @mentions and task assignment

Developer Handoff

• Developer mode: View design code
• View code: Get CSS/React/Vue code
• Batch export: Export all assets at once

File & Resource Management

File Operations

Operation	Description
Create file	Click "New File" in workspace
Create副本	Right-click menu "Create副本"
Version history	File menu "Version History"
Delete/Recover	Right-click "Delete", recover from trash

Import & Export

• Import: Support SVG, Figma (.fig) files, and CoDesign design share links
• Export: PNG, JPG, SVG, PDF and more

Team Libraries

Component System

• Master components: Edit once, sync all instances
• Instances: Copies of master components with local overrides
• Component libraries: Publish team libraries for everyone

Variables

• Define design variables (colors, fonts, spacing)
• Variables sync globally

Multi-Platform Access

Tencent Design works across all your devices with real-time sync:

Platform	Notes
Web	Use in browser — no installation
macOS	Desktop app with offline support
Windows	Desktop app with feature parity
iOS / Android	View and comment on the go

Migration Guide

Migrating from Other Tools

From	Notes
Figma	Direct import of .fig files

Shortcut Comparison

Function	Axure	Sketch	Figma	Ardot
Select	Mouse	V	V	V
Rectangle	R	R	R	R
Text	T	T	T	T
Pen	P	P	P	P

FAQ

Q: What if fonts are missing? A: Select alternative fonts in properties panel, or install missing fonts in settings

Q: Can't open file? A: Check network connection, or try clearing cache and reopening

Q: Auto-save frequency? A: System auto-saves every 30 seconds, or manually with Cmd/Ctrl + Alt + S

Q: How to export all slices? A: Use "Batch Export" feature, select elements and formats

Next Steps

• File Creation & Management — Deep dive into files, pages, and components
• Import Files — Migrate your designs from Figma
• Import CoDesign Files — Import read-only files from a design share link
• Share & Collaboration — Invite teammates to collaborate
• AI Features — Explore Image to UI, Text to UI, and H2D