Index

• Component libraries
• Components
• Groups
• Color styles
• Text styles

Component libraries

Toolkit	Component library	Version	Font family	Maintainer(s)
macOS Catalina	FigmaSharp Toolkit: macOS Catalina	1.2.0	SF Pro	@hbons, @vancura
macOS Big Sur WIP	FigmaSharp Toolkit: macOS Big Sur	2.0.0	SF Pro	@hbons, @vancura

Components

When a component is described as "accepting content" it means that it can be used together with the !content keyword to place other components inside of it.

Layer names inside components using Sentence Case have functional meaning. Changes made to these layers will affect how the component is converted. Layer names using lower case are decorative.

• [todo] Alert
• Box
  • Box/Custom
• Button
  • Button/Help
  • Button/RoundRect
  • Button/Symbol
• CheckBox
• ColorWell
• ComboBox
• [todo] DisclosureView
• Label
  • Label/Group
  • Label/Secondary
  • Label/Header
• Radio
• PopUpButton
  • PopUpButton/PullDown
• ProgressIndicator
  • ProgressIndicator/Bar
  • ProgressIndicator/Circular
• Slider
  • Slider/Circular
  • Slider/Linear/Vertical
  • Slider/Linear/Horizontal
• SearchField
• SegmentedControl
• Separator
  • Separator/Horizontal
  • Separator/Vertical
• Stepper
• Switch
• TextField
• TextView
• [todo] TableView
• [todo] TabView
• Window
  • [todo] Window/Sheet
  • [todo] Window/Popover

🔷 Alert

[todo]

🔷 Box

This component can be used for grouping components or as decoration. The Title text layer can be changed or hidden.

Resizable: horizontally and vertically Accepts content: Yes

Introduced in FigmaSharp 1.0

🔷 Box/Custom

This is the recommended component for drawing custom layouts. The Fill and Stroke values of the bg layer can be changed to a different color style or fixed color value.

Resizable: horizontally and vertically Accepts content: Yes

Introduced in FigmaSharp 1.0

🔷 Button, 🔷 Button/RoundRect

Set the button's state by unhiding the appropriate State: layer group. The Title text layer can be changed.

Resizable: horizontally Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Button/Help

Set the button's state by unhiding the appropriate State: layer group. The text layer of this button cannot be changed.

Resizable: No Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Button/Symbol

Use this component when you need a clickable icon. Change the Symbol text layer to a symbol from Apple's SF Symbols app. The font style and color style of this layer can also be changed.

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 ColorWell

The Fill of the Value layer can be changed to a different color style. This color style will be the default value for the ColorWell control.

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 ComboBox

The Title text layer can be changed.

Resizable: horizontally Accepts content: No

Introduced in FigmaSharp 1.0

🔷 DisclosureView

[todo]

🔷 Label

The text style of the Title layer can be changed to a different text style. The Title layer may also be left empty or hidden.

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Label/Group, 🔷 Label/Header

See 🔷 Label.

Notes: The color of the Title layer can be changed to a different color style or fixed color value. The font style of this of component is fixed.

🔷 Label/Secondary

See 🔷 Label.

Notes: The font and color styles of this component are fixed.

🔷 PopUpButton

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 PopUpButton/PullDown

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 ProgressIndicator/Bar

The Style: Determinate or Style: Indeterminate can be unhidden to set the respective bar style.

Resizable: horizontally Accepts content: No

Introduced in FigmaSharp 1.0

🔷 ProgressIndicator/Circular

The Style: Determinate or Style: Indeterminate can be unhidden to set the respective circle style.

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Radio

Radios placed inside the same group will be considered related (only one of them can be selected at a time). The text style of the Title layer can be changed to a different text style. The Title layer may also be left empty or hidden.

Resizable: horizontally Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Slider/Circular

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Slider/Linear/Vertical

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Slider/Linear/Horizontal

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 SearchField

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 SegmentedControl

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Separator/Horizontal

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Separator/Vertical

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Stepper

Resizable: No Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Switch

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 TextField

Title, Placeholder, Password

Resizable: horizontally Accepts content: No

Introduced in FigmaSharp 1.0

🔷 TextView

Text

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 TableView

[todo]

🔷 TabView

Resizable: horizontally and vertically Accepts content: No

Introduced in FigmaSharp 1.0

🔷 Window

[close], [min], [max], [title], [resize]

Resizable: horizontally and vertically Accepts content: Yes

Introduced in FigmaSharp 1.0

🔷 Window/Sheet

See 🔷 Window.

🔷 Window/Popover

See 🔷 Window.

Groups

Groups or frames are converted to a View. Groups or frames with an AutoLayout are converted to a StackView.

Color styles

Use the default set of named color styles to customize components that support it, such as 🔷 Label, 🔷 Box/Custom, and 🔷 Button/Symbol. These color styles are converted to the NSColor with the same name. By keeping to the named color styles a layout benefits from automatic theming by macOS.

• Black, White

• System/Red, System/Green, System/Blue, System/Orange, System/Yellow, System/Brown, System/Pink, System/Purple, System/Teal, System/Indigo, System/Gray

• Text/Text, Text/Label, Text/Label Secondary, Text/Label Tertiary, Text/Label Quaternary, Text/Link, Text/Placeholder, Text/Window Frame, Text/MenuItem Selected, Text/Control Alternate Selected, Text/Header, Text/Selected, Text/Selected Unemphasized, Text/Control, Text/Control Selected, Text/Control Disabled

• Chrome/Text BG, Chrome/Text Selected BG, Chrome/Text Selected Unemphasized BG, Chrome/Window BG, Chrome/Under Page BG, Chrome/Control BG, Chrome/Content Selected BG, Chrome/Content Selected Unemphasized BG, Chrome/Content Alternating BG, Chrome/Control, Chrome/Control Selected, Chrome/Control Accent

• Misc/Keyboard Focus Indicator, Misc/Find Highlight

• Textfield/Background, Textfield/Stroke

Text styles

• Label
• Label Disabled
• Label Small
• Label Small Disabled
• Label Large
• Label/Group
• Label/Header
• Label/Link
• Label/Link Small