Synology Design System
Design with official Synology tokens and sync with SynoVueComponents.
Plugin Preview
About this plugin
**The official plugin for Synology Design System.**
Bridge the gap between design and development with full support for **SynoVueComponents**. This tool helps teams build consistent interfaces using our standardized tokens and assets.
**Key Features:**
* ⚛️ **SynoVueComponents Integration:** Directly access and inspect our internal Vue component library. Ensure your designs map 1:1 with production code.
* 🎨 **Semantic Tokens:** Apply official colors, typography, and spacing variables (e.g., $surface-z0, $text-primary) to stay consistent.
* 🧩 **Assets & Icons:** Drag and drop approved assets directly into your canvas.
* 🛠 **Developer Handoff:** View component props and code snippets for seamless implementation.
**Usage:**
Run the plugin to browse SynoVueComponents or apply design tokens to your selection.
Plugin Details
| Version | 1 |
|---|---|
| Created | January 12, 2026 |
| Last Updated | January 12, 2026 |
| Category | Software development |
| Creator | RedHuang (redhuang) |
| Stats | 2 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/index.html
- main:dist/index.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://*.synology.inc
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.