Azure DevOps Embed Design
Azure DevOps Embed Design is a extension that allows users to seamlessly integrate their Figma designs into Azure DevOps. With this extension, designers can easily share their designs with the development team, who can then use the designs to build and implement the user interface for a project. This extension makes it possible for designers to embed their designs into Azure DevOps work items, allowing developers and designs to keep on the same page.
Running Locally for Development
Download and install the following tools
Before we deploy the extension, we need to install its dependencies and compile the code using the following commands:
You will need to deploy your extension to the marketplace at least once using the following command:
After the extension is published, share it with your Azure DevOps organization and install it. Navigate to a project and you will find a new hub called "Hello World!" When you click it, you will notice that the hub won't load correctly. It isn't loading because the extension is configured to load all its resources (html, images, etc.) from
Start the webpack-dev-server with:
Now if you go to
Go back to Azure DevOps and reload. Your extension should now load correctly and any changes to the source code will cause webpack to recompile and reload the extension automatically.
Although most code changes will be reflected immediately, you may still need to occasionally update your extension in the marketplace. The dev extension loads all its resources from the webpack-dev-server, but the manifest itself is being loaded from the published code. Therefore, any changes to the manifest file will not be properly reflected in Azure DevOps until the extension has been republished.