zlacker

[parent] [thread] 11 comments
1. ryanSr+(OP)[view] [source] 2023-06-21 16:56:21
Seems interesting, and admittedly I might have missed this, but grabbing icons as individual SVGs is probably what takes me the longest when going from design to code. I have to click on each asset, name it properly, and then export it. Over, and over again. All from different layers, and pages.

If there was some sort of asset export that obeyed some spec on how to size and file name that’d save hours and hours of work.

Outside of that, I’m probably not ever going to use generated code enough for it to be a game changer. Most of the time you’re having to fit some design into an existing design system, and so I don’t really see the use case for code export at scale.

replies(6): >>Justic+j2 >>pininj+z4 >>uxaman+s7 >>kijin+T7 >>pelagi+mz >>chuckn+nJ2
2. Justic+j2[view] [source] 2023-06-21 17:05:08
>>ryanSr+(OP)
There is 100% that. Any frame can have an 'export' set on it, where you specificy the format (svg, png ..), suffix, pixel density etc. The name will be set by the name of the frame, and '/' creates nested folders. Then on any page can go file->export to export all assets at once.

But if you're using some icon library that a designer has imported into figma like remix-icon, just import from the library directly in code. Importing and rexporting the svg would likely change it slightly.

3. pininj+z4[view] [source] 2023-06-21 17:13:46
>>ryanSr+(OP)
Maybe the vscode plug-in can autocomplete an SVG? That’d be helpful.. setting up every export takes a lot of time.
replies(1): >>emilsj+2b
4. uxaman+s7[view] [source] 2023-06-21 17:26:47
>>ryanSr+(OP)
Right Click the icon > Copy/Paste as > Copy as SVG

We use that and just paste it into the codebase.

I've also used a bulk export plugin that autonames things. Would have to lookup the plugin name if you're interested.

replies(2): >>Destin+3z >>toddmo+WA
5. kijin+T7[view] [source] 2023-06-21 17:28:21
>>ryanSr+(OP)
I would also love to be able to select an arbitrary set of components and export them as a single SVG.

Often, the way the designer has grouped them together is not ideal for code, but I don't want to ungroup and group them all over again just so I can grab an SVG.

◧◩
6. emilsj+2b[view] [source] [discussion] 2023-06-21 17:42:06
>>pininj+z4
Kinda! It will auto-detect icons in a design, highlight them at the top level, and allow you to import it into your VS Code workspace :)
◧◩
7. Destin+3z[view] [source] [discussion] 2023-06-21 19:38:19
>>uxaman+s7
Or even better, cmd + /, type “svg”, press enter, done
replies(2): >>uxaman+m91 >>uxaman+Hp4
8. pelagi+mz[view] [source] 2023-06-21 19:39:42
>>ryanSr+(OP)
As a designer, all my icons are symbols and you can find the symbol artboard on another page with all the icons sized consistently with consistent naming conventions. You can select all and export as you please. Nothing drives me crazier than icons that are not properly formatted in both size and name.
◧◩
9. toddmo+WA[view] [source] [discussion] 2023-06-21 19:47:40
>>uxaman+s7
Hero!
◧◩◪
10. uxaman+m91[view] [source] [discussion] 2023-06-21 22:25:30
>>Destin+3z
Excellent! Thanks for the tip. I always forget that quick menu is there.
11. chuckn+nJ2[view] [source] 2023-06-22 13:10:59
>>ryanSr+(OP)
This is one of the reason we built Specify (specifyapp.com) which is a Design API that helps you sync design tokens and assets from Figma to any platforms.

For instance, let's say you're a React developer. Designers set their layers as exportable in SVG, and Specify can automatically export the SVG string, optimize it with SVGO, set the end filename, and generate a JSX component for React - automatically. Here's a short video that should help you understand the whole process (https://youtu.be/Z7fX0v3KFmY?t=353).

You basically just have to configure Specify once, and every time designers update icons in Figma you'll get automated pull requests with icons transformed exactly how you want.

◧◩◪
12. uxaman+Hp4[view] [source] [discussion] 2023-06-22 20:07:22
>>Destin+3z
I've used this menu about 5 times since yesterday, thanks again :)
[go to top]