CodeTea.io
Figma components and functions

Figma components and functions

Name Figma layers with CodeTea syntax to turn them into components (NameComponent:::NameGroup), component text properties (NameProperty:::NameGroup) and separate render functions (NameGroup;;;NameFunction) in the exported code.

1. Setting components

Figma components and functions – Setting components: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Syntax:NameComponent:::NameGroup
    orSyntax:NameComponent/::NameGroup
    orSyntax Component:NameComponent
    Example:ButtonGradient:::Group1

2. Setting properties of component

Figma components and functions – Setting properties of component: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Your component
  2. Syntax:NameProperty:::NameGroup
    orSyntax:NameProperty/::NameGroup
    Example:propLabel:::Text1
    Note: Only set property for TEXT

3. Setting functions

Figma components and functions – Setting functions: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Syntax:NameGroup;;;NameFunction
    orSyntax:NameGroup/;;NameFunction
    Example:Group2;;;renderBody