使用 Figma 创建头像样式

我们的 Figma 插件 是为 DiceBear 创建头像样式的最简单方法。以下教程需要对 Figma 有基础了解。

第 1 步

如果你希望 DiceBear 动态更改头像中的颜色，你必须在 Figma 中将颜色创建为 本地样式。 将颜色整理到组中。 按照以下格式命名：<group>/<option-name>。例如，skin/light。

稍后你将使用本地样式为路径着色。然后 DiceBear 会根据 seed 和颜色设置，改变同一组内路径的颜色。对于 <group> 和 <option-name> 的名称，你可以使用字母数字字符以及连字符。

在以下示例中，你可以看到它可能的样子：

第 2 步

现在为你想要动态着色的路径分配一个来自已创建组的颜色。组中的具体颜色并不重要。重要的是组是正确的。

第 3 步

将头像的各个独立部分创建为 组件。 同样，使用 <group>/<option-name> 命名模式来创建组。

与颜色类似，DiceBear 之后会（结合 seed 和设置）从某个组中选择一个组件并将其放入头像中。

第 4 步

确保同一组中的每个组件具有相同的尺寸。

第 5 步

创建任意数量的颜色组和组件组。然后你就可以把所有组件组合起来。

为此， 创建一个画板 并确保宽度和高度相同。从 Assets 选项卡中，将每个组件组中的一个实例拖入画板。

第 6 步

现在搜索 DiceBear 导出器 插件。确保你已选中画板并启动插件。

将会打开一个对话框，你可以在其中进行各种设置。例如头像样式的名称、许可证，或者组件在头像中后续出现的概率。

这些设置会自动保存到你的画板中。一旦你对设置满意，就可以导出你的头像样式。

TIP

请确保在导出设置中选择 10.x 版本。本指南适用于 10.x 版本。

第 7 步

插件会导出一个 JSON 文件：你的 样式定义。此文件可立即使用， 无需构建步骤。

你可以立即使用 CLI 测试你的样式：

dicebear ./your-style.json ./test-output --count 10

这会在 ./test-output 目录中生成 10 个示例头像。

第 8 步

恭喜！你现在可以在 JS Library、PHP Library、Python Library、Rust Library、Go Library、Dart Library 或 CLI 中使用你的头像样式了。

使用 JS Library

import { Style, Avatar } from '@dicebear/core';
import definition from './your-style.json' with { type: 'json' };

const style = new Style(definition);
const avatar = new Avatar(style, {
  seed: 'dicebear',
  // ... 其他选项
});

使用 PHP Library

use DiceBear\Avatar;
use DiceBear\Style;

$style = Style::fromJson(file_get_contents('./your-style.json'));

$avatar = new Avatar($style, [
  'seed' => 'dicebear',
  // ... 其他选项
]);

使用 Python Library

from pathlib import Path

from dicebear import Avatar, Style

style = Style.from_json(Path("./your-style.json").read_text("utf-8"))

avatar = Avatar(style, {
    "seed": "dicebear",
    # ... 其他选项
})

使用 Rust Library

use dicebear_core::{Avatar, Style};
use serde_json::json;
use std::fs;

let definition = fs::read_to_string("./your-style.json")?;
let style = Style::from_str(&definition)?;

let avatar = Avatar::new(&style, json!({
    "seed": "dicebear",
    // ... 其他选项
}))?;

使用 Go Library

import (
	"os"

	dicebear "github.com/dicebear/dicebear-go/v10"
)

definition, _ := os.ReadFile("./your-style.json")
style, _ := dicebear.NewStyle(definition)

avatar, _ := dicebear.NewAvatar(style, map[string]any{
	"seed": "dicebear",
	// ... 其他选项
})

使用 Dart Library

import 'dart:io';

import 'package:dicebear_core/dicebear_core.dart';

final style = Style.parse(File('./your-style.json').readAsStringSync());

final avatar = Avatar(style, {
  'seed': 'dicebear',
  // ... 其他选项
});

使用 CLI

dicebear ./your-style.json ./avatars --seed "dicebear" --format png

TIP

CLI 会自动检测你的样式定义中所有可用的选项。 使用你的定义文件配合 --help 查看它们：

dicebear ./your-style.json --help