支持 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 與 Photoshop 的搭配使用
Zeplin 與 Sketch 的搭配使用
- Zeplin now suggests adding Figma color and text styles to your project styleguide when you export frames.
- You can now share links to a specific version of a screen.
- An issue where exportable components from Figma wouldn’t have assets.
- An issue where JPGs in Zeplin would be larger than Sketch—JPG quality can also be tweaked from the Sketch Integration menu.
- An issue where components wouldn’t be recognized in screens exported from Sketch using the Anima plugin.
- A crash while autocompleting emojis.
- An occasional Sketch export crash for files using the Anima plugin.
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.
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.
Starter and Growing Business plans 適合個人與中小型企業使用
Personal plans for solo designers, freelancers;with unlimited collaborators
- More projects
- Archiving projects
- 300 components per project
- More versions per screen
Organization plan 適合公司企業使用 (for up to 16 members)
Team plan for multiple designers and engineers, with shared projects and advanced user permissions
- Unlimited projects
- Team project dashboard, letting members browse and join projects
- Advanced user permissions, set up members who can create projects, edit resources
- Priority support
- Unlimited components per project
- Unlimited versions per screen
What is an active project?
A project is a collection of screens (artboards) for a specific platform. There’s no limit on the number of screens you can have in your project.
Your project is considered active unless you archive it manually.
Who counts as a member in the Organization plan?
Both designers and engineers (basically your teammates who needs to upload designs or select layers to access technical resources like specs, assets and code snippets) count as members in the Organization plan.
Zeplin's desktop apps are available for:
- macOS 10.12+
- Windows 7+
Zeplin’s Web app works on Windows, macOS and Linux devices and supports most modern browsers to provide the best experience:
- Chrome 62+
- Firefox 59+
- Safari 11+
- Edge 15+
- Photoshop CC 2015+
- Sketch 43+
What does it mean to archive a project?
If you are no longer working on a project, but would like to access it at a later time, you can archive it. Archiving prevents any project member from accessing the project— this means the specs, code snippets, styleguide and notes will not be available to anyone.
Archived projects do not count against your project limit.
☝️ Only project owners and admins can re-activate archived projects.
What is the difference between deleting and archiving a project?
If you no longer want access to a project, you can delete it. This will permanently delete your project from our system.
☝️ Only project owners can delete projects.
What if I need more projects—can I upgrade at any time?
You can upgrade your plan at any time. When you upgrade, it goes into effect immediately and you will be billed a prorated amount for the new plan.
Prorating means we calculate the amount of time you have left in your current billing cycle and use the money you paid in your initial plan towards your new plan. This way, your billing cycle does not change and we credit the amount you had originally paid.