2 |
3 | Create radial interfaces and patterns in Figma with instantiated, rotated copies of elements.
4 |
5 | [
](https://www.figma.com/community/plugin/1003651932772848456/Copy-%26-Rotate)
6 |
7 | ## 🚧 Development
8 |
9 | 1. `npm i` — Install dependencies
10 | 1. `npm run watch` — Bundle the plugin and watch for changes 👁️
11 |
12 | ## 🌀 Misc
13 |
14 | This plugin uses the amazing [create-figma-plugin](https://github.com/yuanqing/create-figma-plugin) library.
15 |
16 | ## 📝 License
17 |
18 | [MIT](LICENSE)
19 |
--------------------------------------------------------------------------------
/media/button.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/media/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexwidua/figma-copy-and-rotate/d28ed169acb3a7dcc19dc98ba00ffc32268e88ea/media/hero.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "figma-copy-and-rotate",
3 | "version": "1.0.0",
4 | "description": "Create rotated copies of Figma nodes.",
5 | "keywords": [
6 | "figma-copy-and-rotate",
7 | "figma",
8 | "figma-plugin",
9 | "figma-plugins"
10 | ],
11 | "license": "MIT",
12 | "author": "Alexander Widua",
13 | "dependencies": {
14 | "@create-figma-plugin/ui": "^1.2.2",
15 | "@create-figma-plugin/utilities": "^1.2.2",
16 | "preact": "^10.5.14"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git://github.com/alexwidua/figma-copy-and-rotate"
21 | },
22 | "engines": {
23 | "node": ">=14"
24 | },
25 | "devDependencies": {
26 | "@create-figma-plugin/build": "^1.2.2",
27 | "@create-figma-plugin/tsconfig": "^1.2.2",
28 | "@figma/plugin-typings": "^1",
29 | "@zilahir/stylelint-config-rational-order": "^0.1.5",
30 | "typescript": "^4"
31 | },
32 | "scripts": {
33 | "build": "build-figma-plugin --typecheck --minify",
34 | "watch": "build-figma-plugin --typecheck --watch"
35 | },
36 | "figma-plugin": {
37 | "id": "1003651932772848456",
38 | "name": "Copy & Rotate",
39 | "main": "src/main.ts",
40 | "ui": "src/ui.tsx"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/Preview/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @file UI preview that previews the current rotation. The preview is interactable
3 | * and allows the user to skip instances by clicking on the individual items.
4 | * The preview is naïve in that sense that is just represents the boundaries of a
5 | * node, ex. a triangle node will still be displayed as a square.
6 | */
7 |
8 | import { h } from 'preact'
9 | import style from './style.css'
10 | import { baseDeg } from '../../utils/transform'
11 | import Item from './item'
12 |
13 | const Preview = ({
14 | uiWidth,
15 | selectionState,
16 | selectionWidth,
17 | selectionHeight,
18 | selectionRotation,
19 | selectionType,
20 | numItems,
21 | radius,
22 | skipSelect,
23 | skipSpecific,
24 | skipEvery,
25 | alignRadially,
26 | isSweeping,
27 | sweepAngle,
28 | showRadiusHelper,
29 | showNumBadge,
30 | onInstanceClick,
31 | children
32 | }: PreviewProps) => {
33 | const previewPadding: number = 60
34 |
35 | const length: number = numItems
36 | const width: LayoutMixin['width'] = selectionWidth
37 | const height: LayoutMixin['height'] = selectionHeight
38 | const isWiderOrSquare: boolean = width >= height
39 | const diameter: number = radius * 2
40 |
41 | // Scale items down if item size + radius exceed preview container bounds
42 | const factor: number = isWiderOrSquare
43 | ? (width * 2 + diameter) / (uiWidth - previewPadding)
44 | : (height * 2 + diameter) / (uiWidth - previewPadding)
45 |
46 | // Proportional height, width and radius
47 | const propHeight: number = height / factor
48 | const propWidth: number = width / factor
49 | const propRadius: number = radius / factor
50 | const d = propRadius * 2
51 |
52 | /**
53 | * Map items radially
54 | */
55 | const circle = Array.from({ length }, (e, i) => {
56 | // We subtract 1 from numItems to account for the sweep offset, see ./Slider
57 | const deg: number = baseDeg + (sweepAngle / (numItems - 1)) * i
58 | const rad: number = deg * (Math.PI / 180)
59 |
60 | // Normalize shape if item is oblongular
61 | const diff: number = Math.abs(propWidth - propHeight)
62 | const normalizeShape: number =
63 | propWidth >= propHeight
64 | ? -((diff / 2) * Math.cos(Math.abs(deg) * (Math.PI / 180)))
65 | : (diff / 2) * Math.cos(Math.abs(deg) * (Math.PI / 180))
66 |
67 | const normRadian: number = selectionRotation * (Math.PI / 180)
68 | const normalizeRadius: number =
69 | propWidth === propHeight
70 | ? 0
71 | : propWidth > propHeight
72 | ? (-diff / 2) * Math.sin(Math.abs(normRadian))
73 | : (diff / 2) * Math.sin(Math.abs(normRadian))
74 |
75 | const x: number =
76 | (propRadius + propWidth / 2 - normalizeRadius) * Math.cos(rad) +
77 | (d + propWidth) / 2 -
78 | propWidth / 2 +
79 | normalizeShape
80 |
81 | const y: number =
82 | (propRadius + propHeight / 2 - normalizeRadius) * Math.sin(rad) +
83 | (d + propHeight) / 2 -
84 | propHeight / 2
85 |
86 | return (
87 |