Connecting Design and Development: React, GitHub, and Tokens
We’re incredibly excited to unveil a new lineup of features. This time, we’re focused on making the handoff from design to development seamless with live preview React components, a new way to sync developer content from GitHub, and better handling for design tokens.
See Code and Design Side by Side with Live Preview React Components
We’re adding a new type of code block! Now, styleguide viewers can preview React components live. While there, they can make edits to code and see how that affects the rendered design in real-time.
And of course, code can be copied directly from styleguides to make development a whole lot quicker.
For the engineers out there, you’ll know that for this to work there’s another part to this feature, which means that yes, you can now import your npm packages into zeroheight, including your custom ones! We support both public and private NPM packages. To get started:
- Open your Styleguide Settings
- Navigate to the ‘Code resources’ section
- Add your npm package and version number to the JSON list of npm packages. You can add as many or as few npm packages as your need to render your React.
Once you’ve got your npm packages referenced, using the new code block is incredibly simple. To check it out:
- Open a page
- Select the “+” symbol
- Choose “Code.”
- Select “React Preview” Here, you’ll also see all of the other ways you can add code to a design system built in zeroheight (including code snippets of any language, Storybook, and HTML previews).
- Enter your code
That’s it! Our team has worked hard to make sure that even incredibly powerful features, like this one, are easy to implement.
Sync Developer Content with our New GitHub Integration
The beauty of zeroheight is in written content, like your Rules and guidelines, appearing right next to your design uploads and code.
And for a design system to be most effective, that content has to come from both design and development teams.
With this update, developer teams can sync markdown from GitHub to zeroheight. Once synced, the content will appear natively and displaying updates is as simple as clicking “refresh.”
The best part: more content in zeroheight without asking team members to change their workflows. Developers can continue to document in GitHub while zeroheight makes their work accessible to the broader team.
To use the new GitHub integration:
- Head to the Uploads tab
- Click on the “Code Repos” tab
- Select “Connect your repos”
- Select the repos you’d like to add
- Select the “+” symbol
- Click Markdown in the toolbar
- Select the file you’d like to upload
From there, the file is added to your styleguide. It’ll appear just like all of your other content.
A new experience for Design Tokens
Helping designers and developers meet in zeroheight is a core focus for us. And, we plan to keep launching impactful features to help you unify your product team in your design system.
Next up, we’re working on helping our users get even more value out of design tokens stored in zeroheight. Want to be a part of the upcoming beta? Sign up here!
Get your team using zeroheight
Our new developer focused features should make zeroheight even more powerful for product teams.
Check out live preview React components by launching a free trial of our Starter plan. Or, get the whole experience with our Pro or Enterprise plans. Give us a shout and we’ll get you set up.