script to auto generate files under paths

[scootcho]

I was playing with this repo a few weeks ago. I was trying to use my own art to generate avatar. It was fun but took a lot of time, the most tedious part was having to manually copy, paste, configure all the SVGs into files under the /src/paths directory. It would be really nice if there's a way to auto-generate these files based on a file structure and provided SVG file names.

If there's a way to just drop all my SVG exports from Figma into different layers/subdirectories under something like a src/files directory. Where the script will recursively scan all the files and auto generate those paths/....ts files. The only complicated one I see is something like top.ts in the /vatars-avataaars-sprites package.

I think if we can auto generate the paths/ files we can greatly improve the workflow of importing new avatar libraries.

├── src
│   ├── files
│   │   ├── accessories
│   │   |    ├── kurt.svg
│   │   |    ├── sunglasses.svg
│   │   |    ├── wayfarer.svg
│   │   |    ├── ...svg
│   │   ├── clothing
│   │   |    ├── graphicShirt.svg
│   │   |    ├── hoodie.svg
│   │   |    ├── overall.svg
│   │   |    ├── ...svg
│   │   ├── eyebrows
│   │   |    ├── ...svg
│   │   |    ├── ...svg
│   │   ├── mouth
│   │   |    ├── ...svg
│   │   |    ├── ...svg
│   │   ├── nose
│   │   |    ├── ....svg
│   ├── index.ts
│   ├── paths
│   │   ├── accessories.ts
│   │   ├── clothing.ts
│   │   ├── eyebrows.ts
│   │   ├── index.ts
│   │   ├── mouth.ts
│   │   ├── nose.ts
│   │   ├── skin.ts
│   │   └── top.t

src/paths/accessories.ts

import type { ValuesType } from 'utility-types';
import { Accessories } from '../options';

export const accessories: Record<ValuesType<Accessories>, (color: string) => string> = {
  kurt: (color: string) => `
    <path .../>
      ...
    <path .../>
  `,
  sunglasses: (color: string) => `
    <path .../>
  `,
  ...

How are you importing these SVGs into dicebear? What's the most efficient way to import a Figma project? Thanks!

[FlorianKoerner]

The process of creating custom avatar styles definitely needs to be simplified. The first step in the right direction was made this week with the release of the DiceBear CLI. This makes it very easy to create and compile new avatar style projects.

dicebear project new my-avatar-style
cd my-avatar-style
npm run build

However, the way from SVG files to TypeScript files is still quite complicated and time-consuming. This is definitely something I would like to improve.

Currently I also import SVG files via copy and paste. It's really not fun.

Your idea should be quite easy to implement. I'll take a closer look at it this weekend. My long term wish would be a Figma plugin that then also takes over colors and positions from the avatar parts. If the Figma document follows a fixed structure, no more rework in the TypeScript files would be necessary. At least in theory.

[FlorianKoerner]

I was able to create the first completely functional export today. The documentation is still missing and the publication in the Figma community.

But you can use the plugin already today. In the attachment you will find the plugin and the Figma file I used, which explains a bit how the design must be structured.

I also add my export. Will be the next official avatar style. Ask me if you have any questions.

plugin-and-exports.zip

[FlorianKoerner]

Now in review:
https://www.figma.com/community/plugin/1005765655729342787/DiceBear-Exporter

[scootcho]

Awesome! Going to try it out this weekend!

[FlorianKoerner]

Here you can find some more compatible Figma designs:
https://github.com/dicebear/dicebear/blob/main/SOURCES.md

[FlorianKoerner]

New Plugin version:
plugin.zip