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.
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.
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.
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…
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.
Hey! There aren’t many articles or videos specifically covering PenPot-to-native mobile implementations, but you’re right about the Inspect tab being limited for native development. While PenPot primarily provides CSS and SVG output, one workaround is manually translating styles into native formats. For instance, you can extract corner radius values using the bounding box details and convert CSS gradients into color stops for SwiftUI or Jetpack Compose. Some developers, especially those working at a mobile app development company, use design tokens or plugins to streamline this process. Have you checked the PenPot community forums or GitHub discussions? There might be unofficial tools or workflows to help with this!
