# airbnb/react-sketchapp **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/airbnb-react-sketchapp).** 14,880 stars · 799 forks · TypeScript · MIT ## Links - GitHub: https://github.com/airbnb/react-sketchapp - Homepage: http://airbnb.io/react-sketchapp/ - awesome-repositories: https://awesome-repositories.com/repository/airbnb-react-sketchapp.md ## Topics `react` `react-renderer` `react-sketchapp` `sketch` `sketch-plugin` ## Description react-sketchapp is a design system automation tool that translates React components into native Sketch design layers. It functions as a custom renderer that maps a virtual component tree to a design canvas, allowing for the programmatic generation and updating of design files from source code. The project provides a framework for building custom design utilities and automation scripts by treating the visual canvas as a programmable target. It includes a system for fetching external data to populate design components, enabling the creation of high-fidelity mockups and data-driven prototypes. The toolset covers design system synchronization and shared asset management to maintain consistency between code and visual assets. It further supports the creation of specialized internal design tooling and the automation of repetitive visual tasks. ## Tags ### User Interface & Experience - [Code-to-Design Converters](https://awesome-repositories.com/f/user-interface-experience/code-to-design-converters.md) — Translates code-defined components into native design layers to maintain a single source of truth. ([source](http://airbnb.io/react-sketchapp/docs/guides/)) - [Design Tool Style Translators](https://awesome-repositories.com/f/user-interface-experience/css-to-native-style-translators/design-tool-style-translators.md) — Translates code-defined style properties into the attribute formats required by Sketch's internal model. - [React to Design Translations](https://awesome-repositories.com/f/user-interface-experience/design-component-managers/figma-component-kits/react-to-design-translations.md) — Translates React components into native Sketch design layers to synchronize code and design systems. - [Design System Synchronization Tools](https://awesome-repositories.com/f/user-interface-experience/design-system-synchronization-tools.md) — Synchronizes assets and specifications across projects by programmatically generating design files from source code. ([source](http://airbnb.io/react-sketchapp/docs/guides/docs/guides/data-fetching.html)) - [Design System Automation Tools](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/workflow-automation-tools/design-system-automation-tools.md) — Provides a programmatic way to generate and update design files from source code to maintain a single source of truth. - [Declarative Canvas APIs](https://awesome-repositories.com/f/user-interface-experience/declarative-canvas-apis.md) — Uses a component-based syntax to describe visual elements that are programmatically generated on a canvas. - [Design Component Data Injection](https://awesome-repositories.com/f/user-interface-experience/dynamic-ui-injection/component-prop-injection/design-component-data-injection.md) — Maps external data sources to component properties to automatically populate design elements with real-world content. - [Extensible Design Environments](https://awesome-repositories.com/f/user-interface-experience/extensible-design-environments.md) — Acts as a framework for extending design environments by treating the visual canvas as a programmable target. - [Data-Driven Prototyping Tools](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-authoring-software/design-and-prototyping-tools/data-driven-prototyping-tools.md) — Fetches external data and populates design components to create high-fidelity mockups and prototypes. - [Design Tools](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-authoring-software/design-tools.md) — Provides a framework for building specialized internal utilities by treating the design canvas as a programmable target. - [Shared Design Assets](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/design-system-documentation-strategy/shared-design-assets.md) — Organizes and synchronizes libraries of shared design elements to maintain consistency across large-scale projects. ([source](http://airbnb.io/react-sketchapp/docs/guides/docs/guides/)) - [Data-Driven Layouts](https://awesome-repositories.com/f/user-interface-experience/view-layouts/data-driven-layouts.md) — Injects real-world data into design components to create high-fidelity prototypes and realistic visual layouts. ### Part of an Awesome List - [Programmatic Design Generation](https://awesome-repositories.com/f/awesome-lists/devtools/sketch-plugins/programmatic-design-generation.md) — Programmatically generates and updates Sketch design files using React components to automate visual tasks. ### Programming Languages & Runtimes - [JavaScript-to-Native Bridges](https://awesome-repositories.com/f/programming-languages-runtimes/language-interoperability/interoperability/javascript-to-native-bridges.md) — Provides the communication layer between the JavaScript runtime and the native Sketch API. ### Software Engineering & Architecture - [DOM-to-Design Layer Mappings](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-schema-mapping/component-mappings/virtual-to-dom-mappings/dom-to-design-layer-mappings.md) — Translates a React component tree into a hierarchy of native Sketch design layers. ### Web Development - [React Renderers](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/rendering-engines/react-renderers.md) — Implements a custom renderer that targets Sketch design layers instead of a web browser. ### Development Tools & Productivity - [Canvas Workflow Automation](https://awesome-repositories.com/f/development-tools-productivity/canvas-workflow-automation.md) — Enables the creation of custom design tools and automation scripts by treating the design canvas as a programmable workspace. ([source](https://cdn.jsdelivr.net/gh/airbnb/react-sketchapp@master/README.md)) - [Data Injection](https://awesome-repositories.com/f/development-tools-productivity/data-injection.md) — Populates design components with live external data to create high-fidelity prototypes. ([source](http://airbnb.io/react-sketchapp/docs/guides/docs/examples.html))