I just saw the Civ 7 Interface review video (great video btw!) and noticed that it seemed like icons that he had created were being uses within text layers, just like emojis. How did he achieve this?
I’ve been looking for a way to design game interfaces quickly like this for ages. If penpot works like this seems I’m switching right away!
Hi there! Thanks so much for watching the Civ 7 Interface review video and for your kind words—it really means a lot!
In this particular case, both the “icons” in the UI and in the text are actually emojis that we inserted, choosed to look similar to those used in the game. However, you can definitely achieve a similar effect using Penpot’s Flex Layout. Essentially, you can place custom icons or emojis inline with text layers, and then use Flex Layout to position and scale them as needed—perfect for designing quick, game-like interfaces.
I’ve put together an example so you can see how it’s done in Penpot (check out the gif). If you decide to create your own video game interface design in Penpot, we’d love for you to share it with us!
Ah ok, so then it works a lot like Figma does in that regard. I’ve made a quick and dirty plug-in in Figma where I write text in a text field and it outputs a flex layout with my desired components, but it’s a bit janky. Would be cool if I could easily make a similar plug-in in penpot. Do you think penpots relative closeness to code would make that easier?
Like having a plug-in where I simply write “this provides +1 {P} to your city” and it outputs a flex layout with the characters in it?
Yes, you can definitely build a plugin to do exactly what you’re describing. 
I think it’d be really cool to see a plugin like that—if you feel like experimenting, check out the Penpot docs for guidance on how to develop or extend the platform!
