Structuring design system with react-figma

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 🙏

[macintoshhelper]

Hi, to share code between web, React Native and React Figma, I would recommend building a React Native/Primitives component library with react-primitives (together with @emotion/primitives if you’d like to use Emotion). This can be in a separate directory, or bundled with Rollup – creating a build for each platform using platform extension cascading. Here’s an example of a cross-platform Rollup config: https://github.com/elemental-design/elemental-react/blob/master/rollup.config.js . You may find that Webpack plugin equivalents don’t exist for Rollup though (I built rollup-plugin-mdx because of this) – and Rollup is generally considered better than Webpack for npm packages that will be consumed by a parent app. You’d want to make sure packages like emotion/styled-components are marked as external too and only installed in the entrypoint.

You can use Webpack aliasing too, which is a pattern commonly used with react-native-web, but this will be effectively untyped (e.g. react-figma is unlikely to be exporting a <FlatList> component, but TypeScript may not warn you about this).

So long as your primitive UI components render the same cross-platform, you can build UIs with them that remain cross-platform.

Here’s one pattern that could be used: https://github.com/elemental-design/primer-components/blob/master/src/Button.js

With a styled-components (or can be emotion) polyfill to make styled.div work: https://github.com/elemental-design/primer-components/blob/master/figma/src/styled.js . Or can just use react-primitives and react-native-web, there may be issues with Emotion SSR though with react-native-web.

Getting it production ready may be some work though (especially if you want to use SSR, code splitting, etc).

[ilyalesik]

@leggomuhgreggo I sent you invite. 🙌