I’m stuck with a design problem. My Figma file has a cool parallelogram, but when I try to make it in Android, it looks different. In Figma, the shape is tilted at the bottom right. But in Android Studio, it’s just a boring rectangle.
I’ve tried using the code from Figma’s Inspect tool, but it’s not working right. Here’s a simplified version of what I’m dealing with:
<View
android:id="@+id/slanted_shape"
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@drawable/slanted_shape" />
<!-- drawable/slanted_shape.xml -->
<vector
android:width="200dp"
android:height="50dp"
android:viewportWidth="200"
android:viewportHeight="50">
<path
android:pathData="M0,0 L180,0 L200,50 L20,50 Z"
android:fillColor="#FFFFFF" />
</vector>
The Figma designer just moved the bottom corners to the right. But the path in the code doesn’t show this tilt. Am I missing something? Is there a secret Figma setting that controls how the shape is skewed?
Any help would be awesome. I’m tired of staring at a straight rectangle when I want a cool, slanted one!
As someone who’s wrestled with this Figma-to-Android shape mismatch before, I feel your pain. Here’s what worked for me:
Instead of relying on Figma’s export, I found it more effective to recreate the parallelogram directly in Android Studio. You can achieve this by using a custom ShapeDrawable. Here’s a snippet that might help:
ShapeDrawable shape = new ShapeDrawable(new Shape() {
@Override
public void draw(Canvas canvas, Paint paint) {
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(180, 0);
path.lineTo(200, 50);
path.lineTo(20, 50);
path.close();
canvas.drawPath(path, paint);
}
});
Adjust the coordinates to match your design. This approach gives you more control and often results in a closer match to the Figma design. It took me some tweaking, but the end result was spot-on. Hope this helps you break free from that stubborn rectangle!
yo, had the same issue! figma can be tricky with those fancy shapes. try tweaking the path data manually in android studio. play around with the bottom corner coordinates til it looks right. might take some trial and error, but you’ll get there. good luck!
I’ve run into this issue before when converting Figma designs to Android. The problem often lies in how Figma handles shape transformations versus how Android interprets vector paths.
In Figma, designers can easily skew or transform shapes visually, but these transformations don’t always translate directly to vector path data. For your parallelogram, you’ll need to manually adjust the path data in your Android vector drawable.
Try modifying your path data like this:
<path
android:pathData="M0,0 L180,0 L200,50 L20,50 Z"
android:fillColor="#FFFFFF" />
This should create the slanted effect you’re looking for. The key is to adjust the bottom-right and bottom-left points (200,50 and 20,50) to match your Figma design.
If you’re still having trouble, consider using a tool like ShapeShifter (https://shapeshifter.design/) to visually edit your vector path and generate the correct Android XML. It’s been a lifesaver for me when dealing with complex shapes from Figma.
I’ve encountered this issue before when transitioning from Figma to Android. The discrepancy often stems from how Figma applies transformations to shapes, which don’t directly translate to Android’s vector path system.
To achieve the desired parallelogram effect, you’ll need to manually adjust the path data in your Android vector drawable. Experiment with the coordinates of the bottom corners in your path data. For instance:
<path
android:pathData="M0,0 L180,0 L200,50 L20,50 Z"
android:fillColor="#FFFFFF" />
Adjust the values ‘200,50’ and ‘20,50’ to match your Figma design. This process may require some trial and error to get the exact tilt you’re looking for.
If you’re still struggling, consider using online vector editing tools specifically designed for Android development. These can help you visually manipulate the shape and generate the correct XML code.