Toolkit: Cocoa

Make sure to read how to turn Figma layers into views first to get a basic understanding about how FigmaSharp renders views. This page will build on top of that.

Spec version: 0.1

Container views

Cocoa has these special kinds of container views:

🔹 Window
🔹 Sheet
🔹 Popover

Windows

A Properties group inside a component shows customization options that can be set or toggled. Hide/show layers to disable/enable these properties an example for a 🔹 Window:

🔹 Window
    - Properties
        👁 close
        👁 min
        👁 max
        🏷 title
        👁 modal
        👁 resizable
        👁 centered
        👁 transparent

Alert

An Alert is a very common composition of controls.

|
+---+ Alert
|   |---- image "Icon"
|   |---- text "Message"
|   |---- text "Information"
|   |---+ "Accessories"
|   |---  🔹 Checkbox "Suppression"
|   |---+ "Response Buttons"
|   |   |-  🔹 Button
|   |   |-  🔹 Button
|   |---  🔹 Window
|

This is convenience group that gets translated into an Alert with all its properties. Use "Accessories" to add your custom controls.

Popover

🔹 Popover has different component variations depending on the orientation of the balloon. Use the one you want depending on which side of the balloon you'd like to be anchored.

Controls

Some controls have Small and Large variations. These work exactly the same as their standard counterparts.

Buttons

🔹 Button

🔹 Pop Up Button
🔹 Pull Down Button

🔹 Checkbox
🔹 Radio

🔹 Checkbox and 🔹 Radio have 👁 On / 👁 Off groups inside to set its default state.

🔹 Radio components placed in the same group modify the same option.

Fields

🔹 Textfield
🔹 Multiline Textfield
🔹 Combo Box

The 🏷 Placeholder layer contains the placeholder text shown when no text is in the field.

Tables

🔹 Table

Indicators

🔹 Progress Bar
🔹 Progress Spinner

🔹 Progress Bar has a 👁 Indeterminate layer to reflect that state.

Styles

Fonts

🏷 Interactive Label/Standard
🏷 Interactive Label/Small
🏷 Interactive Label/Large
🏷 Non-interactive Label/Standard
🏷 Non-interactive Label/Small

Colours

Every colour you pick from the colour styles will be converted to a named colour value on macOS. For example, Text/Label Secondary is turned into NSColor.NSSecondaryLabelColor, and System/Green becomes NSColor.SystemGreen.

Images and Icons

This mainly specifies the geometry and constraints. A lookup is done for a matching NSImage on the system. This can also be overridden in code.

- image "NSComputer"

Text decoration and links

- label 1:https://www.microsoft.com/ 2:https://www.figma.com/

FigmaSharp will automatically replace underlined text with clickable links.