https://github.com/c5inco/shape-composer-figma
Source for a small Figma plugin to export vector shapes to Shape classes for use in Jetpack Compose apps
https://github.com/c5inco/shape-composer-figma
figma-plugin jetpack-compose
Last synced: about 1 month ago
JSON representation
Source for a small Figma plugin to export vector shapes to Shape classes for use in Jetpack Compose apps
- Host: GitHub
- URL: https://github.com/c5inco/shape-composer-figma
- Owner: c5inco
- Created: 2021-12-19T09:21:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-05T07:32:15.000Z (about 2 years ago)
- Last Synced: 2025-03-22T19:02:46.479Z (about 2 months ago)
- Topics: figma-plugin, jetpack-compose
- Language: TypeScript
- Homepage: https://www.figma.com/community/plugin/1054248779295272882/Shape-Composer
- Size: 543 KB
- Stars: 66
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shape Composer Figma plugin
Small plugin that exports custom shapes for use in a [Jetpack Compose](https://developer.android.com/jetpack/compose) app.
Essentially, the path data from a Figma [VectorNode](https://www.figma.com/plugin-docs/api/VectorNode/) is translated into [Path commands](https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Path) to be recreated in Android, with some extra wrapping around a [Shape class](https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape) to easily copy-paste into the project.
Clover shape example:
```kotlin
val CloverShape: Shape = object: Shape {
override fun createOutline(
size: Size,
layoutDirection: LayoutDirection,
density: Density
): Outline {
val baseWidth = 200f
val baseHeight = 200f
val path = Path().apply {
moveTo(12f, 100f)
cubicTo(12f, 76f, 0f, 77.6142f, 0f, 50f)
cubicTo(0f, 22.3858f, 22.3858f, 0f, 50f, 0f)
cubicTo(77.6142f, 0f, 76f, 12f, 100f, 12f)
cubicTo(124f, 12f, 122.3858f, 0f, 150f, 0f)
cubicTo(177.6142f, 0f, 200f, 22.3858f, 200f, 50f)
cubicTo(200f, 77.6142f, 188f, 76f, 188f, 100f)
cubicTo(188f, 124f, 200f, 122.3858f, 200f, 150f)
cubicTo(200f, 177.6142f, 177.6142f, 200f, 150f, 200f)
cubicTo(122.3858f, 200f, 124f, 188f, 100f, 188f)
cubicTo(76f, 188f, 77.6142f, 200f, 50f, 200f)
cubicTo(22.3858f, 200f, 0f, 177.6142f, 0f, 150f)
cubicTo(0f, 122.3858f, 12f, 124f, 12f, 100f)
close()
}
return Outline.Generic(
path
.asAndroidPath()
.apply {
transform(Matrix().apply {
setScale(size.width / baseWidth, size.height / baseHeight)
})
}
.asComposePath()
)
}
}
```
Unsupported path commands:
- Vertical line to (V, v)
- Horizontal line to (H, h)
- Smooth curve to (S, s)
- Smooth quadratic curve to (T, t)
- Elliptical Arc (A, a)
## Setup
1. Clone this repo
2. `npm install` in cloned directory to install dependencies
3. Import plugin for local development in Figma desktop app, using `manifest.json`
4. Run `npm start` to start development server and Typescript watcher
5. Use plugin in Figma!
## Current designed workflow
1. Select Vector layer in Figma (flatten if necessary)
2. Execute plugin action
3. Paste copied class from clipboard into Compose project