microsoft / figmasharp

Create apps with Figma

FigmaSharp – Create apps with Figma

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.

Getting started

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.

Visual Studio extension

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.

FigmaSharp app and Visual Studio extension

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.

Building from source

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.

Visual Studio for Mac extension

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.

FigmaSharpApp

Select FigmaSharpApp in the target selector in the toolbar and run it.

Keep calm and hack the planet.

figmasharp's Issues

rendering: Rectangle not rounded from the inside

expected:

actual:

Figma to Gtk Code

extension: API token should be stored in Keychain

The sample app has a class that does this.

Implement common layer to view spec

https://github.com/netonjm/FigmaSharp/wiki/Figma-layers-to-views

Extension UX improvements

• Nest .designer.cs file inside base class file
• Implement updated dialog design
• Hook up Namespace field
• Hide window and show progress in Visual Studio status bar. "Bundling $ID…"

later:

• Fix beachballing (UI freezes, see #125)

Select a specific frame from Figma doc

Often a Figma file is a selection of pages, and you just want to use a single frame or window from it.

WPF UI Toolkit library basic support

Bundler tool

The bundler tool is a simple dialog that adds a Figma document to your project.

Mockup:

Figma to Xwt Code

Xwt UI Toolkit library basic support enhancement

rendering: Some text styles not implemented

• Underline
• Strikethrough
• Letter spacing
• Font weight
• Small text size

actual:

expected:

Investigate a11y properties as component layers

(this seems a bit easier to deal with as they're often long strings)

• Hylke: add group to every component

[MonoDevelop] View Selection in Renderer

Click in any view draws a rectangle in the current selected view.

We can use something similar like we do in the inspector.

New bundling model

• Remove ".FigmaPackages" and use default namespace

@netonjm

• Find the correct namespace to use automatically
• Figma documents should become References, create a toplevel "Figma" folder in project

• Figma reference context menu:

• Create "Bundle Figma Document Here" command to allow generating code at any location in the project:

• Keep track of generated code's "parent" Figma document through csproj metadata

• Menu structure:

@hbons Update the bundler tool design

• Design new UI for bundler tool
• Design update mode:

• "Namespace:" field to set manually, also set it in the manifest
• Add way to select a Figma reference to generate from

Constraints and resizing views

Metadata in generated comments

The generated code-behind file comment should show useful info about which Figma .json file was used for debugging and legal purposes:

• Document URL
• Document version
• Date and time
• Figma API version
• FigmaSharp version

add Disabled group in checkboxes/radios components

(i'll contact @vancura about this one)

Add more examples and better

More use cases, and include features like nativeControls and CustomConverters in all platforms

Follow export settings image layers or !image groups

@2x etc.

[MonoDevelop] Property panel for Renderer

Property panel to select views and modify properties from the selected object

Question: where does this fit in?

I'm having a bit of trouble understanding what the use case for this library is, so apologies in advance for the basic question. I do not currently use Figma but was looking at it as a potential option for mocking up some views before development.... so my question is how would this library fit into the overall workflow of going from design to development? (just at a high level)

rendering: Frame background colour not applied

Looks like the document background colour behind it shows instead.

expected:

actual:

Improve current name detection

• detect name quotes not only in first args
• detect different type of quotes

Preferences panel icon broken

Not sure what the cause of this is. @netonjm?

Mask rendering issues

Heyia,

There are some rendering issues from https://www.figma.com/file/RVChpzBOh6nlFQMjmXyLML/%E2%80%94-Color-Testing-%E2%80%94?node-id=17%3A134:

See the second row from bottom, it should look like:

Cheers!

Demo time checklist

Spec:

• Rebase components on Catalina doc: https://www.figma.com/file/Y9ByI8lazsLSfg3XqYGOKj/macOS-Components-%E2%80%93-Catalina?node-id=7%3A1788
• Implement label components:

• Fix button text size
• Fix checkbox text size
• Use single line mode on textfield
• Fix radio button cut off geometry
• Don't use custom fonts anywhere

Extension:

• Fix content not being added to window and fix junk classes being generated: https://www.figma.com/file/zV2VF7tEdzCJL2CRo6pprz/Breakpoints?node-id=0%3A1
• Use Document Title in solution nodes instead of the ID
• Document Title in manifest.json and use for autogeneration comment
• Use document version in autogeneration comment (or date if no label)
• Use namespace of the current app. (or at least use "Figma" instead of "FigmaSharp" to avoid conflicts)
• Only create classes for groups of type FRAME at the top level of the document
• Remove layers starting with "# " or "// " from the .json

Sample app:

• Fix beachballing (UI freezes)
• Fix "double" drawing of images on top of native controls

Svg to native views feature

Right now, we use the figma api to get all the custom shapes converted into png images. Although this approach the result is not accurate as we want. To fix this we should create our own library to parse this shapes into a real native views in each platform.

We can use maybe? : https://www.nuget.org/packages/NGraphics/

Localisation support

task: Move FigmaSharp.BACKEND to FigmaSharp/

Failed to do this, here as a todo item. :)
This would make the top level of the repo much cleaner.

Simplify getting started API

Should be able to create a native view from Figma document with a one liner (or two at most).

Investigate the possibility of outputting storyboard format

It might be preferred to sometimes generate storyboard format, as opposed to c#

Fix geometry for Cocoa components

Sometimes this is still wrong.

[MonoDevelop] Drag code snippets from a hierarchy tree to SourceEditor

Create a Pad with a tree of all elements loaded in figma File (remote or local). This pad it should drag and drop directly into the SourceEditor.

Required: #4

rendering: Shape sizes not accurate

Oval is rendered too small, and polygon too big.

expected:

actual:

Gtk UI Toolkit library basic support enhancement

FigmaSharpApp UX improvements

The FigmaSharpApp takes a Figma document URL and previews how it would be rendered using FigmaSharp.

To do:

• Page switcher
• Native controls preview
• Center Open dialog
• Larger preview window
• Center document in window (maybe add large minimum padding?)
• Show version history (depends on #49)
• Fix progress indicators
• Fix new window position
• Fix version/page switcher

Implement macOS components

https://github.com/netonjm/FigmaSharp/wiki/Behaviour,-Keywords-and-Syntax

Special behaviours:

high priority:

• Radios and checkboxes: respect checked state
• Radios: Make radio components in the same parent group part of the same group in code
• Buttons: respect Default (blue) button state
• Window: respect window size and scrollbars
• Textfield: respect Placeholder text

low priority:

• Use mini controls for the "Small" components

rendering: Line thickness not considered

Line width should be followed (2px in this case).

expected:

NRE in Extension project when no Figma Token is set

Move Figma Properties pad to regular Properties pad

Create an abstraction for view generation to share between platforms

Create a NuGet

Add API to list version history and get a specific version

Figma to Code

Create some converters or think how we can generate code from our models to copy/paste

Investigate how to handle templated lists

Currently, some figma designs have hard coded list items.

What is the process to template-ize the list so it doesn't render the content, but allows for MVVM/MVC integration?

Menu component to be used by PopUpButton

(I'll contact @vancura about this)

Xamarin.Forms UI Toolkit library basic support

Add a View hierarchy panel

Use single line mode on textfield

0.1 scenario

Designer

1. Designer creates a single Cocoa window with controls using the "macOS Components" library
2. Designer downloads the FigmaSharp app
3. Designer copies the Figma document URL and opens it with the FigmaSharp app
4. The app shows the design rendered with Cocoa, the designer checks for mistakes and reloads the document when changes are made

Developer

1. Developer receives a Figma document URL
2. Developer installs the FigmaSharp VSmac extension
3. Developer right-clicks the project they want to add the UI to and selects "Add -> Figma Document".
4. Developer selects "Cocoa" and "None" and clicks "Add"
5. The developer hooks up the UI with the exposed members as if it was a .xib file