TradingKey's Editorial Design System
Overview
From ad-hoc infographic requests to a scalable, team-wide creative system. It consists of various template types, a Figma component and assets library, and a comprehensive step-by-step documentation built for non-designers. The system supports English as the primary working luggage, with bilingual output capability built into component variants.
MY ROLE
System and Content Designer,
Creative Operations
OUTPUT
Design System, Guidelines
TEAM
Editorial, Marketing
The Problem and My Role
The editorial team publishes timely finance and market content at high frequency. Some of the articles heavy in information required a custom designed infographics, it was initially sent as a manual brief to me or another designer.
As the team scaled, the inconsistency become increasingly present. For instance, charts looked different, stocks comparison tables had no proper alignment, the brand colours appeared at different opacities.
I audited the output, extract the repeating patterns, and identified a system in Figma – an app where one could operate simultaneously in the cloud.
01
No visual consistency
Each infographic was designed in isolation with no shared colour, type, or layout rules.
02
Designer Bottleneck
All requests routed through one person, creating queues that slowed publication cadence.
03
No shared tooling
The editorial team had no ownership over the visual production process or source files.
04
Figma literacy gap
Most editors had no prior experience with design software, and Figma is easy to use for most new users
Template Taxonomy
After auditing the full infographic output, 6 recurring layout patterns emerged. Each became a named template in the Figma library. It's not a rigid format, but a flexible starting point that editors can adapt to their coontent.
Type 01
Comparison Table
Two vertical blocks side by side, each representing different stance.
Type 02
Row Group Table
Information stacked in horizontal rows, grouped.
Type 03
Column Group Table
Information stacked in vertical rows, grouped.
Type 04
Bar Chart
Rectangles showing size or amount, can be horizontal or vertical.
Type 05
Line Chart
A continuous line across the frame showing trend over time.
Type 06
Content Table
A structured content organised like a grid.
What Was Built
A component library and reusable assets/templates were built on Figma. It covers every repeating infographic format, with a shared token set for colour, type, spacing etc., so any variant can be assembled without making design decisions from scratch.
With this comprehensive template, it helps the editorial team to have a sense of what is acceptable and what other assistance they would still need from the designer.
Design Tokens
A single source of truth for colours, typographic scale, and spacing. These are published as Figma library styles.
-
Background colour and transparency presets
-
Typography levels
-
Spacing rules between groups and tables
-
Font colour tokens
Namecard Component
The core building block – consists of company logo, ticker, and name. Different layout directions and size variants, all these are switchable without detaching.
-
Name alignment: left, right, bottom (stacked)
-
Various sizes via component properties
-
Logo frame shape & stroke colour
Disclaimer Component
A mandatory footer element – built as a drag-and-drop instance with proper variants for colour and language.
-
Different background variants
-
Blog article and Social Media formats
-
Language dropdown property
-
Editable background credit field
Frame Standards
Two canvas sizes with a Safe Zone layout guide applied at the frame level – protecting critical content visible on all platforms and screen sizes
-
Blog article and social media sizes
-
Safe zone guide for different sizes
-
File naming convention
Background System
Curated fill styles and image overlay workflow standardised across all templates – ensure legibility without requiring any image editing skill.
-
Background fill styles presets
-
Copy-paste from any web source
-
Blend mode and fill opacity
Table Title System
Pre-built title boxes in different visual variants, matched precisely to each Namecard group's height
-
Colour variants
-
Font size from preset styles
-
Font size always matches box height
The Figma Guidelines
The guidelines were written in mind for users with zero FIgma experience.
Every section follows a consistent format: a plain-English explanation, numbered step-by-step, highlighting key actions in the visuals, and a pro tip/common mistake pair.
01
Introduction
Why Figma and what to expect.
02
Type of Visuals
Template types with live examples.
03
Getting Familiar with the Layout
Anatomy diagram and adding the library to the own workboard
04
Working with the Working Frame
Canvas size, snapping guides, safe zone
05
Background Setup
Fill colour, image overlay, blend mode
06
Disclaimer
Component, position, credit / data source update
07
Working with Namecard
The core component, sizing, arrangement, grouping
08
Setting a Table
Boxing, table title, sizing, single and multi-category spacing
09
Content Title & Subtitle
Type levels, alignment, colour, legibility check
View full playbook here: Link to document
Please drop me an email the contact form for the password!
What Changed?
The system reduced production friction, improved consistency, and gave the editorial team direct ownership over the visual output. The most underrated part was writing the guidelines at the right level of detail – considering from a non-figma user/non-designer perspective, it was like writing a manual for IKEA.
This scalability increased faster turnaround not just for designers (prioritisation), also editors can work on the visuals without waiting in the design queue.