https://github.com/codyjasonbennett/device-models

🎨 A Figma plugin to create mockups with 3D device models.
https://github.com/codyjasonbennett/device-models

3d figma plugin react react-spring react-three-fiber threejs

Last synced: 3 months ago
JSON representation

🎨 A Figma plugin to create mockups with 3D device models.

• Host: GitHub
• URL: https://github.com/codyjasonbennett/device-models
• Owner: CodyJasonBennett
• License: mit
• Created: 2020-11-09T00:24:04.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-09-22T16:49:06.000Z (over 3 years ago)
• Last Synced: 2024-10-02T08:29:30.392Z (3 months ago)
• Topics: 3d, figma, plugin, react, react-spring, react-three-fiber, threejs
• Language: JavaScript
• Homepage: https://devicemodels.com
• Size: 59.3 MB
• Stars: 16
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Device Models

A Figma plugin to create mockups with 3D device models.

[![Site preview](/public/social-image.png)](https://devicemodels.com)

Create mockups with 3D device models. Customize the color, camera angle, and device model for your mockups. Includes models for the iPhone, Macbook Pro, iMac, and iPad with more models on the way for other devices.

How to use:

1. Run Device Models from the plugin menu

2. Choose a device model

3. Select any layer to render it on the device's screen. For best results select a layer that's close to the device's screen dimensions (or the same aspect ratio). If it's not exact that's fine, images will be placed similar to Figma's 'Fill' setting for image fills. To create a frame with the right dimensions click the "Create Empty Frame" button.

4. To change the camera angle select an angle preset or click and drag over the device. Alternatively, you can set an exact rotation in degrees on the right. You can also modify the rotation of the model itself there.

5. Choose a device color. If you have local color styles click the color swatch to choose one, or manually enter a hex code.

6. Click "Save as Image" to render the current view as an image layer in Figma.

## Install & run

Make sure you have nodejs and yarn installed. Install dependencies with:

```bash

yarn

```

Once it's done start up a local server with:

```bash

yarn start

```

To run get a production-ready build:

```bash

yarn build

```