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.
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 — coming soon |
| 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 |
| 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 with interactions) and run through the full "Create-Edit-Share" workflow.
Step 1: Create Artboard
- Select the Frame tool from the toolbar, or use shortcut
F - Drag on the canvas to create an artboard
- Adjust size, position, and fill color in the right properties panel
- Or click preset sizes for quick setup
Step 2: Add Elements
- Use Rectangle tool
Rto draw button background - Use Text tool
Tto add button text - Use Pen tool
Pto draw decorative elements
Step 3: Add Interactions
- Select the button element
- Click the Interactions tab in the properties panel
- Set hover, click, and other interaction states
Step 4: Share & Collaborate
- Click the Share button in the top toolbar
- Set access permissions (View only / Can edit)
- 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
Tto 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
- Select element, click Auto Layout in properties panel
- Set direction (horizontal/vertical)
- Set spacing and alignment
Advanced Features
- Responsive: Set min/max width
- Nested auto layouts for complex structures
Collaboration & Handoff
Team Management
- Create team: Click "Create Team" in workspace
- Invite members: Set roles (Admin/Editor/Viewer)
- 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
Cto 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
- 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 |
|---|---|
| Axure | Import RP file, components need manual adaptation |
| Sketch | Export Sketch file then import |
| 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
- Share & Collaboration — Invite teammates to collaborate
- AI Features — Explore Image to UI, Text to UI, and H2D