davo

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 (

davo

Framer X

Designer/Developer Experience Pain Points

Code Components

• Classes as the only way to create Code Components to Framer X.

  • ES6 Classes are awesome but hardly the only way to code reusable components in React. If I wanted to create a stateless functional component there is no way for Framer X to view or create an instance of such component inside the Components panel.

• Examples on how to Extend a Framer X Class component (ie: PageComponent)

  • This might be solved with a little documentation effort. I’m doing that to understand the relationship between the core components of Framer X and external community driven components (FX/React/JS).

zachj0hnston

import * as React from "react";
import { Frame, PropertyControls, ControlType } from "framer";

export class Translate_Text extends React.Component {

    static defaultProps = {
        width: 150,
        height: 30,
        text: "Hello"
        language: "🇺🇸",

andrewliebchen

import React, {Component} from 'react';
import './App.css';

const cards = ['Card 1', 'Card 2', 'Card 3'];

const Card = props => (
  <div
    onClick={props.handleClick}
    className="Card"
    style={{transform: props.selected && 'scale(1.5)'}}>