Skip to content

[Task] Research & define the design principles for component construction within the VF Figma Library #2398

Description

@bhushan-ebi

Summary

Alongside our day-to-day design work, the Design team is establishing a shared set of principles and best practices for building and maintaining the Visual Framework Figma library. We'll initially apply best practices to new or rebuilt components only - no retrospective componentry.

We need to define how we build components in the public Visual Framework library so that everyone works consistently, atomically, and in alignment with existing and future design tokens.

Areas of focus include:

  • Atomic component construction and composition
  • Responsible component architecture and reuse
  • Alignment with current design tokens
  • Preparation for upcoming tokens and standards (e.g. vf-spacing, vf-radius, and potential typography updates)

Why

The inherited Visual Framework Figma file no longer reflects current best practices for component creation and maintenance. Refreshing these foundations will improve consistency, reduce design debt, speed up component development, and make the public library easier for both the Design team and external contributors to use.

Working Document

We are using the attached document as the working artefact where we capture principles, procedures, discussions, and best practices as they evolve.

Outcome

This ticket marks the initial research and definition of our design ops principles regarding building designs in Figma. The outcome is to share suggestions for additional guidance or standards that would improve consistency, scalability and usability across our files.

Guidance and standards that help us with;

  • Design principles and decision-making
  • Component architecture guidance
  • Best practices and agreed processes
  • Discussion points and future improvements

As the work evolves, this ticket and the accompanying document should become the source of truth for how we build and maintain the Visual Framework design library.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions