Badge Designer

The Badge Designer is a visual, three-column canvas editor built into badges.ninja that lets you create professional badge images without any external design tools.

Overview

The designer opens right inside the Create / Edit Badge window. It has three parts:

• Left rail — switches the middle panel between Templates, Uploads, Elements, Text, Attributes, QR Codes, and Layers.
• Panel — the tools for the selected rail mode.
• Canvas — a live, editable preview of the badge. Everything you add is a real, selectable object you can move, restyle, reorder, or delete.

The badge details (Issuer, Name, Description, Criteria, and the Share Text) sit directly under the canvas, so the design and the credential information live together in one window — there's no separate step.

Starting from a Template

Click Templates in the rail to browse the built-in designs. The Recognition family gives you a fully-composed, professional badge — a shaped frame plus editable placeholder text (organization, title, subtitle, and a verification seal) — in eight color palettes (Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite). Use the Category filter to narrow the list, or Blank canvas to start from scratch.

Click a template to apply it. Its text becomes normal, editable layers you can change or remove — nothing is baked in.

Elements — Shapes, Icons, Ribbons & Backgrounds

The Elements panel layers graphics on top of your badge:

• Lines — horizontal / vertical rules.
• Shapes — filled and outlined rectangles, rounded rectangles, circles, and triangles.
• Icons — 70 pictographic icons (award, brain, certificate, code, crown, diploma, graduation-cap, medal, rocket, shield-check, star, trophy, and many more), searchable.
• Ribbons — 28 decorative ribbon overlays, grouped into Straight / Pointed / Tails / Decorative.
• Bases — 80 recolorable base shapes across categories (circles, shields, hexagons, stars, medals, seals, wreaths, banners, geometric).

Every icon, ribbon, and base is inserted in the current color and can be recolored at any time.

Background shapes

Elements → Background shapes holds 68 ready-made frames (the shape × palette library). Applying one swaps the badge's background frame while keeping your text and elements on top — handy when you want a specific shape/color combination without a composed template.

Uploading a Custom Image

Use the Uploads panel to add your own logo, photo, or graphic. PNG, JPEG, and SVG are accepted, up to 5 MB. The image is inserted as a normal foreground object — it stacks on top of the design and never erases the background. To change the badge background, pick a template or a background shape instead.

Adding & Styling Text

The Text panel offers:

• Add heading / subheading / normal text — pre-sized text objects.
• Combinations — ready-made stacks like Certificate of Achievement, Awarded to , or Verify at — each line stays independently editable.

Select any text object and the contextual toolbar appears above the canvas:

• Font — a library of 50 fonts grouped into Sans, Serif, Handwriting, Mono, and System. Pick one from the dropdown; each option previews in its own typeface.
• + Font — upload a brand typeface (TTF, WOFF, WOFF2, OTF) for the current session.
• Font size — the − / + stepper (or type a number) resizes the selected text precisely, without dragging its handles.
• Colour — sets the fill of the selected text (and the default insert colour for new shapes/icons).
• Alignment — six buttons align the selection left / center / right and top / middle / bottom relative to the canvas.

Dynamic Attributes

The Attributes panel inserts dynamic tokens — , , , , , — as text objects. Each token is resolved per recipient at award time, so a single design personalizes itself for everyone you issue it to. This is how you put the recipient's name or the issue date on the badge itself.

QR Codes

The QR Codes panel inserts a scannable code tied to . On each issued award it resolves to that award's public verification page, so anyone can scan the printed badge to confirm it.

Layers

The Layers panel lists every object on the canvas. From here you can reorder (bring forward / send back), hide/show, select, and delete each layer. The background frame is pinned at the bottom and stays non-interactive so foreground elements own all the clicks.

Undo / Redo (Ctrl+Z / Ctrl+Shift+Z) walk through the last 20 changes, and dashed snap guides appear when you drag an object near the canvas center.

Saving the Badge

There's no separate "export" step. When your design and details are ready:

• Create Badge captures the canvas as a PNG, uploads it to IPFS, and saves the badge along with its editable design — so re-opening the badge restores your individual layers for further editing.
• Save Draft stores an in-progress badge server-side (across devices). Drafts appear in your Badges list with a Draft mark, and you can pick any of them back up later.

Tips for Good Badge Design

• Keep it simple — clear text, minimal clutter. Badges are often shown small.
• Use high contrast — make text readable against the background.
• Name the credential — viewers should understand it at a glance.
• Square format — badges display best square.
• Brand consistency — reuse your organization's colors and fonts across badges.
• Save reusable designs — every badge you create is also saved as an account template you can start from next time (see My Templates).