☝️ If you don’t have the Visual Studio Code, you can install it from here.
Zeplin for Visual Studio Code lets you quickly access the designs you’re working on, follow design changes, open the Jira issues they’re attached to — all from within VS Code. 🔌
Installing the Zeplin Visual Studio Code Extension
Now, you will see the Zeplin logo on the sidebar of the VS Code.
Logging in to Zeplin
Open the Zeplin sidebar, click on the "Login to Zeplin" button. You’ll see a confirmation pop-up that wants you to redirect to Zeplin Web App. Click on the “Open” button to continue.
Login in the Web App if you are not already logged in and click on the "Connect to VS Code" button:
Confirm the pop-up to redirect back to VS Code and you will be logged in.
Adding a project or a styleguide
After you logged in, you will see the "Add project" and "Add styleguide" buttons.
Click on the “Add project" button if you want to add your projects, or click on the “Add styleguide" button if you want to add your styleguides. Select your workspace, then you’ll see the list of your projects or styleguides. Click on the ones you want to add to the Zeplin sidebar.
After you added a project or a styleguide, you can:
- Open them in Zeplin by double click or clicking on the "Open in Zeplin" icon on the right.
- Open JIRA issues that your designs are attached to by clicking on the "JIRA" icon on the right.
- Expand the list to see their screens and components by clicking on the "Expand" icon on the left.
- Pin a screen or a component by clicking on the "Pin" icon on the right to see them in the "Pinned" list. You can unpin them anytime by clicking the "Unpin" icon on the right.
After you add a project or a styleguide, you will see the latest updates to its screens and components in the "Activity" list.