If you are looking for the older guide check out here. Using zeplinNames is deprecated in favor of zeplinIds. It is recommended to use Zeplin CLI initialize flow or use VS Code Extension to add zeplinIds into the configuration file. Next up, we'll populate the zeplinIds key. If you're using the Visual Studio Code extension, simply click “Add styleguide” or “Add project” and you'll be presented with a list.Īfter adding projects or styleguides to our configuration file, it should look like so: The identifier after styleguide/ (or project/) is the identifier we're looking for. Look for the URL in the address bar, which should look like so. If you're not using the Visual Studio Code extension, the easiest way to find the identifier of a Zeplin project or a styleguide is to open them in Zeplin's Web app. To add projects or styleguides, we need their identifiers. In this example, we'll only add one styleguide. If instead your components are under projects, you can add all your projects as well. If you're using Global Styleguides, adding your styleguide(s) will be enough. Now, let's add Zeplin projects or styleguides to the configuration file. components are the Vue.js component files in our codebase.Īdd projects or styleguides Manual configuration.projects and styleguides keys are the identifiers of projects and styleguides we'll use components from.In a bit, we'll start filling out the configuration file: After creating the configuration file, make sure to click the “Login” link on top of the file to authenticate with your Zeplin account. You can also use the “Create Zeplin Configuration File” command by pressing “Command/Ctrl + Shift + P”. If you use the Visual Studio Code extension, it should prompt you to create the configuration file. Within the folder, also create a file called components.json and paste the JSON below: zeplin folder in your repository, so let's create that folder first. We recommend creating your Zeplin configuration file under the. Create configuration file Manual configuration In this guide, we'll prepare the file manually, while also mentioning how you can use the extension to simplify all of the steps. Use Zeplin Visual Studio Code extension (Recommended).You can either prepare the configuration file: The first thing we'll do is to create a JSON configuration file in our repository that maps components in our codebase to the components in Zeplin. Zeplin provides an easier way to connect components using Storybook integration, if your Vue components already have corresponding stories in a Storybook environment. □ We simplified the Connected Components experience, you can now get it running within minutes. This guide covers how to get started with Connected Components for Vue.js components.
0 Comments
Leave a Reply. |