DSync
<p>This plugin helps the designers and developers to automate the process of syncing Figma design system changes straight to the codebase design system.</p><p><br></p><p>It is quite useful for the designers to make changes in the design system without notifying developers about each change. Adding 10 new icons in Figma can now be easily transformed to the code as files with one click instead of exporting them manually by the developer. Changing the accent color will not only take effect everywhere it's used in Figma components, but also in the code components just as fast.</p><p><br></p><p>At the moment, the plugin works with such design tokens as</p><ul><li>icons — it searches for "COMPONENT" types on a Figma page and returns them in .svg format only</li><li>colors — it searches for "PAINT" types on a Figma page and returns them in .json format</li><li>typography — it searches for "TEST" types on a Figma page and returns them in .json format</li></ul><p><br></p><p>For instance, if we run the plugin on the page with icons and send the changes, the PR will be creates with all the new .svg files, which are not in the base branch yet.</p><p><br></p><p>Plugin form has several fields which are necessary to be provided:</p><ul><li>repo name — the name of your Github repository with the code design system</li><li>your Github token — <a href="https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token" rel="noreferrer noopener nofollow" target="_blank">here are the instructions</a> of how to create it)</li><li>owner name — your Github nickname if you own the repo or the name of the company</li><li>head branch — the name of the branch where you make the changes to your design system</li><li>base branch — the name of the base branch where you are to pull your changes</li></ul><p><br></p><p>By pushing the "Sync" button it pushes all found token styles to the head branch of the provided repo and creates a pull request to the main branch.</p><p><br></p><p>📩 Do not hesitate to suggest any additional functionality if you think the plugin might be helpful to you!</p>
Plugin Preview
About this plugin
This plugin helps the designers and developers to automate the process of syncing Figma design system changes straight to the codebase design system.
It is quite useful for the designers to make changes in the design system without notifying developers about each change. Adding 10 new icons in Figma can now be easily transformed to the code as files with one click instead of exporting them manually by the developer. Changing the accent color will not only take effect everywhere it's used in Figma components, but also in the code components just as fast.
At the moment, the plugin works with such design tokens as
- icons — it searches for "COMPONENT" types on a Figma page and returns them in .svg format only
- colors — it searches for "PAINT" types on a Figma page and returns them in .json format
- typography — it searches for "TEST" types on a Figma page and returns them in .json format
For instance, if we run the plugin on the page with icons and send the changes, the PR will be creates with all the new .svg files, which are not in the base branch yet.
Plugin form has several fields which are necessary to be provided:
- repo name — the name of your Github repository with the code design system
- your Github token — here are the instructions of how to create it)
- owner name — your Github nickname if you own the repo or the name of the company
- head branch — the name of the branch where you make the changes to your design system
- base branch — the name of the base branch where you are to pull your changes
By pushing the "Sync" button it pushes all found token styles to the head branch of the provided repo and creates a pull request to the main branch.
📩 Do not hesitate to suggest any additional functionality if you think the plugin might be helpful to you!
Plugin Details
Version | 5 |
---|---|
Created | August 24, 2021 |
Last Updated | October 8, 2021 |
Category | Uncategorized |
Creator | Liza Svitanko |
Stats | 795 installs, 25 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Editor Types:figma
More Like This
Discover other plugins in the same category.