Here at Microsoft we ❤️ Figma. We use it for everything and anything. So much so, we thought why not use it to actually implement our user interfaces? Sounds crazy enough to work. Let's give this a go.
FigmaSharp turns your Figma design into .NET objects and can generate code and layout files to create native apps. Free and Open Source software under the MIT LICENSE.
We recommend reading through the Wiki to get a sense of the FigmaSharp workflow.
To get documents from figma.com you'll need to generate a Personal Access Token. Sign in to Figma and in the main menu, go to Help and Account → Account Settings and select Create new token. This will be your only chance to copy the token, so make sure you keep a copy in a secure place.
Try out automatic builds of the FigmaSharp app and Visual Studio extension from the Releases page.
Do you have questions, need support, or want to contribute? Join the chat on Discord.
The Visual Studio for Mac extension contains the tools to preview Figma documents and generate Packages ready to use in your projects. Download the .mpack from the Releases page.
The Visual Studio for Mac extension contains the tools to preview Figma documents and generate Packages ready to use in your projects. Download the .mpack from the Releases page. Install it via Visual Studio → Extensions → Install from file….
The FigmaSharp app previews Figma documents without having to install Visual Studio. Download the .app from the Releases page.
Make sure to have the latest version of Xcode. Also install Xamarin.Mac, you can get it via the Visual Studio for Mac Installer.
Open FigmaSharp.Mac.sln
in Visual Studio for Mac. For each project in the Tools
or Samples
folder you want to run, open the project's Project Options, go to Run → Configurations → Default and add an environment variable called TOKEN
, then paste in the Personal Access Token for your Figma account.
Select MonoDevelop.Figma
in the target selector in the toolbar and run it. This will start a new Visual Studio for Mac instance with the extension enabled. Alternatively, you can run make
in the FigmaSharp source folder. This will generate a .mpack file that can be installed on other computers.
Select FigmaSharpApp
in the target selector in the toolbar and run it.
Keep calm and hack the planet.