Page MenuHomePhabricator

Document in Figma the parts of a Design System: tokens, assets, components and patterns
Closed, ResolvedPublic

Description

Background/Goal

Designers need to understand the difference between tokens, components and patterns to use the system and create new designs. This task is about clearly defining and explaining the different parts of the design system and providing instructional information for those using them in their work.

Captura de pantalla 2022-03-08 a las 11.10.17.png (298×1 px, 120 KB)

User stories

As a designer, I need to understand the difference between tokens, components and patterns in order to use them for proper use of the system and also to create new components for my projects.

Acceptance criteria (or Done)

  • Document the different parts of a design system: tokens, assets, components and patterns
  • Add this documentation as an introduction section for designers in our design system Figma file

Event Timeline

bmartinezcalvo renamed this task from Document in Figma the parts of a Design System: tokens, components and patterns to Document in Figma the parts of a Design System: tokens, assets, components and patterns.Mar 8 2022, 10:11 AM
bmartinezcalvo updated the task description. (Show Details)

I've documented the different parts of a system (tokens, assets, components and patters) to include it as Introduction for designers in our Figma file. The idea is that all designers can learn the differences between these elements.
You can view the Figma proposal here.

Captura de pantalla 2022-03-09 a las 13.43.44.png (1×2 px, 1 MB)

Also, I've created the same content in this Notion(I created the Notion before the Figma spec so we have both available).

NOTE: As always, I'm working in a Figma branch so when the documentation is reviewed I will merge with the WikimediaUI components file.

cc: @iamjessklein @Sarai-WMDE do you think this documentation is enough for designers? Could we add something more? I've added you as reviewers in the Figma branch so you give me feedback.

@bmartinezcalvo - thanks for writing this ticket.

I've slightly revised the language that you put in the task description above. In terms of user stories, I believe that there are more stories to add here, probably for other functions on the product team.

@KieranMcCann had some ideas for these illustrations, so I'm copying him here.

cc @STHart for good measure

bmartinezcalvo updated the task description. (Show Details)

@KieranMcCann waiting for your illustrations to view if we update them in the file but I close the task as the documentation has been done.

No problem @bmartinezcalvo. They are on my list to do but low priority at the moment. Will message you once they’re done