macintoshhelper / react-xd

Render React components to Adobe XD. Build design systems and libraries from your code.

React XD

Render React components to Adobe XD. This can be used for React cross-platform UI libraries and for creating design systems. The (incomplete) API is based off React Native/react-primitives

This is a proof of concept for testing and feedback purposes. Please do not use in production systems.

Inspired by react-sketchapp

Getting Started

Requirements

• Adobe XD (Free, requires sign-up)
• Node.js & npm (can install with nvm)

Dependency Installation

Please refer to examples/colors for reference.

1. Initialise a repository or folder

mkdir design-system && cd $_
npm init -y

2. npm install your developer dependencies

npm install --save-dev @adobe/xdpm @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-flow @babel/preset-react babel-loader webpack webpack-cli

3. Install react-xd and the required external dependencies

npm install --save react-xd [email protected]

Code Setup

4. Refer to examples/colors for the webpack setup. You need a manifest.json and main.js entry point for the Adobe XD plugin. You need a build system such as webpack to compile the jsx with Babel into main.js

src/main.js example:

import { render, Document, View, Text } from 'react-xd';

const App = () => (
  <Document>
    <Artboard
      name="Artboard"
      style={{
        height: 640,
        width: 360,
        flexDirection: 'row',
      }}
    >
      <View
        style={{
          width: 360,
          height: 100,
          backgroundColor: 'purple',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Text style={{ color: 'white' }}>
          Hello World!!!
        </Text>
      </View>
    </Artboard>
  </Document>
);

function renderToXd(selection, documentRoot) {
  documentRoot.removeAllChildren(); // Resets document

  return render(<App />, { selection, documentRoot });
}


export const commands = {
  render: renderToXd,
  test: () => {}, // Hack to make XD show a menu with the render option instead of a single button
};

Credit

• react-sketchapp – inspired this project, and some bits of code are borrowed from it.
  • MIT License
  • Copyright (c) 2018 Airbnb

Contributing

Please post an issue offering any feedback or help! Thanks!

react-xd's Issues

React XD | Feature Roadmap [WIP]

This is currently a proof of concept project. It can be used for some simple features, but has a lot of work to be done to make it useful as a React Primitives/React Native app target.

A maintainable CSS to Adobe XD API abstraction layer is needed, and a better layout solution. yoga-layout will not run in Adobe XD's JavaScript execution environment due to nbind's use of eval issue, so I have resorted to using the unmaintained css-layout library for now.

There are some issues with Text flexbox layout.

TODO (WIP issue)...

React Reconciler architecture discussion

A more scalable way of architecting this project could be to use react-reconciler to build a JSON tree, which is then passed through to a walk function which renders to XD outside of the React cycle.

The JSON tree generation could even be parallelised in a separate process to speed up rendering, and would then allow for using yoga-layout, etc.

Group nesting not working

This is more an issue with Adobe XD, but group nesting is broken. This is blocking development on the View component system, which is an integral part of this repo.

The Adobe XD scenegraph doesn't let you create a new group with children, but requires you to add the children to the document root, select them with commands, then create a group, but this doesn't appear to work when one of the children is a group.

I'd love to know if this is just a limitation in the Adobe XD platform API, or if there is a way around this.