Reusing Framer X Shared Colors on a Function Component

Colors.tsx

import * as React from 'react'
import { Stack, Frame } from 'framer'
import { colors } from './canvas'

export function Colors() {
	const [colorsTokens] = React.useState(() => {
		return Object.keys(colors).map(key => colors[key])
	})

	return (
		<Stack size={'100%'}>
			{colorsTokens.map((color, index) => {
				return <Frame key={index} size={24} background={color} />
			})}
		</Stack>
	)
}