Gitter Chat	Build Status

FigmaSharp converts Figma documents into .NET objects and provides the tools to turn them into working native UI views for desktop and mobile applications over the best known user interface toolkits. Free and Open Source software under the MIT LICENSE.

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.

This idea arises from the need to improve the process of generating views for platforms that do not have designer tools, where as a general rule the code behind is used to create the views and sometimes the results are difficult to adjust with the design specifications.

Basically, the library uses the documents generated by Figma, which is an advanced vector designer tool that provides an API to obtain the views through a webapi (json) with a custom data model.

The library processes that model with aview generation engine and applies basic code converters to convert that graphic model into real views depending on the platform.

The interesting thing about the tool is that the engine is very flexible and allows to inject logic when it performs that process, so depending on our need we can generate different results in addition to platforms. Also these documents can be used as a Storyboard and in them we can generate automatic window flows or obtain resources on demand.

The project includes basic support for Wpf, WinForms, Xamarin Forms, Xamarin.Mac (Cocoa) platforms, in addition to including many examples of use for both desktop, mobile or videogame applications.

To standardize the process of generating applications we have created a basic library of controls, on the one hand, the user must add our asset library of Figma Components and create your dream interface by painting.

Once the design is finished, the user only needs this document id to get all the data generated from his application and then the FigmaSharp library will do everything else.

See more here: https://github.com/netonjm/FigmaSharp/wiki

If you think FigmaSharp would be useful to you - if you'd use it yourself - please let us know what you'd like to see. Customer input like that can help shape what we build.

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.

Restore the external dependencies by running git submodule update --init --recursive.

To run the examples, open FigmaSharp.sln in Visual Studio for Mac. In each example project's Project Options, go to Run → Configurations → Default and add an environment variable called TOKEN, then paste in your Personal Access Token.

There are several ways to load Figma documents into your app:

• FigmaDocument.FromUrl – to load from a figma.com URL
• FigmaDocument.FromFile – to load from a local .figma file
• FigmaDocument.FromString – to load from raw data string

Here's how to do it with a URL:

using System;
using FigmaSharp;

namespace FigmaSharpExample
{
    static class Main
    {
        // Put your Figma token and URL here
        const string FIGMA_TOKEN = "13c44-b0f20d98-815c-48b7-83de-1f94504b98bd";
        const string FIGMA_URL = "https://www.figma.com/file/QzEga2172k21eMF2s4Nc5keY";

        static void Main (string [] args)
        {
            FigmaEnvironment.SetAccessToken (FIGMA_TOKEN);
            var document = FigmaDocument.FromUrl (FIGMA_URL);
        }
    }
}

This results in a FigmaDocument, which is a hierarchy of FigmaNodes, and some metadata. Browse the API documentation to learn more about everything you can do with a Figma document, .

This is where the real magic happens. Being able to use Figma documents in C# is nice enough, but we can go one step further and use them to draw native UI views.

Currently FigmaSharp only supports Cocoa using Xamarin.Mac, but others (e.g. WPF, Windows, WinForms) may be added later (contribute!).

FigmaSharp.Cocoa provides renderers and some helper methods to generate NSViews from Figma documents dynamically to use in your macOS apps.

• NSView.FromFigmaFile
• NSView.FromFigmaUrl
• NSView.FromFigmaString

using System;

using AppKit;
using FigmaSharp;
using FigmaSharp.Cocoa;

namespace CocoaExample
{
    public partial class ViewController : NSViewController
    {
        const string FIGMA_TOKEN = "13c44-b0f20d98-815c-48b7-83de-1f94504b98bd";
        const string FIGMA_URL = "https://www.figma.com/file/QzEga2172k21eMF2s4Nc5keY";
    
        public ViewController (IntPtr handle) : base (handle)
        {
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();
            
            FigmaEnvironment.SetAccessToken (FIGMA_TOKEN);
            
            List<FigmaImageView> figmaImageViews; 
            View = NSView.FromFigmaUrl (FIGMA_URL, out figmaImageViews);
            figmaImageViews.Load (FIGMA_URL);
        }
    }
}

Our views are now drawn natively, but what about actual working controls? Using a set of special Figma components, we can tell FigmaSharp.Cocoa.NativeControls what layers to render as real controls.

It's not always possible nor desirable to connect to figma.com to load your documents each time. Here's how you can bundle Figma documents and use them as resources using the FigmaFile API:

.figma files are essentially JSON files and are accompanied by a code-behind .figma.cs file that defines all the UI objects. Image files need to be named like their corresponding Figma object ID.

Make sure the name part of each file is the same and and their Build Action should be set to EmbeddedResource.

In your solution tree it should look something like this:

|
|---+ MyDialog.figma
|   |- MyDialog.figma.cs
|   |- MyDialog.cs
|
|---+ Resources/
|   |- icon.png
|   |- icon@2x.png
|

Let's take the MyDialog.figma file and render the view using Cocoa. We'll need the following two files:

// MyDialog.figma.cs

using System;
using AppKit;

public partial class MyDialog
{
    ContentView;
}

// MyDialog.cs

using System;

using FigmaSharp;
using FigmaSharp.Cocoa;

public partial class MyDialog : FigmaFile
{
    public MyDialog () : base ("MyDialog.figma")
    {
        Initialize ();
        Reload (includeImages: true);
    }
}

Here Initialize () sets FigmaFile.Document as a FigmaDocument.

Reload () takes the initialized FigmaDocument and images and creates a native NSView as FigmaFile.ContentView, which you can now use in your Cocoa app.

This process can be automated by using the bundler tool included with the…

The FigmaSharp.Tools folder contains some helpful tools for handling Figma files:

• Inspector – preview how your Figma document looks when rendered natively and copy snippets
• Code Generator – turns a Figma document into code
• Bundler – takes a figma.com URL and downloads the .figma file including all images and adds it to your project

This extension integrates the inspector and bundler directly into Visual Studio for Mac for ease of use.

Enjoy and hack the planet!