Feat - Figma Icon Connect

[mattnolting]

Figma Code Connect Icons

Objectives

• Create directory structure
• Connect React to Figma icons
• Use Figma icon template
• Use Figma instances to swap the icons

Directory structure

packages/react-core/ 
├── codeConnect/
│   ├── components/
│   ├── icons/
│   ├── layouts
│   ├── __demos (later consideration)
│   └── __next (later consideration)
├── src/
│   ├── components/
│   └── ...
└── ...

Connect React icons to Figma icons

https://www.figma.com/code-connect-docs/react/#icons-as-react-components

// icon
figma.connect("my-icon-url", {
  example: () => IconHeart
})

// parent
figma.connect("my-button-url, {
  props: {
    Icon: figma.instance<React.FunctionComponent>("InstanceSwapPropName")
  },
  example: ({ Icon }) => <Button Icon={Icon} />
})

// renders in Dev Mode
<Button Icon={IconHeart} />

Figma Icon Template

https://www.figma.com/code-connect-docs/no-parser/

export default figma.code`${code}`

// format used for passing metadata e.g. making instance prop data available
export default { ...figma.code`${code}`, metadata: { __props } }\n`

Figma Instance Swapping

https://www.figma.com/code-connect-docs/template-api/#instancepropertyname-string-string--resultsection

const figma = require('figma')
const string = figma.currentLayer.__properties__.string('String Prop')
const boolean = figma.currentLayer.__properties__.boolean('Boolean Prop')
const instance = figma.currentLayer.__properties__.instance('Instance Prop')
const children = figma.currentLayer.__properties__.children(["Logic Child","Child 1","Child 2"])

export default figma.code`<Component
string={${string}}
boolean={${boolean}}
instance={${instance}}
children={${figma.code`${children}`}} />````

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.