ROLES
UX designer
UX researcher
Project driver
TEAM
Portia O'Callaghan, Squad lead
Deliverables
More internal tools
Embedded Files
Create an accessible and usable Figma library
Figma tools are an essential part of a design system, enabling design education, user support, and fostering designer contributions through collaboration, shared libraries, and organised updates.
The component library is a comprehensive collection of all 57 components from Cloudscape.
Cloudscape offers four core Figma libraries: foundation library, atomic library, complex component library, layout library
And a sticker sheet, illustration resources, demo examples, and other toolkits such as UX flows and AWS-service specific patterns to speed up the design workflow. All design resources allow for switching between light and dark mode in VR and Classic through the use of Figma variables.
Icons, styles, and design tokens (Figma variables) which enpower the other Figma libraries.
Low-level components like button, badge, and breadcrumb.
Components like form, tabs, container that you can combine together with Layout components to create custom page content.
A collection of layout components to create full-page designs.
Demo examples in parity with Cloudscape demos.
The sheet includes components states and variants.
Modular UX flows that allow designers to build a high-level overview and flow charts.
More
Design expertise
Educate and enable the design work.
Feature parity
Make sure the parity with coded components.
Figma features
Embrace the most recent features to enpowerthe libraries.
Color themes and modes
Support color mode change on each frame to make design scalable.
Contribution review
Review the team contribution or community contribution branches and merge them into design libraries.
Research
How might we
create a better component library?
More flexible?
More composable?
More consistent or more features?
What are the gaps?
Interview with 7 designers.
Drag & Drop
Designers prefer to search for components in the asset panels, then drag and drop onto the design canvas.
Copy & Paste
Designers prefer to copy and paste from Figma library directly.
Insights
Different types of users.
The structure of the component library is confusing.
Difficult to start with.
Detachment rate is high.
2/7 wanted dark mode out of the box.
Component overview for the high-level structural understanding.
Contribute to make it better.
Change log to notice the updates.
What's new to inform the new Figma features at file level.
Figma metrics audit and analysis
Within one month, I audited the metrics on 117 + 123 components in libraries with different color modes to understand further about where detachment happens. I pinned down the insertion, detachment, detachment rate for every component.
In the meantime, I browsed 300+ design files from 50+ teams and documented 150+ use cases, including best practices, misuses, confusion, etc.
One step further.
Let's create exercise sheets and join academy talks!
13 exercise sheets to get hands dirty
Exercise sheets is a form of education materials to help AWS teams understand how to use Cloudscape Figma resources. It includes brief introduction of the selected components and how to use it. Designers can practice Figma skills, such as swap slot, resize, auto-layout. They will also learn the properties and features, such as visual context, hidden layers, nested instances.
Internal talks and design sharing
In the internal open forum to share, practice and learn Figma skills, I shared the exercise sheets and taught Figma tricks, being welcomed by more than 144+ designers from the community.
Learning
Be curious and dive deep.
I enjoy working in a speed way.
Design and deliver requires actions and ownership.
However, while moving forward and further, it's important to understand where we are at current, and keep the focus in the heart.
Don't forget why we started.
Page updated
Google Sites
Report abuse