Home
FigmaSharp – Create apps with Figma
To work with 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.
In Figma, create a new document and choose the component library for the UI toolkit you want to use by going to Layers panel → Assets tab → 📖 Team Library. It's important to stick to the same version number of the library for now, so ignore any updates.
| Toolkit | Component library | Version | Font family | Maintainer |
|---|---|---|---|---|
| Cocoa | FigmaSharp Toolkit: macOS Catalina | 1.2.0 – Spec | SF Pro | @hbons, @vancura |
| WPF | FigmaSharp Toolkit: WPF | 0.1 – Spec | Segoe UI | you? |
The libraries contain all the components that can be automatically translated to native UI controls by FigmaSharp. They also contain sets of commonly used font and colour styles. It's recommended to use these as much as possible to benefit from automatic theming and accessibility features. Also install the required fonts as you'll need them to edit text.
Now it's time to start designing. Get familiar with FigmaSharp's common conversion keywords. There may also be some specific keywords and behaviours for the UI toolkit (Cocoa, WPF) that you're using.
When you're ready, download the FigmaSharpApp for your OS. Open the app and enter the Figma URL and Personal Access Token and see your design come alive. Make sure everything everything works how you like it. Resize windows to make sure all layout constraints work properly. If you need to make some changes in Figma, just press the Refresh button to see the updates instantly.
Once you're happy you it's a good idea to save a titled version in Figma's version history so the frontend developer has a stable base to work from. In the Figma app, go to File → Save to Version History and enter a name.
Now you can hand over the Figma URL as well as the version name to the frontend developer (if that's not you, don't forget to give them access using the Share button).
Install Visual Studio and the FigmaSharp extension for your OS.
Go to Visual Studio → Preferences → Projects → Figma and enter your Personal Access Token.
Create a new UI project or open an existing one. Right click the Project in the Solution Pad and add a new Figma Package (Add → Figma Package…), and enter the Figma URL and version name that you received from your designer. Press Add Package.
The bundling tool downloads the Figma document with images, installs required dependencies, and generates UI code.
Right now, each toplevel frame in the document will get converted to its own view. For each view two files are generated that are part of the same (partial) class. MyView.designer.cs contains the template that draws the UI. Use MyView.cs to hook up the UI with your application logic. You'll be able to reference controls by their layer names.
Done. Time to review the results with your designer.
Since requirement always change, here's some things to keep in mind when making changes to the design. In this phase the designer and developer need to work closely together to keep the design and implementation in sync. No tool can fully replace designer-developer communication.
It's fine to keep working in the same Figma file during the iteration phase, but when your software product makes a release it's a good idea to duplicate and archive the Figma document (and name it properly) so it can always be reproduced.
Move existing components around instead of deleting and creating new ones to preserve internal IDs. Keep variable names the same. If you can't, make sure to inform the developer of big changes.
Always mark important milestones in the Figma version history so the developer can work from a stable base. This way you can keep iterating without disrupting the developer.
Keep the document structure as simple as possible. Avoid double-nested groups where it's not needed.
Make sure the top level of each page consists solely of groups or frames and avoid any loose objects. If you need a place to experiment, create a separate page and prefix its name with # so FigmaSharp knows to ignore it.
Don't override big parts of the design in the UI logic. Ask the designer to make the needed changes in the Figma document first. You can leave comments on a design using Figma's comment feature. Never change things in the generated UI files.
When there are updates to the design you can regenerate the UI files by right-clicking on a bundle in your project and selecting Figma → Refresh and Bundle.