├── .gitignore
├── tsconfig.json
├── manifest.json
├── package.json
├── ui.html
├── README.md
├── code.ts
└── code.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | code.js


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "target": "es6",
4 |     "lib": ["es6"],
5 |     "typeRoots": ["./node_modules/@types", "./node_modules/@figma"]
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Screenshot-Resizer",
3 |   "id": "1107993996626134259",
4 |   "api": "1.0.0",
5 |   "main": "code.js",
6 |   "editorType": ["figma"],
7 |   "ui": "ui.html"
8 | }
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Screenshot-Resizer",
 3 |   "version": "1.0.0",
 4 |   "description": "Your Figma Plugin",
 5 |   "main": "code.js",
 6 |   "scripts": {
 7 |     "build": "tsc -p tsconfig.json",
 8 |     "start": "tsc: watch -tsconfig.json"
 9 |   },
10 |   "author": "",
11 |   "license": "",
12 |   "devDependencies": {
13 |     "@figma/plugin-typings": "^1.49.0",
14 |     "@types/node": "^17.0.33",
15 |     "typescript": "^4.7.4"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/ui.html:
--------------------------------------------------------------------------------
 1 | <h2>Rectangle Creator</h2>
 2 | <p>Count: <input id="count" value="5"></p>
 3 | <button id="create">Create</button>
 4 | <button id="cancel">Cancel</button>
 5 | <script>
 6 | 
 7 | document.getElementById('create').onclick = () => {
 8 |   const textbox = document.getElementById('count');
 9 |   const count = parseInt(textbox.value, 10);
10 |   parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*')
11 | }
12 | 
13 | document.getElementById('cancel').onclick = () => {
14 |   parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
15 | }
16 | 
17 | </script>
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Frame 8](https://user-images.githubusercontent.com/45830699/183249361-8a8f62d8-d671-41c9-81af-24ee8cd20e05.png)
 2 | 
 3 | [Screenshot Resizer](https://www.figma.com/community/plugin/1107993996626134259) is a Figma Plugin that allows you to downscale your screenshots from physical size to logical size. Screenshot Resizer is able to handle multiple selections and downscale to their logical size at the same time.
 4 | 
 5 | Why would we need to have a logical size? We design by using the logical sizes of the devices and on Figma under the Prototype tab all the devices are located with their logical sizes. When you need to import a screenshot, you do not need to downscale manually your screenshot according to the device's scale factor anymore. 
 6 | 
 7 | Select the screenshot frame and run the plugin, enjoy! 
 8 | 
 9 | You may download the plugin from [here.](https://www.figma.com/community/plugin/1107993996626134259)
10 | 
11 | ## Objective 
12 | 
13 | When developing a mobile product, it is essential to have the outcome matching with the design. By this Figma Plugin, you will be able to check easily your device / simulator screenshot with the design on Figma. 
14 | 
15 | ## Installation
16 | 
17 | This plugin uses Typescript and NPM, two standard tools in creating JavaScript applications.
18 | 
19 | First, download Node.js which comes with NPM. This will allow you to install TypeScript and other
20 | libraries. You can find the download link here:
21 | 
22 |   https://nodejs.org/en/download/
23 | 
24 | Next, in the directory of your plugin, get the third party libraries by using the command:
25 | 
26 |   ```npm install```
27 | 
28 | ## How to run the plugin
29 | 
30 | In the directory of your plugin, run typescript compiler in watch mode by using the command:
31 | 
32 |   ```npm run start```
33 | 
34 | For the Figma connection, you can find instructions at:
35 | 
36 | https://www.figma.com/plugin-docs/setup/
37 | 
38 | ## How to contribute 
39 | 
40 | Currently, the plugin supports **only iOS** device screen resolutions. I would be glad if you may add some Android device support.
41 | If you find any bug or mistake about the resolutions, feel free to share it with me via **hi@iremkaraoglu.com** , open an issue or open a PR.
42 | 


--------------------------------------------------------------------------------
/code.ts:
--------------------------------------------------------------------------------
  1 | function runPlugin() {
  2 |   const devices = {
  3 |     "1170-2532": {
  4 |       Width: "1170",
  5 |       Height: "2532",
  6 |       Scale: "3",
  7 |       Models: ["iPhone 13, iPhone 13 Pro, iPhone 12, iPhone 12 Pro"],
  8 |     },
  9 |     "1080-2340": {
 10 |       Width: "1080",
 11 |       Height: "2340",
 12 |       Scale: "3",
 13 |       Models: ["iPhone 13 Mini, iPhone 12 Mini"],
 14 |     },
 15 |     "1284-2778": {
 16 |       Width: "1284",
 17 |       Height: "2778",
 18 |       Scale: "3",
 19 |       Models: ["iPhone 13 Pro Max, iPhone 12 Pro Max"],
 20 |     },
 21 |     "750-1334": {
 22 |       Width: "750",
 23 |       Height: "1334",
 24 |       Scale: "2",
 25 |       Models: ["iPhone SE 2nd gen", "iPhone 8", "iPhone 7", "iPhone 6S"],
 26 |     },
 27 |     "1242-2688": {
 28 |       Width: "1242",
 29 |       Height: "2688",
 30 |       Scale: "3",
 31 |       Models: ["iPhone 11 Pro Max", "iPhone XS Max"],
 32 |     },
 33 |     "1125-2436": {
 34 |       Width: "1125",
 35 |       Height: "2436",
 36 |       Scale: "3",
 37 |       Models: ["iPhone 11 Pro", "iPhone XS", "iPhone X"],
 38 |     },
 39 |     "828-1792": {
 40 |       Width: "828",
 41 |       Height: "1792",
 42 |       Scale: "2",
 43 |       Models: ["iPhone 11", "iPhone XR"],
 44 |     },
 45 |     "1080-1920": {
 46 |       Width: "1080",
 47 |       Height: "1920",
 48 |       Scale: "3",
 49 |       Models: ["iPhone 8 Plus"],
 50 |     },
 51 |     "1242-2208": {
 52 |       Width: "1242",
 53 |       Height: "2208",
 54 |       Scale: "3",
 55 |       Models: ["iPhone 7 Plus", "iPhone 6S Plus", "iPhone 6 Plus"],
 56 |     },
 57 |     "640-1136": {
 58 |       Width: "640",
 59 |       Height: "1136",
 60 |       Scale: "2",
 61 |       Models: ["iPhone SE 1st gen", "iPhone 5C"],
 62 |     },
 63 |     "750-1136": {
 64 |       Width: "750",
 65 |       Height: "1136",
 66 |       Scale: "2",
 67 |       Models: ["iPhone 6"],
 68 |     },
 69 |     "640-960": {
 70 |       Width: "640",
 71 |       Height: "960",
 72 |       Scale: "2",
 73 |       Models: ["iPhone 5S", "iPhone 5", "iPhone 4S", "iPhone 4"],
 74 |     },
 75 |     "320-480": {
 76 |       Width: "320",
 77 |       Height: "480",
 78 |       Scale: "1",
 79 |       Models: ["iPhone 3GS", "iPhone 3G", "iPhone 1st gen"],
 80 |     },
 81 |     "1488-2266": {
 82 |       Width: "1488",
 83 |       Height: "2266",
 84 |       Scale: "2",
 85 |       Models: ["iPad Mini (6th gen)"],
 86 |     },
 87 |     "1620-2160": {
 88 |       Width: "1620",
 89 |       Height: "2160",
 90 |       Scale: "2",
 91 |       Models: [
 92 |         "iPad 9th gen",
 93 |         "iPad 8th gen",
 94 |         "iPad 7th gen",
 95 |         "iPad Mini 5th gen",
 96 |       ],
 97 |     },
 98 |     "2048-2732": {
 99 |       Width: "2048",
100 |       Height: "2732",
101 |       Scale: "2",
102 |       Models: [
103 |         "iPad Pro 5th gen 12.9 inch",
104 |         "iPad Pro 4th gen 12.9 inch",
105 |         "iPad Pro 4th gen 12.9 inch",
106 |         "iPad Pro 3rd gen 12.9 inch",
107 |         "iPad Pro 2nd gen 12.9 inch",
108 |         "iPad Pro 1st gen 12.9 inch",
109 |       ],
110 |     },
111 |     "1668-2388": {
112 |       Width: "1668",
113 |       Height: "2388",
114 |       Scale: "2",
115 |       Models: [
116 |         "iPad Pro 5th gen 11 inch",
117 |         "iPad Pro 4th gen 11 inch",
118 |         "iPad Pro 3rd gen 11 inch",
119 |       ],
120 |     },
121 |     "1640-2360": {
122 |       Width: "1640",
123 |       Height: "2360",
124 |       Scale: "2",
125 |       Models: ["iPad Air 4th gen"],
126 |     },
127 |     "1536-2048": {
128 |       Width: "1536",
129 |       Height: "2048",
130 |       Scale: "2",
131 |       Models: [
132 |         "iPad Mini 5th gen",
133 |         "iPad 6th gen",
134 |         "iPad 5th gen",
135 |         "iPad Pro 1st gen 9.7",
136 |         "iPad Mini 4th gen",
137 |         "iPad Air 2",
138 |         "iPad Mini 3",
139 |         "iPad Mini 2",
140 |         "iPad Air",
141 |         "iPad 4th gen",
142 |         "iPad 3rd gen",
143 |       ],
144 |     },
145 |     "1668-2224": {
146 |       Width: "1668",
147 |       Height: "2224",
148 |       Scale: "2",
149 |       Models: ["iPad Air 3rd gen", "iPad Pro 2nd gen 10.5 inch"],
150 |     },
151 |     "1536-2732": {
152 |       Width: "1536",
153 |       Height: "2732",
154 |       Scale: "2",
155 |       Models: ["iPad Pro 2nd gen 12.9 inch", "iPad Pro 1st gen 12.9 inch"],
156 |     },
157 |     "768-1024": {
158 |       Width: "768",
159 |       Height: "1024",
160 |       Scale: "1",
161 |       Models: ["iPad Mini", "iPad 2", "iPad 1st gen"],
162 |     },
163 |   };
164 | 
165 |   for (const node of figma.currentPage.selection) {
166 |     const layer = node as FrameNode;
167 | 
168 |     // Key for the portrait device size
169 |     let key = layer.width + "-" + layer.height;
170 |     if (devices[key] == undefined) {
171 |       // Check if it's landscape
172 |       key = layer.height + "-" + layer.width;
173 |       if (devices[key] == undefined) {
174 |         // Couldn't find a resolution like this in portrait and landscape
175 |         figma.closePlugin("Nothing applied.");
176 |       } else {
177 |         const scale = Number(devices[key].Scale);
178 |         layer.rescale(1 / scale);
179 |         if (scale == 1) {
180 |           figma.closePlugin("Scale factor is 1, no changes");
181 |         } else {
182 |           figma.closePlugin("The selected frame downscaled for 1/" + scale);
183 |         }
184 |       }
185 |     } else {
186 |       const scale = Number(devices[key].Scale);
187 |       layer.rescale(1 / scale);
188 |       figma.closePlugin("The selected frame downscaled for 1/" + scale);
189 |     }
190 |   }
191 |   figma.closePlugin();
192 | }
193 | 
194 | runPlugin();
195 | 


--------------------------------------------------------------------------------
/code.js:
--------------------------------------------------------------------------------
  1 | function runPlugin() {
  2 |   const devices = {
  3 |     "1170-2532": {
  4 |       Width: "1170",
  5 |       Height: "2532",
  6 |       Scale: "3",
  7 |       Models: ["iPhone 13, iPhone 13 Pro, iPhone 12, iPhone 12 Pro"],
  8 |     },
  9 |     "1080-2340": {
 10 |       Width: "1080",
 11 |       Height: "2340",
 12 |       Scale: "3",
 13 |       Models: ["iPhone 13 Mini, iPhone 12 Mini"],
 14 |     },
 15 |     "1284-2778": {
 16 |       Width: "1284",
 17 |       Height: "2778",
 18 |       Scale: "3",
 19 |       Models: ["iPhone 13 Pro Max, iPhone 12 Pro Max"],
 20 |     },
 21 |     "750-1334": {
 22 |       Width: "750",
 23 |       Height: "1334",
 24 |       Scale: "2",
 25 |       Models: ["iPhone SE 2nd gen", "iPhone 8", "iPhone 7", "iPhone 6S"],
 26 |     },
 27 |     "1242-2688": {
 28 |       Width: "1242",
 29 |       Height: "2688",
 30 |       Scale: "3",
 31 |       Models: ["iPhone 11 Pro Max", "iPhone XS Max"],
 32 |     },
 33 |     "1125-2436": {
 34 |       Width: "1125",
 35 |       Height: "2436",
 36 |       Scale: "3",
 37 |       Models: ["iPhone 11 Pro", "iPhone XS", "iPhone X"],
 38 |     },
 39 |     "828-1792": {
 40 |       Width: "828",
 41 |       Height: "1792",
 42 |       Scale: "2",
 43 |       Models: ["iPhone 11", "iPhone XR"],
 44 |     },
 45 |     "1080-1920": {
 46 |       Width: "1080",
 47 |       Height: "1920",
 48 |       Scale: "3",
 49 |       Models: ["iPhone 8 Plus"],
 50 |     },
 51 |     "1242-2208": {
 52 |       Width: "1242",
 53 |       Height: "2208",
 54 |       Scale: "3",
 55 |       Models: ["iPhone 7 Plus", "iPhone 6S Plus", "iPhone 6 Plus"],
 56 |     },
 57 |     "640-1136": {
 58 |       Width: "640",
 59 |       Height: "1136",
 60 |       Scale: "2",
 61 |       Models: [
 62 |         "iPhone SE 1st gen",
 63 |         "iPhone 5C",
 64 |         "iPod Touch 7th gen",
 65 |         "iPod Touch 6th gen",
 66 |         "iPod Touch 5th gen",
 67 |       ],
 68 |     },
 69 |     "750-1136": {
 70 |       Width: "750",
 71 |       Height: "1136",
 72 |       Scale: "2",
 73 |       Models: ["iPhone 6"],
 74 |     },
 75 |     "640-960": {
 76 |       Width: "640",
 77 |       Height: "960",
 78 |       Scale: "2",
 79 |       Models: [
 80 |         "iPhone 5S",
 81 |         "iPhone 5",
 82 |         "iPhone 4S",
 83 |         "iPhone 4",
 84 |         "iPod Touch 4th gen",
 85 |       ],
 86 |     },
 87 |     "320-480": {
 88 |       Width: "320",
 89 |       Height: "480",
 90 |       Scale: "1",
 91 |       Models: [
 92 |         "iPhone 3GS",
 93 |         "iPhone 3G",
 94 |         "iPhone 1st gen",
 95 |         "iPod Touch 3rd gen",
 96 |         "iPod Touch 2nd gen",
 97 |         "iPod Touch 1st gen",
 98 |       ],
 99 |     },
100 |     "1488-2266": {
101 |       Width: "1488",
102 |       Height: "2266",
103 |       Scale: "2",
104 |       Models: ["iPad Mini (6th gen)"],
105 |     },
106 |     "1620-2160": {
107 |       Width: "1620",
108 |       Height: "2160",
109 |       Scale: "2",
110 |       Models: [
111 |         "iPad 9th gen",
112 |         "iPad 8th gen",
113 |         "iPad 7th gen",
114 |         "iPad Mini 5th gen",
115 |       ],
116 |     },
117 |     "2048-2732": {
118 |       Width: "2048",
119 |       Height: "2732",
120 |       Scale: "2",
121 |       Models: [
122 |         "iPad Pro 5th gen 12.9 inch",
123 |         "iPad Pro 4th gen 12.9 inch",
124 |         "iPad Pro 4th gen 12.9 inch",
125 |         "iPad Pro 3rd gen 12.9 inch",
126 |         "iPad Pro 2nd gen 12.9 inch",
127 |         "iPad Pro 1st gen 12.9 inch",
128 |       ],
129 |     },
130 |     "1668-2388": {
131 |       Width: "1668",
132 |       Height: "2388",
133 |       Scale: "2",
134 |       Models: [
135 |         "iPad Pro 5th gen 11 inch",
136 |         "iPad Pro 4th gen 11 inch",
137 |         "iPad Pro 3rd gen 11 inch",
138 |       ],
139 |     },
140 |     "1640-2360": {
141 |       Width: "1640",
142 |       Height: "2360",
143 |       Scale: "2",
144 |       Models: ["iPad Air 4th gen"],
145 |     },
146 |     "1536-2048": {
147 |       Width: "1536",
148 |       Height: "2048",
149 |       Scale: "2",
150 |       Models: [
151 |         "iPad Mini 5th gen",
152 |         "iPad 6th gen",
153 |         "iPad 5th gen",
154 |         "iPad Pro 1st gen 9.7",
155 |         "iPad Mini 4th gen",
156 |         "iPad Air 2",
157 |         "iPad Mini 3",
158 |         "iPad Mini 2",
159 |         "iPad Air",
160 |         "iPad 4th gen",
161 |         "iPad 3rd gen",
162 |       ],
163 |     },
164 |     "1668-2224": {
165 |       Width: "1668",
166 |       Height: "2224",
167 |       Scale: "2",
168 |       Models: ["iPad Air 3rd gen", "iPad Pro 2nd gen 10.5 inch"],
169 |     },
170 |     "1536-2732": {
171 |       Width: "1536",
172 |       Height: "2732",
173 |       Scale: "2",
174 |       Models: ["iPad Pro 2nd gen 12.9 inch", "iPad Pro 1st gen 12.9 inch"],
175 |     },
176 |     "768-1024": {
177 |       Width: "768",
178 |       Height: "1024",
179 |       Scale: "1",
180 |       Models: ["iPad Mini", "iPad 2", "iPad 1st gen"],
181 |     },
182 |   };
183 |   for (const node of figma.currentPage.selection) {
184 |     const layer = node;
185 |     // Key for the portrait device size
186 |     let key = layer.width + "-" + layer.height;
187 |     if (devices[key] == undefined) {
188 |       // Check if it's landscape
189 |       key = layer.height + "-" + layer.width;
190 |       if (devices[key] == undefined) {
191 |         // Couldn't find a resolution like this in portrait and landscape
192 |         figma.closePlugin("Nothing applied.");
193 |       } else {
194 |         const scale = Number(devices[key].Scale);
195 |         layer.rescale(1 / scale);
196 |         if (scale == 1) {
197 |           figma.closePlugin("Scale factor is 1, no changes");
198 |         } else {
199 |           figma.closePlugin("Resize applied.");
200 |         }
201 |       }
202 |     } else {
203 |       const scale = Number(devices[key].Scale);
204 |       layer.rescale(1 / scale);
205 |       figma.closePlugin("Resize applied.");
206 |     }
207 |   }
208 |   figma.closePlugin();
209 | }
210 | runPlugin();
211 | 


--------------------------------------------------------------------------------