Safe Design System | Figma Community

About this project

To support the idea of being an open-source project, the design team can contribute by creating a workable version of the design system currently used for the Safe {Wallet} web UI.

With this design system we are targeting the following user groups:

• Tech-savvy (smart contract) developers
  • Safe Ecosystem developers
• Designers in web3 space, willing to learn more about smart contract wallet UI patterns

Key results

• Make the design system public and easy to fork for Web3 and Safe Ecosystem projects until the end of 2023;
• Have at least 50 copies of our shared Design System by the Figma Community users;
• Avg. rating of 4.5 on the Figma Community.

Requirements

• Components should use symbols, auto-layout, nested symbols (when applicable);
• Color variables;
• Dark & Light mode (based on the color variables);
• Technical names;
• Mobile-responsiveness:
  • Typography
  • Modals
    • E.g. File upload
  • Page headers
  • Navigation
  • Grids
  • Cards (e.g. cards on the Dashboard)

Results

<aside> <img src="/icons/add_green.svg" alt="/icons/add_green.svg" width="40px" /> 1. We achieved 70 likes and 1000 users in less than a month. 2. During the project, I enhanced my skills in developing design systems, using Figma tokens, and communicating with team members.

</aside>