https://github.com/kristinbaumann/react-sketchapp-example-responsive

Render components to different screen sizes in Sketch
https://github.com/kristinbaumann/react-sketchapp-example-responsive

design design-tools flexbox react react-sketchapp sketch

Last synced: about 2 months ago
JSON representation

Render components to different screen sizes in Sketch

• Host: GitHub
• URL: https://github.com/kristinbaumann/react-sketchapp-example-responsive
• Owner: kristinbaumann
• Created: 2017-11-16T08:29:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-16T20:44:45.000Z (over 7 years ago)
• Last Synced: 2025-03-26T06:22:35.421Z (2 months ago)
• Topics: design, design-tools, flexbox, react, react-sketchapp, sketch
• Language: JavaScript
• Homepage:
• Size: 542 KB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Sketchapp Example with responsive layout (flexbox)

Test components with different screen sizes in Sketch

![react-sketchapp-example-responsive result](https://github.com/kristinbaumann/react-sketchapp-example-responsive/blob/master/img/screenshot.png)

Tested with Sketch v.47.1

Built with React Sketchapp Starter Kit.

Idea inspired from https://airbnb.design/painting-with-code/.

## Usage

* Clone this repository

    ```bash

    git clone [email protected]:kristinbaumann/react-sketchapp-example-responsive.git project-name

    cd project-name

    rm -rf .git

* Install npm dependencies

    ```bash

    npm install

    ```

* Open Sketch with a new project

* Render the React code

    ```bash

    npm run render

    ```

* View the result in Sketch