Hey there, are there any articles/videos around implement PenPot designs in native mobile apps?
When I see the “Code” option in the “Inspect” tab of PenPot, I see it offers either CSS or SVG code. That’s fine - I don’t expect native UI code for Android and iOS there.
However, I did not find a way to customize the Inspect tab to provide sufficient information to implement this UI natively. For example, I don’t see the corner radius for rounded rects. The background gradients are shown in CSS format which is not the most convenient for implementing in Compose on Android or SwiftUI on iOS. It would be easier to implement it if it was presented in colors + stops format.
My observations above are based on explorations of the sample “Plants” app and the “Interactive music” app.
2 Likes
Hi there @curioustechizen … As far as I know, Penpot only shows code related to the web. There’s no way to have code for android or iOS from there, so I think should be expected that every code displayed will be optimized for use on the web.
Maybe you could create another topic as a feature request explaining why this is important, so the devs may implement in the future. 
Hi @RenanMayrinckDesign Thanks for the explanation. However, I don’t expect PenPot to show Android/iOS code. When I was hoping was for the Inspect tab to have enough information so that I can recreate this UI myself using native code.
For example take a look at this screenshot:
The Inspect tab shows the Width and Height, but it does not show the radius of the rounder corner. So even if I wanted to implement this design on my own on native platforms, I will not be able to do it faithfully.
Similarly, look at this screenshot:
Here, the Inspect tab shows that this screen needs a radial gradient but there is no info about the colors and stops so it is not possible for me to implement it in native UIs. Admittedly in this case, I can click the copy button to copy the CSS gradient and then use that information to implement the gradients in Android/iOS but this is still tedious.
What I’m looking for is - sufficient info in the Inspect tab to be able to implement the design on native platforms.
Looking through that perspective I think that data really should be there. I’ve run some tests here and it seems they should be there (radius, at least), but maybe in this project they are just not showing up, maybe because there’s some nesting or a bug, maybe? I’m not sure about that…
2 Likes
Whoa thanks for sharing this. I think I figured out what I was doing wrong.
I had to double-click on the component that has the rounded corner to select it (instead of single-click). When I do that I do see all the information required to implement the component.
3 Likes
