Zeplin for Visual Studio Code lets you quickly access the designs you’re working on, follow design changes, and open the Jira issues they’re attached to — all from within VS Code. 🔌
☝️ If you don’t have Visual Studio Code, you can install it from here.
Installing Zeplin Visual Studio Code Extension
Open Zeplin for the Visual Studio Code extension page and click on the "Install" button. You can also open the extension directly in your Visual Studio Code via vscode:extension/zeplin.
Now, you will see the Zeplin logo on the sidebar of VS Code.
Logging in to Zeplin
Open the Zeplin sidebar, and 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 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 log 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, and then you’ll see the list of your projects or styleguides. Click on the ones you want to add to the Zeplin sidebar.
What can you do with Zeplin for VS Code?
After you add a project or a styleguide, you can:
Open them in Zeplin by double-clicking or clicking on the "Open in Zeplin" icon on the right.
Open the 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.
Activity
After you add a project or a styleguide, you will see the latest updates to its screens and components in the "Activity" list.
Related Articles
Keywords: vs code, vscode, microsoft