Hi 👋

I'm currently a figma and react/react-native user. The little startup my friends and I are working on have several UI primitives that we use and compose together to create more complex UI. Currently we're in a situation where

1. Our figma designs of our components get updated in figma and we have to go and update both our webapp and react-native app with the updates to those components.
2. Our components are updated in the webapp/react-native app and we have to go update the figma board to keep them in sync.

This wasn't much of an issue at first when we had 10 -30 components. But as our primitives got larger so did our "molecules" that are composed from primitives and updating all of them in figma and code is starting to become a full on task that is pretty tedious.

How can we leverage react-figma to mitigate this issue? We're not design or design-system experts by any means but this has been a pain point for us and really would prefer to create a component-library that we would import into our application and have things "just work".

We also use emotion for styling our webapp and react-native app so we're not quite sure how much of a barrier that is.

Would love any insight into this 🙏

Create styled-components examples using the react-primitives package for cross-platform components.

~(probably worth waiting for my react-primitives PR to be merged first, to avoid needing to use a fork).~

~(prettier fails on CI, but is passing locally, strange)~

~And please don't merge before the webpack-config PR is merged.~

Ready to merge now.

Related issues

#194

https://react-figma.now.sh/docs/styling.html

Props:

• borderColor

• borderTopColor

• borderRightColor

• borderBottomColor

• borderLeftColor

• borderWidth

• borderTopWidth

• borderRightWidth

• borderBottomWidth

• borderLeftWidth

react-figma already has transformBorderStyleProperties function.

Can be used Figma API (GeometryMixin):

strokes: ReadonlyArray<Paint>

and Yoga Layout:

setBorder(edge: YogaEdge, borderWidth: number): void;

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.

This is the basic example in your examples it has no dependencies nor dev dependencies so whenever i try to yarn install i get nothing plus if i do it manually i get a lot of errors . please add the dependencies.

Hi, I noticed that there's a missing step in your 'running' guide. Without starting webpack, Figma won't load the plugin.

Apologies if I've misunderstood. At least for me, I had to run this script before Figma would allow me to open the plugin via Plugins > Development > react-figma-boilerplate.

Context

For my use case, we're extending off of this PR which allowed Components to take in a style prop.

We want to leverage the new useXStyle hooks in order to:

• Create a new Color Style
• Apply the new Color style to a given component

This works fine for Views, but I noticed that this didn't work for Components.

Debugging

When digging deeper, I found out that this mixin is the problem. This mixin carries over the background prop from the component. Since it comes after geometryMixin (which is where the fillStyleId is initially carried over), I believe this background is taking precedence and fillStyleId is being ignored.

The fix(es)

As a fix, I'm just adding fillStyleId to also be carried over.

Another alternative could be to just change the order of the mixins, but that feels a bit fragile.

Testing

I rendered a Component that took in useFillPaintStyle, and saw that its fill color was linked to the Color Styles on the file:

Hello,

Thanks for the great job done on that project.

I'm actually experiencing a strange issue when using useTextStyle hook. For the same style the one that do not use the local style stored on Figma with the hook work as expected (using the correct font weight). The one with the hook fail with the following error in the console:

rpc.js:136 Uncaught (in promise) Error: in set_fontName: Cannot use unloaded font "SF Pro Display SemiBold". Please call figma.loadFontAsync({ family: "SF Pro Display", style: "SemiBold" }) and await the returned promise first.
    at callback (<anonymous>:859:25)
    at handleRpc (<anonymous>:800:7)
    at handleRaw (<anonymous>:774:5)
    at onmessage (<anonymous>:733:24)

Here the minimal example:

import React from 'react';
import { Frame, Page, StyleSheet, Text, useTextStyle } from 'react-figma';
import { FRAME_PRESETS } from 'react-figma/components/frame/Frame';

const style = StyleSheet.create({
  text: {
    fontFamily: 'SF Pro Display',
    fontSize: 20,
    fontWeight: '600',
  },
});

export default function FigmaApp() {
  const textStyle = useTextStyle(style.text, { name: 'header/h1' });

  return (
    <Page isCurrent name="Styleguide" style={{ flexDirection: 'row' }}>
      <Frame
        name="Typography"
        preset={FRAME_PRESETS.a4}
        style={{
          backgroundColor: 'white',
          marginRight: 48,
        }}
      >
        <Text style={style.text}>
          SF Pro Display without using local styles (and textStyleId)
        </Text>
        <Text style={textStyle}>
          SF Pro Display using local styles (and textStyleId)
        </Text>
      </Frame>
    </Page>
  );
}

When I remove the generated textStyleId key things works again ;-/ FYI all works as expected with Roboto. And I'm on Mac and have SF Pro Display and all his variants correctly installed.

Thanks for the help, 🙏

Edit 1: fontWeight: 700 (Bold) works well in both cases, it seems related to font variant naming Semibold on Figma, trying and failing to load SemiBold on the console

I can't find anything in the docs about using react-figma with simple HTML tags. Is there any way to use it without <View>, <Text>, e.g.? It would be really nice to use it with component libraries like react-bootstrap which are built upon <div>s, <span>s, etc.

Rendering a Group (regardless of its props) would throw an error:

Cannot add property constraints, object is not extensible

Looks like constraints aren't supported on GroupNode so this removes the constraintsMixin from the group renderer and constraints from the Group props type.

This changes the navbar logo and three feature images to white when dark mode is toggled. Also fixed img-alt not being displayed correctly and bumped deps.

Closes #258.

Hello, this PR is solving Issue #128. In this PR, I added different strict mode variables like: ✅ noImplicitAny ✅ noImplicitThis ✅ strictNullChecks ✅ strictPropertyInitialization ✅ alwaysStrict

It's really impressive what this project can do but what's the initial problem it solves? I'd want to use the project but I don't really see any use cases for it.

It would be useful to mention that on the website and in the project description in the first paragraph.

There's a "getting started" page but no page "why would you get started at all?".

The documentation describes how to work with component instances, but it seems that it does not account for components with variants (aka. component sets).

Is there a way to get an instance of a component set?

I want to control the state of my Figma canvas via the plugin UI, but can't figure out how. Now all the examples appear to be "headless", even the interactive example:

figma.showUI(__html__, { visible: false });