“Remove auto layout” solved a lot of the problems. At this point, not sure if this process of picking apart and organizing content from the mock-ups into what I need and then exporting that is as good as it gets. Maybe should have had the designers do this for us in the first place, this feels more like part of their job than mine. Still very open to being told I am doing it wrong, and there is a better way, community please share your wisdom.
Could you share an example of what an exported component you want looks like?
With the exporting assets as textures. I understand why you would do this if the assets are images like say a wood grain texture. But can’t you just copy the style code or color vars and remake them in your programming framework? Same goes for recreating auto layouts using a UI framework like C# XAML Avalonia or whatever you have access too. There may even be a Figma plugin that would export it as code for your framework.
if you want to keep on the path your on. Instead of hiding text and having the whole comp resize. You can set its opacity to 0 (hot key is 0 when you have it selected) and then it won’t resize everything. But I personally would try to make the component once and reuse it.
Something I have done before is use 9slicing techniques from exported figma assets so I can make a button with nice rounded corners in a C++ Ui engine that didn’t support rounded edges.
another thing you can check is “dev mode” which a full seat has access to. I think that also gives you all the assets to use. Again, they expect the program to dynamically resize them as rasterizing images and using them statically isn’t really a common use case.
Hi @James Simonson
Could you share an example of what an exported component you want looks like?
It’s a lot of subtle textures, and transparency was used a lot, top level widgets rely on the layers below them for color and texture. Some are purely vector-able gradients, others contain raster images and maybe also vector-able layers blended in. I would describe it as almost solid colors with mild variance to make it look more interesting, plus some pictures of real things thrown in.
But can’t you just copy the style code or color vars and remake them in your programming framework?
It’s a relatively huge and complex application. The effort to faithfully recreate every style that was used, and the CPU/latency cost of rendering it, would probably be too high.
Same goes for recreating auto layouts using a UI framework like C# XAML Avalonia or whatever you have access too. There may even be a Figma plugin that would export it as code for your framework.
The highly niche nature of the app and constraints about what hardware it may run on forces the use of a framework for which there is no Figma code plugin. There are only a few possible UI frameworks I could have chosen from, and none have a Figma plugin. More mainstream choices like Qt are not an option.
if you want to keep on the path your on. Instead of hiding text and having the whole comp resize. You can set its opacity to 0 (hot key is 0 when you have it selected) and then it won’t resize everything. But I personally would try to make the component once and reuse it.
Something I have done before is use 9slicing techniques from exported figma assets so I can make a button with nice rounded corners in a C++ Ui engine that didn’t support rounded edges.
Great tip, thanks! I’ll try that now.
another thing you can check is “dev mode” which a full seat has access to. I think that also gives you all the assets to use. Again, they expect the program to dynamically resize them as rasterizing images and using them statically isn’t really a common use case.
I found that dev mode was not very helpful for this, which may just come down to the nature of what the designers handed over to us. Any progress that has been made required design mode editing, in fact I have just been doing everything from design mode.
