package designcompose.definition.element

Get desktop application:
View/edit binary Protocol Buffers messages

The background of a node

Used in: Stroke, view.NodeStyle, view.TextStyle

• oneof background_type

  • google.protobuf.Empty none = 1

  • ColorOrVar solid = 2

  • Background.LinearGradient linear_gradient = 3

  • Background.AngularGradient angular_gradient = 4

  • Background.RadialGradient radial_gradient = 5

  • Background.Image image = 6

  • google.protobuf.Empty clear = 7

    Clear all the pixels underneath, used for hole-punch compositing.

    DiamondGradient support possibly in the future.

A type of gradient where the colors transition along a circular path defined by a center point, an angle, and a scale.

Used in: Background

• float center_x = 1

• float center_y = 2

• float angle = 3

• float scale = 4

• repeated ColorStop color_stops = 5

A single color stop within a gradient.

Used in: AngularGradient, LinearGradient, RadialGradient

• float position = 1

• optional ColorOrVar color = 2

References an image via the key and the modifiers that will be used with it

Used in: Background

• string key = 1

  Instead of keeping decoded images in ViewStyle objects, we keep keys to the images in the ImageContext and then fetch decoded images when rendering. This means we can serialize the whole ImageContext, and always get the right image when we render.

• repeated modifier.FilterOp filters = 2

• optional modifier.AffineTransform transform = 3

• ScaleMode scale_mode = 4

• float opacity = 5

• optional string res_name = 6

A type of gradient where the colors transition smoothly along a straight line.

Used in: Background

• float start_x = 1

• float start_y = 2

• float end_x = 3

• float end_y = 4

• repeated ColorStop color_stops = 5

A type of gradient where the colors transition smoothly from a central point outwards in a circular pattern.

Used in: Background

• float center_x = 1

• float center_y = 2

• float angle = 3

• float radius_x = 4

• float radius_y = 5

• repeated ColorStop color_stops = 6

Defines how an image background is scaled to fit the background area.

Used in: Image

• SCALE_MODE_UNSPECIFIED = 0

• SCALE_MODE_FILL = 1

• SCALE_MODE_FIT = 2

• SCALE_MODE_TILE = 3

• SCALE_MODE_STRETCH = 4

Bounds of a rectangle

Used in: ScalableUiVariant

• optional ScalableDimension left = 1

• optional ScalableDimension top = 2

• optional ScalableDimension right = 3

• optional ScalableDimension bottom = 4

• optional ScalableDimension width = 5

• optional ScalableDimension height = 6

Representation of a variable collection. Every variable belongs to a collection, and a collection contains one or more modes.

Used in: VariableMap

• string id = 1

• string name = 2

• string default_mode_id = 3

• map<string, string> mode_name_hash = 4

  name -> id

• map<string, Mode> mode_id_hash = 5

  id -> Mode

Color represents a color value within a design, encoded as RGBA (Red, Green, Blue, Alpha) where each component is an 8-bit integer. Alpha determines opacity, with 255 being fully opaque and 0 fully transparent. Encoding each component to uint32, which uses variable-length encoding.

Used in: ColorOrVar, ColorOrVar.ColorVar, ShaderData, VariableValue

• uint32 r = 1

• uint32 g = 2

• uint32 b = 3

• uint32 a = 4

Holds either a direct color representation (e.g., RGBA values) or a reference to a color variable, providing flexibility in how you define colors.

Used in: Background, Background.ColorStop, modifier.BoxShadow.Shadow, modifier.TextShadow

• oneof ColorOrVarType

  • Color color = 1

  • ColorOrVar.ColorVar var = 2

Holds a reference to a design variable. Fallback is the node color value from figma.

Used in: ColorOrVar

• string id = 1

• optional Color fallback = 2

Used in: DimensionRect, layout.LayoutStyle

• oneof Dimension

  • google.protobuf.Empty undefined = 1

  • google.protobuf.Empty auto = 2

  • float points = 3

  • float percent = 4

Used in: layout.LayoutStyle

• optional DimensionProto start = 1

• optional DimensionProto end = 2

• optional DimensionProto top = 3

• optional DimensionProto bottom = 4

An event that causes one or more variants to change

Used in: ScalableUIComponentSet

• string event_name = 1

• string event_tokens = 2

• string from_variant_id = 3

• string from_variant_name = 4

• string to_variant_id = 5

• string to_variant_name = 6

Color represented using floats in the range of 0 to 1.

Used in: ShaderUniformValue, plugin.OverlayBackground

• float r = 1

• float g = 2

• float b = 3

• float a = 4

FontFeature refers to specific typographic settings within a typeface, such as ligatures (e.g., "fi" becoming a single glyph) or small capitals. These features can enhance the visual appearance and readability of text, providing additional stylistic options for designers.

Used in: view.NodeStyle, view.TextStyle

• string tag = 1

• bool enabled = 2

The width of a font as an approximate fraction of the normal width. Widths range from 0.5 to 2.0 inclusive, with 1.0 as the normal width.

Used in: view.NodeStyle, view.TextStyle

• float value = 1

Allows italic or oblique faces to be selected.

Used in: view.NodeStyle, view.TextStyle

• FONT_STYLE_UNSPECIFIED = 0

• FONT_STYLE_NORMAL = 1

  A face that is neither italic not obliqued.

• FONT_STYLE_ITALIC = 2

  A form that is generally cursive in nature.

• FONT_STYLE_OBLIQUE = 3

  A typically-sloped version of the regular face.

FontWeight specifies the visual thickness of a typeface. It's represented numerically, usually ranging from 100 (thin) to 900 (black). Common values include 400 (regular), 500 (medium), and 700 (bold).

Used in: view.NodeStyle, view.TextStyle

• optional NumOrVar weight = 1

Initially only support url. No nodeId hyperlink support.

Used in: view.NodeStyle, view.TextStyle

• string value = 1

A key frame that shows the given variant at the given frame

Used in: KeyframeVariant

• int32 frame = 1

• string variant_name = 2

A key frame variant that blends two or more variants

Used in: ScalableUIComponentSet

• string name = 1

• repeated Keyframe keyframes = 2

Determines the vertical spacing between lines of text.

Used in: view.NodeStyle, view.TextStyle

• oneof line_height_type

  • float pixels = 1

  • float percent = 2

Representation of a variable mode. Variables can have fixed values for each available mode

Used in: Collection

• string id = 1

• string name = 2

Holds either a numerical value (e.g., 100 for a font size) or a reference to a design variable. This allows for dynamic values that can adapt based on the current variable values.

Used in: FontWeight, ViewShape.RoundRect, ViewShape.VectorRect, view.NodeStyle, view.TextStyle

• oneof NumOrVarType

  • float num = 1

  • NumOrVar.NumVar var = 2

Holds a reference to a design variable. Fallback is the node float value from figma.

Used in: NumOrVar

• string id = 1

• float fallback = 2

Path represents a complex shape in a design, defined by a series of commands (e.g., move, line, curve) and associated numerical data. It determines the outline of graphical elements or UI components.

Used in: ViewShape.VectorArc, ViewShape.VectorPath, ViewShape.VectorRect

• bytes commands = 1

• repeated float data = 2

• Path.WindingRule winding_rule = 3

WindingRule determines how the interior of a self-intersecting or overlapping path is filled.

Used in: Path

• WINDING_RULE_UNSPECIFIED = 0

• WINDING_RULE_NON_ZERO = 1

  NonZero fills regions based on the direction of the path segments as they cross the ray.

• WINDING_RULE_EVEN_ODD = 2

  EvenOdd fills regions based on whether a ray drawn from a point crosses the path an even or odd number of times.

• WINDING_RULE_NONE = 3

Rectangle: Rectangle represents a rectangular region within a design, defined by its position (x, y coordinates) and dimensions (width, height).

Used in: view.View

• optional float x = 1

• optional float y = 2

• optional float width = 3

• optional float height = 4

Represents a dimension in pixels or percentage

Used in: Bounds

• oneof Dimension

  • float points = 1

  • float percent = 2

Data for the parent of a set of variants

Used in: ScalableUIData

• string id = 1

• string name = 2

• string role = 3

• string default_variant_id = 4

• string default_variant_name = 5

• repeated Event events = 6

• repeated KeyframeVariant keyframe_variants = 7

• repeated string variant_ids = 8

A generic data structure for scalable ui to represent a component set or variant

Used in: view.NodeStyle

• oneof data

  • ScalableUIComponentSet set = 1

  • ScalableUiVariant variant = 2

Data for a single variant of a component set

Used in: ScalableUIData

• string id = 1

• string name = 2

• bool is_default = 3

• bool is_visible = 4

• optional Bounds bounds = 5

• float alpha = 6

• int32 layer = 7

Details for the runtime shader

Used in: Stroke, view.NodeStyle

• string shader = 1

  string for runtime shader code

• optional Color shader_fallback_color = 2

  fallback color when runtime shader code isn't supported

• map<string, ShaderUniform> shader_uniforms = 3

  shader uniforms, name => ShaderUniform

Data for shader uniform, containing name, type and default value set from plugin.

Used in: ShaderData

• string name = 1

  name

• string type = 2

  type

• optional ShaderUniformValue value = 3

  shader uniform value

• bool ignore = 4

  If this shader uniform should be ignored. No action to set the uniform value. For images, we have imageResolution bundled to the image input. The uniform value will be ignored but the uniform is in list for type check.

Shader uniform value, currently support float, FloatColor and float array.

Used in: ShaderUniform

• oneof value_type

  • float float_value = 1

    uniform "type" is "float", "half" or "iTime".

  • ShaderUniformValue.FloatVec float_vec_value = 2

    uniform "type" is "float2", "float3", "float4", "half2", "half3" or "half4" in the plugin data.

  • FloatColor float_color_value = 3

    uniform "type" is "color3" or "color4" in the plugin data. Alpha would be ignored for "color3" when set uniform value to the runtime shader.

  • int32 int_value = 4

  • ShaderUniformValue.IntVec int_vec_value = 5

    uniform "type" is "int2", "int3" or "int4" in the plugin data.

  • ShaderUniformValue.ImageRef image_ref_value = 6

    uniform "shader" holds an image ref key

  • ShaderUniformValue.ImageBytes image_bytes_value = 7

    uniform "shader" holds an image bytes data. It is created for uniform value customization.

  • ShaderUniformValue.ImageResource image_resource_value = 8

    uniform "shader" holds an image resource id. It is created for uniform value customization.

Float array value for float2, float3, float4, half2, half3 and half4.

Used in: ShaderUniformValue

• repeated float floats = 1

Image bytes for image uniform(shader).

Used in: ShaderUniformValue

• bytes data = 1

ImageRef for image uniform(shader).

Used in: ShaderUniformValue

• string key = 1

• optional string res_name = 2

Image resource for image uniform(shader).

Used in: ShaderUniformValue

• uint32 resource_id = 1

Int array value for int2, int3 and int4.

Used in: ShaderUniformValue

• repeated int32 ints = 1

Size encapsulates the dimensions of an element, expressed as width and height values. These values typically represent pixels or density-independent pixels (dp), allowing for consistent sizing across different screen densities.

Used in: layout.LayoutStyle, view.NodeStyle

• float width = 1

• float height = 2

A stroke is similar to a border, except that it does not change layout (a border insets the children by the border size), it may be inset, centered or outset from the view bounds and there can be multiple strokes on a view.

Used in: view.NodeStyle

• StrokeAlign stroke_align = 1

• optional StrokeWeight stroke_weight = 2

• repeated Background strokes = 3

• optional ShaderData shader_data = 4

  Runtime shader from the shader plugin as stroke. When shader is present, strokes will not be drawn.

How is a stroke aligned to its containing box?

Used in: Stroke

• STROKE_ALIGN_UNSPECIFIED = 0

• STROKE_ALIGN_INSIDE = 1

  The stroke is entirely within the containing view. The stroke's outer edge matches the outer edge of the containing view.

• STROKE_ALIGN_CENTER = 2

  The stroke is centered on the edge of the containing view, and extends into the view on the inside, and out of the view on the outside.

• STROKE_ALIGN_OUTSIDE = 3

  The stroke is entirely outside of the view. The stroke's inner edge is the outer edge of the containing view.

Stroke weight is either a uniform value for all sides, or individual weights for each side.

Used in: Stroke

• oneof stroke_weight_type

  • float uniform = 1

    One weight is used for all sides.

  • StrokeWeight.Individual individual = 2

Individual weights for each side (typically only applied on boxes).

Used in: StrokeWeight

• float top = 1

• float right = 2

• float bottom = 3

• float left = 4

Allows underline or strikethrough to be selected.

Used in: view.NodeStyle, view.TextStyle

• TEXT_DECORATION_UNSPECIFIED = 0

• TEXT_DECORATION_NONE = 1

• TEXT_DECORATION_UNDERLINE = 2

• TEXT_DECORATION_STRIKETHROUGH = 3

Representation of a Figma variable. We convert a figma_schema::Variable into this format to make the fields a bit easier to access.

Used in: VariableMap

• string id = 1

• string name = 2

• bool remote = 3

• string key = 4

• string variable_collection_id = 5

• Variable.VariableType var_type = 6

• optional Variable.VariableValueMap values_by_mode = 7

Variable Types

Used in: Variable

• VARIABLE_TYPE_UNSPECIFIED = 0

• VARIABLE_TYPE_BOOL = 1

• VARIABLE_TYPE_NUMBER = 2

• VARIABLE_TYPE_TEXT = 3

• VARIABLE_TYPE_COLOR = 4

Each variable contains a map of possible values. This data structure helps keep track of that data and contains functions to retrieve the value of a variable given a mode.

Used in: Variable

• map<string, VariableValue> values_by_mode = 1

Stores variable mappings

Used in: DesignComposeDefinition

• map<string, Collection> collections_by_id = 1

  ID -> Collection

• map<string, string> collection_ids_by_name = 2

  Name -> ID

• map<string, Variable> variables_by_id = 3

  ID -> Variable

• map<string, VariableMap.NameIdMap> variable_name_id_maps_by_cid = 4

  Collection ID -> [Name -> ID]

Maps Collection names to IDs

Used in: VariableMap

• map<string, string> m = 1

Holds the value of a variable, whichever type it is.

Used in: Variable.VariableValueMap

• oneof Value

  • bool bool = 1

  • float number = 2

  • string text = 3

  • Color color = 4

  • string alias = 5

Vector defines a two-dimensional geometric vector, consisting of x and y components. Vectors are fundamental for representing spatial relationships and performing geometric transformations within a definition.

Used in: interaction.Action.Node

• float x = 1

• float y = 2

Represents the geometric shape of a visual element, such as a rectangle, ellipse, or a custom path. It determines the boundaries of the element and influences how it is rendered and interacted with within a design.

Used in: view.ViewData.Container

• oneof shape

  • ViewShape.Box rect = 1

  • ViewShape.RoundRect round_rect = 2

  • ViewShape.VectorPath path = 3

  • ViewShape.VectorArc arc = 4

  • ViewShape.VectorRect vector_rect = 5

A container for other objects. Equivalent to a Compose Box or a Figma Frame

Used in: ViewShape

• bool is_mask = 1

A rounded rectangle

Used in: ViewShape

• repeated NumOrVar corner_radii = 1

  Should have exactly four corners

• float corner_smoothing = 2

• bool is_mask = 3

Defines the appearance of the stroke's end points (e.g., round, square).

Used in: VectorArc, VectorPath

• STROKE_CAP_UNSPECIFIED = 0

• STROKE_CAP_NONE = 1

• STROKE_CAP_ROUND = 2

• STROKE_CAP_SQUARE = 3

• STROKE_CAP_LINE_ARROW = 4

• STROKE_CAP_TRIANGLE_ARROW = 5

• STROKE_CAP_CIRCLE_FILLED = 6

• STROKE_CAP_DIAMOND_FILLED = 7

  Not supported

Represents a complex arc shape within a design.

Used in: ViewShape

• repeated Path paths = 1

  The outer path defining the overall shape of the arc.

• repeated Path strokes = 2

  An optional inner path used for creating an outline or stroke effect.

• StrokeCap stroke_cap = 3

• float start_angle_degrees = 4

• float sweep_angle_degrees = 5

• float inner_radius = 6

• float corner_radius = 7

• bool is_mask = 8

A vector path

Used in: ViewShape

• repeated Path paths = 1

• repeated Path strokes = 2

• StrokeCap stroke_cap = 3

• bool is_mask = 4

A shape defined by multiple paths, with potentially rounded corners

Used in: ViewShape

• repeated Path paths = 1

• repeated Path strokes = 2

• repeated NumOrVar corner_radii = 3

  Exactly 4

• bool is_mask = 4