Implementing toolkits

Toolkits

FigmaSharp uses Converter objects to translate Figma layers into views. Converters take in a FigmaNode, and return a native view object (this can be a control) and code.

NativeControlConverter is the base object to create new control converters with. Use this to derive a converter that can include logic that applies to all your other converters.

class MyBaseConverter : NativeControlConverter {}
class MyButtonConverter: MyBaseConverter {}

Controls

Create a list of names and native control types.

When FigmaSharps walks through the layers of a Figma document, a check is done on each converter's CanConvert() method whether the converter be used to convert the current node.

public override Type GetControlType(FigmaNode currentNode) => typeof(NSBox);

public override bool CanConvert(FigmaNode currentNode)
{
    currentNode.TryGetNativeControlType(out var value);

    return value == NativeControlType.Box ||
           value == NativeControlType.BoxCustom ||
           value == NativeControlType.Separator;
}

It' possible to use the same converter for different types of a Figma component.

protected override IView OnConvertToView(FigmaNode currentNode, ProcessedNode parentNode, FigmaRendererService rendererService)
{
    var box = new NSBox();
    return new View(box);
}

protected override StringBuilder OnConvertToCode(FigmaCodeNode currentNode, FigmaCodeNode parentNode, FigmaCodeRendererService rendererService)
{
    var code = new StringBuilder();
    return code;
}

It's a good idea to keep a list of constant strings for your toolkit's layer names:

static class ComponentString
{
	public const string TITLE = "Title";
        ...

	// States
	public const string STATE_REGULAR = "State: Regular";
	public const string STATE_DISABLED = "State: Disabled";
        ...
}