Small plugin that exports custom shapes for use in a Jetpack Compose app.
Essentially, the path data from a Figma VectorNode is translated into Path commands to be recreated in Android, with some extra wrapping around a Shape class to easily copy-paste into the project.
Clover shape example:
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)
- Clone this repo
npm installin cloned directory to install dependencies- Import plugin for local development in Figma desktop app, using
manifest.json - Run
npm startto start development server and Typescript watcher - Use plugin in Figma!
- Select Vector layer in Figma (flatten if necessary)
- Execute plugin action
- Paste copied class from clipboard into Compose project
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent