Zeplin 設計師與前端開發者必用的熱門協作軟體
支持 Sketch,Adobe XD CC,Figma 和 Photoshop
Zeplin 針對 UI 設計、網頁開發、原型設計稿標註規格好用工具
搭配 Sketch 軟體,開發 App 應用程式從未如此簡單
Zeplin 是設計師和前端開發人員之間的最佳協作溝通工具。在開發 iOS App 應用程式時,工程師和設計師的溝通經常令人感到頭痛。過去設計師往往要在 App 介面設計的畫面上,標示各種元件的位置、大小、顏色、尺寸等重要訊息,並且需要與工程師密切的溝通,工程師才有辦法了解App設計畫面排版的細節。
有了 Zeplin 協作軟體工具,App 介面設計師只要將 App 原型設計軟體 Sketch 或 Photoshop 製作的 App 介面設計畫面加入 Zeplin 的專案,便可以輕鬆與工程師直接在專案上看到 Zeplin 自動標示的 App 畫面細節。
數位時代下今天有很多工具可以幫助您產製數位產品。它們從設計工具到開發工具到網頁創建工具都有所不同。原型開發工具是幫助您更快更有效地開發產品的工具。原型展示你的想法,這樣做可以改變你的設計方式。迭代和分享能力實際上是其中原型脫穎而出的地方。
Zeplin 與插件外掛程式一起搭配使用時,使用Sketch變成是一種非常棒的體驗。它可以幫助開發人員輕鬆檢查介面的大小,字體,顏色和尺寸。另外,Zeplin允許從畫板直接下載每個元素到元素。它準備了接口的CSS樣式文件,從而為前端開發人員節省了大量的工作。
Zeplin 與 Photoshop 的搭配使用
影片介紹
Tailored resources, in one location
Zeplin automatically generates accurate specs, assets and code snippets from designs—tailored for the platform you’re developing for. No more getting lost in design files.
Always up-to-date
Designs are updated quite frequently, get notified of changes promptly. Add Zeplin to a Slack channel to supercharge your workflow.
Generate code snippets that makes sense
We’re not here to hand you the complete front-end code, we just want to help out with repetitive stuff—simply grab the snippets you need.
Code snippets in Zeplin are open source extensions built by the community. Pick the ones that fit your workflow, or build your own.
Pop it out!
Pop the designs out as a transparent window that you can move around. Compare it with the app or the website to align elements smoothly. It even snaps to the iOS simulator!
Connected to the design system
Components, colors, text styles you inspect in designs are all linked to the Styleguide in Zeplin—quickly access product or brand resources, generating assets and code snippets.
Export designs in one click
No need to change how you design, just export your file in one click using our Sketch, Adobe XD CC, Figma, Adobe Photoshop CC plugins.
Generate development resources automatically
Select the platform you’re designing for and let Zeplin -pun intended- take care of the rest, generating accurate tailored specs, assets and code snippets.
Keep everyone on the same page
Everyone in the team can access the latest design resources, get notified of changes without you having to ping them.
Curate your design system
Organize and showcase your product or brand colors, text styles and components—letting developers create resources and code snippets.
Keep everyone on the same page
Export and store designs in Zeplin projects, curating them in the cloud, under one roof. Quickly invite teammates, share links and get to building.
Everyone in the team can access up to date design resources, get notified of changes.
Communicate right on the designs
Add notes directly on designs to communicate ideas, feedback or to ask for technical details. To keep things organized, categorize notes by color and resolve them when you're done.
We have fun interacting in Zeplin so much, we made it really easy to add quick reactions and emojis—you can even bring your custom Slack emojis to Zeplin automatically with the integration.
Speed up your workflow with integrations
Add Zeplin to a Slack channel or a Trello board to speed up your workflow, always keeping the team up to date.
Build your team’s design repository
Collect and organize your team's projects and resources like components, colors, text styles. Store older versions and projects, referencing them quickly when necessary.
Free | Basic | Team | Organization | Enterprise | |
Projects | 1 | 1, 3, or 6 | 12 | Unlimited | Unlimited |
# of users | Unlimited members | Unlimited members | Pay per designer & developer seat. Unlimited reviewers. |
Pay per designer & developer seat. Unlimited reviewers. |
Pay per designer & developer seat. Unlimited reviewers. |
User permissions | User permissions: Role types Owner Member Only project owner can publish designs |
Role types Owner Member All roles can publish designs |
Role types Admin Editor / Developer Reviewer Editor/Developer role can publish designs |
Role types Admin Editor Developer Reviewer Only assigned Editors can publish designs |
Role types Admin Editor Developer Reviewer Only assigned Editors can publish designs |
Screens in projects | 100 | Unlimited | Unlimited | Unlimited | Unlimited |
Screen Variants | Unlimited | Unlimited | Unlimited | Unlimited | Unlimited |
Approvals | Unlimited | Unlimited | Unlimited | Unlimited | Unlimited |
Versioning | |||||
Version History | 30 days | 1 year | Unlimited | Unlimited | Unlimited |
Version Diff | V | V | V | V | V |
Flows | |||||
Flows | Unlimited | Unlimited | Unlimited | Unlimited | Unlimited |
Flow boards | — | — | — | — | V |
Styleguides | |||||
Styleguides | 1 | 1 | 12 | Unlimited | Unlimited |
Components in styleguide | 100 | Unlimited | Unlimited | Unlimited | Unlimited |
Integrations & API | |||||
Design Tools Figma, Sketch, Adobe XD, Photoshop |
V | V | V | V | V |
Collaboration tools Slack, MS Teams |
V | V | V | V | V |
Developer Tools Jira, Azure DevOps, VS Code, Storybook |
V | V | V | V | V |
Open Platform API, webhooks |
V | V | V | V | V |
Workspace & user management | |||||
User Management Dashboard |
V | V | V | ||
Restricted access by role | V | V | V | ||
Archive projects | V | V | V | ||
Project sections | V | V | V | ||
Pin projects | V | V | V | ||
Project statuses | V | V | V | ||
Invite users by tag | V | V | |||
Activity logs | V | ||||
SAML, SCIM, MFA | V |
Desktop apps
Zeplin's desktop apps are available on the following operating systems:
Mac
- macOS 14.0 Sonoma
- macOS 13.0 Ventura
- macOS 12.0 Monterey
- macOS 11.0 Big Sur
- macOS 10.15 Catalina
Win
- Windows 7+
If you're on an unsupported macOS/Windows version or an operating system such as Linux, you can use Zeplin's Web app. It offers the same functionality as desktop apps, except for uploading designs.
Web app
Zeplin’s Web app works on Windows, macOS and Linux devices and supports most modern browsers to provide the best experience:
- Chrome 72+
- Firefox 60+
- Safari 12+
- Edge 16+
Plugins
- Photoshop CC 2015+
- Sketch 69+