Skip to content

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

License

Notifications You must be signed in to change notification settings

macintoshhelper/react-xd

Repository files navigation

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.

npm npm

Inspired by react-sketchapp

Screenshot Preview

Getting Started

Requirements

Dependency Installation

Please refer to examples/colors for reference.

  1. Initialise a repository or folder
mkdir design-system && cd $_
npm init -y
  1. 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
  1. Install react-xd and the required external dependencies
npm install --save react-xd [email protected]

Code Setup

  1. 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!

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published