According the figma component-node api, the Geometry-related properties are not included in component-node but geometryMixin has been implemented for component-node.

triggered by

style={{display: flex}}

After trying inserting new component between other components (re-hydration) uncaught error throws.

Table with compatibility information needed. Example:

Hi, just discovered this repo and am excited to see this be developed!

I was wondering whether it would be possible to tend towards using a React Native style API for the project? e.g. <View> as a generic core component API instead of <Rectangle> or <Circle>, etc. I've found with react-sketchapp that the Svg API acts as a really nice escape hatch for using shape-specific components if you need a <Circle> instead of <View style={{ borderRadius: '50%' }}> for some reason.

e.g.

src/svg.js

const Svg = {
  rect: RectangleRenderer,
  path: PathRenderer,
};

src/index.js

export { View, Text, Image };

export { Svg };

Also, regarding components like #20 , I feel that these should live in another library, and that react-figma can provide "internal hooks" to Figma specific components intended for library use.

e.g.

npm: react-primitives-shapes

const { View } from 'react-primitives';
const { Svg, Path } = require('react-primitives-svg');
const { shapes } = require('react-figma');

const Rectangle = (props) => <View style={{ display: 'flex' }} {...props} />;

const Star = Platform.OS === 'figma'
  ? shapes.Star 
  : (
    <Svg>
     <Path data="starhere..." />
    </Svg>
  );

module.exports = { Rectangle, Star };

This would help a lot with react-primitives support and with standardising React cross-platform usage to center around a core, shared API, with platform-specific as opt-in components. For me, a lot of the value of this project would be in using existing React Native or React Sketch.app codebases to render design systems/UI libraries to Figma.

Content:

• How to launch
• Link to Figma document with successfully added design system

Figma API

interface CornerMixin {
  cornerRadius: number | symbol
  cornerSmoothing: number
}

Figma API:

createVector(): VectorNode

react-hot-loader can used

Also, Now configuration needed.

Now yoga-layout worked at ui-thread, because trying to use yoga-layout at main-thread throws realm error. Main-thread and ui-thread communicate through async messages. It complicates the code.

<Text style={{fontFamily: "Helvetica", fontWeight: "bold"}} />

should be transformed to:

fontName: {family: "Helvetica", style: "bold"}

at transformTextStyleProperties

import * as React from 'react';
import { Page, Rectangle, Text, Frame } from 'react-figma';

// import { data } from './Helper/data';

const frameProps = {
    style: { paddingTop: 10, paddingBottom: 10, paddingLeft: 10, paddingRight: 10 }
};

const RenderData = () => {
    return (
        <Frame name="Column" {...frameProps}>
            <Text characters={'Space'} fontSize={14} />
        </Frame>
    );
};

export const App = () => {
    return (
        <Page name="New page">
            <RenderData />
        </Page>
    );
};

OutPut

I add fontSize 14 but its not showing 14 as you can font is too big,
And what's this error, is my code wrong here.

Figma API:

createStar(): StarNode

Groups:

• Geometry styles (background etc.)
• layout style properties
  • child properties (margin, width, etc.)
  • parent properties (padding, flexDirection, etc.)
• text style properties (color, etc.)

Figma API

createBooleanOperation(): BooleanOperationNode

Right now only direct width/height like <Frame width={100} /> will passed to YogaContextProvider.

Some animation example needed. Maybe just moving rectangle at page.

Animation libraries can used:

• react-spring
• framer/motion

Or, maybe, just useAnimation

Figma API:

  topLeftRadius: number
  topRightRadius: number
  bottomLeftRadius: number
  bottomRightRadius: number

Also, style support needed:

borderRadius: number
borderBottomLeftRadius: number
borderBottomRightRadius: number
borderTopLeftRadius: number
borderTopRightRadius: number

src/components/rectangle/__tests__/Rectangle.test.tsx can be used as an example.

Hi, it would be great to be able to use <Text> with children instead of having the characters prop.

I've implemented a basic form of this using react-reconciler in my react-xd project, maybe the code there may be of help:

https://github.com/macintoshhelper/react-xd/blob/master/src/renderer.js#L55

I think the main parts are:

  shouldSetTextContent: (type, props) => {
    return (
      typeof props.children === 'string' ||
      typeof props.children === 'number'
    );
  },

and

  createTextInstance: (
    text,
    rootContainerInstance,
    hostContext,
    internalInstanceHandle
  ) => {
    return createInstance(
      { type: 'text', props: { children: text } },
      rootContainerInstance
    );
    // return document.createTextNode(text);
  },

More work may be required to support nesting with text ranges (#32) though, React Native's reconciler may have some context on that.

Figma API:

createEllipse(): EllipseNode

Figma API:

group(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): FrameNode

Figma API:

  getRangeFontSize(start: number, end: number): number | symbol
  setRangeFontSize(start: number, end: number, value: number): void
  getRangeFontName(start: number, end: number): FontName | symbol
  setRangeFontName(start: number, end: number, value: FontName): void
  getRangeTextCase(start: number, end: number): TextCase | symbol
  setRangeTextCase(start: number, end: number, value: TextCase): void
  getRangeTextDecoration(start: number, end: number): TextDecoration | symbol
  setRangeTextDecoration(start: number, end: number, value: TextDecoration): void
  getRangeLetterSpacing(start: number, end: number): LetterSpacing | symbol
  setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void
  getRangeLineHeight(start: number, end: number): LineHeight | symbol
  setRangeLineHeight(start: number, end: number, value: LineHeight): void
  getRangeFills(start: number, end: number): Paint[] | symbol
  setRangeFills(start: number, end: number, value: Paint[]): void
  getRangeTextStyleId(start: number, end: number): string | symbol
  setRangeTextStyleId(start: number, end: number, value: string): void
  getRangeFillStyleId(start: number, end: number): string | symbol
  setRangeFillStyleId(start: number, end: number, value: string): void

Possible api

<Page isCurrent name="..." />

or

<Current>
    <Page name="..." />
</Current>

Loader keep running as shown at #5

I don't know how to we design React with Figma
Can you explain?

Figma API:

createSlice(): SliceNode

Yoga properties:

  setAlignContent(alignContent: Yoga$Align): void,
  setAlignItems(alignItems: Yoga$Align): void,
  setAlignSelf(alignSelf: Yoga$Align): void,
  setAspectRatio(aspectRatio: number): void,
  setBorder(edge: Yoga$Edge, borderWidth: number): void,
  setDisplay(display: Yoga$Display): void,
  setFlex(flex: number): void,
  setFlexBasis(flexBasis: number | string): void,
  setFlexBasisPercent(flexBasis: number): void,
  setFlexDirection(flexDirection: Yoga$FlexDirection): void,
  setFlexGrow(flexGrow: number): void,
  setFlexShrink(flexShrink: number): void,
  setFlexWrap(flexWrap: Yoga$FlexWrap): void,
  setHeight(height: number | string): void,
  setHeightAuto(): void,
  setHeightPercent(height: number): void,
  setJustifyContent(justifyContent: Yoga$JustifyContent): void,
  setMargin(edge: Yoga$Edge, margin: number): void,
  setMarginAuto(edge: Yoga$Edge): void,
  setMarginPercent(edge: Yoga$Edge, margin: number): void,
  setMaxHeight(maxHeight: number | string): void,
  setMaxHeightPercent(maxHeight: number): void,
  setMaxWidth(maxWidth: number | string): void,
  setMaxWidthPercent(maxWidth: number): void,
  setMeasureFunc(measureFunc: ?Function): void,
  setMinHeight(minHeight: number | string): void,
  setMinHeightPercent(minHeight: number): void,
  setMinWidth(minWidth: number | string): void,
  setMinWidthPercent(minWidth: number): void,
  setOverflow(overflow: Yoga$Overflow): void,
  setPadding(edge: Yoga$Edge, padding: number | string): void,
  setPaddingPercent(edge: Yoga$Edge, padding: number): void,
  setPosition(edge: Yoga$Edge, position: number | string): void,
  setPositionPercent(edge: Yoga$Edge, position: number): void,
  setPositionType(positionType: Yoga$PositionType): void,
  setWidth(width: number | string): void,
  setWidthAuto(): void,
  setWidthPercent(width: number): void,

FIgma API:

interface SceneNodeMixin {
  visible: boolean
  locked: boolean
}

Figma APi:

createLine(): LineNode

Figma API:

interface ConstraintMixin {
  constraints: Constraints
}

createNodeFromSvg API used for adding svg icons:

const svg: FrameNode = figma.createNodeFromSvg(item.content);
for (const child of svg.children) {
    icon.appendChild(child);
}
svg.remove();

Related to figma-and-production #2

After last updates YogaContextProvider used at design system example.

Two ways:

1. Make YogaContextProvider part of public api.
2. Hide YogaContextProvider inside renderer.

I just clone this repo, and load the plugin in figma, but its not rendering anything, it stuck at Running react-figma-bilerplate toast message

Figma API:

interface BlendMixin {
  opacity: number
  blendMode: BlendMode
  isMask: boolean
  effects: ReadonlyArray<Effect>
  effectStyleId: string
}

Also

style={{opacity: ...}}

support needed

Preset should set default width, height, and name.

As an example,

<Frame preset={FRAME_PRESETS.iPhoneX} />

equal to

<Frame name="iPhone X" width={375} height={812} />

The package should export FRAME_PRESETS variable, that contains all of presets available at Figma. It is proposed to use CamelCase for FRAME_PRESETS keys naming.

List of presets available at Figma:

Phone

• iPhone X 375x812
• iPhone 8 Plus 414x736
• iPhone 8 375x667
• iPhone SE 320x568
• Google Pixel 2 411x731
• Google Pixel 2 XL 411x823
• Android 360x640

Tablet

• iPad Mini / 9.7 768x974
• iPad Pro 10.5 834x1112
• iPad Pro 12.9 1024x1366
• Surface Pro 3 1440x990
• Surface Pro 4 1368x912

Desktop

• Desktop 1440 x 1024
• Macbook 1152x700
• Macbook Pro 1440x900
• Surface Book 1500x1000
• iMac 1280x720

Watch

• Apple Watch 42mm 156x195
• Apple Watch 38mm 136x170

Paper

• A4 595x842
• A5 420x595
• A6 297x420
• Letter 612x792
• Tabloid 792x1224

Social Media

• Twitter Post 1012 x 506
• Twitter Header 1500 x 500
• Facebook Post 1200x630
• Facebook Cover 820x312
• Instagram Post 1080x1080
• Instagram Story 1080x1920
• Dribbble Shot 400x300
• Dribbble Shot HD 800x600
• LinkedIn Cover 1584x396

Figma API:

interface ExportMixin {
  exportSettings: ExportSettings[]
  exportAsync(settings?: ExportSettings): Promise<Uint8Array> // Defaults to PNG format
}

Basic example also does not work.

This will allow to use Universal Rendering

react-primitives

Also, example needed.