Conversion and keywords - microsoft/FigmaSharp GitHub Wiki

Spec version: 0.1.1

Note: This page explains what FigmaSharp does to turn your Figma document into usable code/views. This behaviour is best explained with examples, so for the purpose of this we'll use the Cocoa toolkit. In the examples components are marked with a ❖ symbol and instances of a component with a 🔹.

When converting layers, FigmaSharp generally will try to retain all positions, sizes, and constraints. On top of that there's a small set of keywords and syntax to modify and tweak this behaviour.

FigmaSharp can convert Figma documents directly into views, or generate code. Converting directly to views is straightforward: what you see is what you get. So in this article we'll talk mainly about what FigmaSharp does to generate useful code.

• // and !skip
• !placeholder
• !content
• !image, !icon

Layers that are named are converted to private fields. Naming layers ensures that the converted object can be referenced by the developer. For this reason, always use valid C# variable names to name your layers. To name a layer, use quotation marks like this:

🔷 "MyNamedView"
    - "myRectangle"
    - text

public class MyNamedView : NSView
{
    private NSView myRectangle;
}

As you can see there is no text layer accessible to the developer, as it was not explicitly named using quotation marks.

Use CamelCase for components (e.g. "PreferencesWindow"). Use lowerCamelCase for instances (e.g. "cancelButton"). Use lowercase for layers that are decorative and don't have special meaning for conversion (e.g. "chrome" or "bg").

Components will be converted into type classes that can be instantiated.

❖ "MyComponent"
    - "rectangle"
    - "text"

This Figma component will convert to the following class that can be instantiated by the developer:

public class MyComponent : NSView
{
    private NSView rectangle;
    private NSTextField text;
}

You can tell FigmaSharp to leave out certain layers or pages. "Comment out" a layer or page by starting its name with // as if it were a line of code. This is useful when you have an "Experiments" or "Drafts" page in your document. Example:

- // group
    - layer 
    - layer

Use the !skip keyword to skip the layer during code generation. The affected layer will still show up in the preview app. This is useful when you're working with mock content.

Adding !placeholder will convert a container without its content. Because the empty container keeps its geometry and properties, this is useful for designers to reserve space for developers to place more complex views that can not be expressed in Figma itself. For example:

- !placeholder "MyNamedView" 
    - rectangle
    - text

Some components are able to hold content inside. In Figma, the standard containers are groups and frames. In FigmaSharp, some Figma 🔹 components can also hold content.

Here are some examples of content holding controls in the Cocoa toolkit:

🔹 Window
🔹 Box
🔹 TabView

Figma doesn't allow new objects to be placed inside instances of components. This is a problem if we want to design a window with content. So when FigmaSharp sees a container ⬦ instance placed as the last item inside a group/frame, it will treat everything in the !content group above it as content. For example:

- frame
    - !content
        - layer
        - layer
    ⬦ Window

Sometimes you want to create your own component that can have content. Add a !content frame to the component:

- 🔹 MyContainer
    - !content
    - layer
    - layer

FigmaSharp will automatically download all image layers as resources according to the layer's Export settings. If no export settings are defined the @1x and @2x values are assumed.

You can also treat the content of a group as if it was an image resource by prefixing !image. In this case you also need to provide a name:

- !image "myImage"
    - glyph

It's possible to provide an identifier or name to an image or icon known to exist on a system (for example the standard icon theme). In this case the NSComputer icon is looked up for the same dimensions of the placeholder image:

- !icon "NSComputer"
    - glyph

FigmaSharp will use the name of the layer as an ID to look up to correct icon resource. It is up to the toolkit converter to decide how to look up the image. For example in Cocoa it's done by looking up the icon with NSImage.ImageNamed("NSComputer").