Figma to Azure Devops

<p><strong>This is a plugin that allows components created in Figma to be exported as component links, prototypes and as images to items in Azure Devops.</strong></p><p><br></p><h2>Reasoning</h2><p>Figma and Azure Devops are two great tools for different purposes and both are used across team roles. A designer will make something in Figma but the rest of the team needs to know what that component is doing, and developers will need additional information to be able to build the component. Azure Devops allows for cross team collaboration, but getting this information linked up with Figma can be a slog of a manual process. Information can quickly go out of sync, as requirements develop the design may not be updated to reflect these changes. As great a design tool Figma is, it can be difficult to navigate for the wider team.</p><p><br></p><h2>Solution</h2><p>This plugin attempts to solve some of these cross team issues by</p><ul><li>Reducing the time it takes to update content in Azure Devops when the design changes.</li><li>Creates direct links between Azure Devops items and the component in Figma they are describing.</li><li>Exports prototypes to work items in Azure Devops</li><li>Easily visible snapshots of components in Azure Devops that stay up to date.</li><li>Automatic version numbering of the Figma file so the version number in Figma stays up to date with the version number in Azure Devops.</li></ul><p><br></p><h2>Running the plugin</h2><p><br></p><p><strong>Setting up Azure Devops</strong></p><p><br></p><p>Work items in Azure Devops need to have at least one multi line field so that the plugin can populate the images and links in the item. Fields in work items that are blank won't be visible to the plugin, so on the first run you'll need to have some value in the field that you want to populate with your Figma components. Unfortunately this is a limitation of the Azure Devops api.</p><p><br></p><p>To learn more about configuring Azure Devops fields and pre populating them with a default value you can read more <a href="https://docs.microsoft.com/en-us/azure/devops/boards/configure-customize?view=azure-devops&amp;tabs=agile-process" rel="noreferrer noopener nofollow ugc" target="_blank">here</a>. I'd recommend adding a specific field to work items, as the plugin will clear out previous content on update. Here is how you <a href="https://docs.microsoft.com/en-us/azure/devops/boards/configure-customize?view=azure-devops&amp;tabs=agile-process#custom-fields" rel="noreferrer noopener nofollow ugc" target="_blank">add a field in Azure Devops.</a></p><p><br></p><p><strong>In Figma, you'll need Editor access to the file</strong></p><p><br></p><p>Get a link for your Azure Devops work item. The following url schema is expected</p><p><code>https://dev.azure.com/{Account}/{Project}/_workitems/edit/{ID}</code></p><p><br></p><ol><li>Protocol : https only</li><li>Domain : Will only work with dev.azure.com urls for use with the public api</li><li>Account : Azure Devops account name</li><li>Project : Azure Devops Project name</li><li>ID : Work item id</li></ol><p><br></p><p>Add this to as many components in Figma that relate to the work item in the "Documentation Links" field in the design view. These must be set up before the plugin is run.</p><p><br></p><p>After installing the plugin you will need access tokens associated with your Azure Devops and Figma accounts.</p><ul><li><a href="https://www.figma.com/developers/api" rel="noreferrer noopener nofollow ugc" target="_blank">How to get a Figma access token</a></li><li><a href="https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&amp;tabs=preview-page" rel="noreferrer noopener nofollow ugc" target="_blank">How to get an Azure Devops access token</a> (you'll need at least the "Work Items (read &amp; write)" scope selected)</li></ul><p><br></p><p>There are two fields when the plugin opens for entering these access tokens.</p><p><br></p><p>If the plugin isn't installed in a private organisation, you'll also need to enter the file's unique key. To find the file's key, you can click the share button on the top panel and click the copy link. You could also copy the file ID from a browser's address bar. The File URL looks something like this</p><p><code>https://www.figma.com/file/lZv3g38KPFJKByY0rdIlG8/Sample-File</code></p><p>The file id is the value between the "file/" and "/Sample-File".</p><p><br></p><p>After establishing a successful connection you can tick the work items you'd like to update in Azure Devops. This will update the Figma file to a new version, create a URL to that version in Azure Devops along with a screenshot of the components.</p><p><br></p><p>Any instances of components that are used in prototypes will be linked to the Azure Devops work item too.</p><p><br></p><p>View the tutorial <a href="https://youtu.be/O9Ym1lKLLHg" rel="noreferrer noopener nofollow ugc" target="_blank">here</a>, including how to configure Azure Devops, get access tokens and run the plugin.</p>