2023
Digital Surge
Digital Surge was the leading cryptocurrency platform in Australia in 2023.
Design System
Figma
Project Foundation
My job was to make design enhancements and revamp an old unloved design system.
Project Foundation
We kicked off this project by asking the following questions:
"What can be improved?"
"What are the best tools for the job?"
"What features do we want to release first?"
"When is the first release due?"
Atomic Design Methodology
My design systems use Brad Frosts Atomic Design Methodology.
Typography
Figma can only use pixels for font size. I calculated the REM based on 16px body size and scaled all fonts with percentages using the “Hand>>over” plugin.
Pro Tip:
Here’s a handy calculator: http://pxtoem.com
4 px Grid System
This design system uses a layout grid of 4 pixels currently utilised by all major brands such as Linkedin, Twitter, Air BnB, and more. Ideally, all elements for UI components need to be divisible by four (yes, even text line height).
Component variables
Figma uses components to create variations.
BEM Model
Block, Element, Modifier means UI components are nested in many levels: namespace, category, concept, property, variant, and scale. These can also be called tokens.
Naming Conventions
All elements will contain information in the variants pallet that developers can copy from the Figma inspector panel to create the visual design with CSS.
Semantics
Semantics are and accessibility are the key to good a successful product.
Semantic HTML markup (headings, titles, alt attributes, etc.) will improve accessibility ratings and page rankings in search results.
More Works
(SG — 02)
©2024
2023
Digital Surge
Digital Surge was the leading cryptocurrency platform in Australia in 2023.
Design System
Figma
Project Foundation
My job was to make design enhancements and revamp an old unloved design system.
Project Foundation
We kicked off this project by asking the following questions:
"What can be improved?"
"What are the best tools for the job?"
"What features do we want to release first?"
"When is the first release due?"
Atomic Design Methodology
My design systems use Brad Frosts Atomic Design Methodology.
Typography
Figma can only use pixels for font size. I calculated the REM based on 16px body size and scaled all fonts with percentages using the “Hand>>over” plugin.
Pro Tip:
Here’s a handy calculator: http://pxtoem.com
4 px Grid System
This design system uses a layout grid of 4 pixels currently utilised by all major brands such as Linkedin, Twitter, Air BnB, and more. Ideally, all elements for UI components need to be divisible by four (yes, even text line height).
Component variables
Figma uses components to create variations.
BEM Model
Block, Element, Modifier means UI components are nested in many levels: namespace, category, concept, property, variant, and scale. These can also be called tokens.
Naming Conventions
All elements will contain information in the variants pallet that developers can copy from the Figma inspector panel to create the visual design with CSS.
Semantics
Semantics are and accessibility are the key to good a successful product.
Semantic HTML markup (headings, titles, alt attributes, etc.) will improve accessibility ratings and page rankings in search results.
More Works
(SG — 02)
©2024
2023
Digital Surge
Digital Surge was the leading cryptocurrency platform in Australia in 2023.
Design System
Figma
Project Foundation
My job was to make design enhancements and revamp an old unloved design system.
Project Foundation
We kicked off this project by asking the following questions:
"What can be improved?"
"What are the best tools for the job?"
"What features do we want to release first?"
"When is the first release due?"
Atomic Design Methodology
My design systems use Brad Frosts Atomic Design Methodology.
Typography
Figma can only use pixels for font size. I calculated the REM based on 16px body size and scaled all fonts with percentages using the “Hand>>over” plugin.
Pro Tip:
Here’s a handy calculator: http://pxtoem.com
4 px Grid System
This design system uses a layout grid of 4 pixels currently utilised by all major brands such as Linkedin, Twitter, Air BnB, and more. Ideally, all elements for UI components need to be divisible by four (yes, even text line height).
Component variables
Figma uses components to create variations.
BEM Model
Block, Element, Modifier means UI components are nested in many levels: namespace, category, concept, property, variant, and scale. These can also be called tokens.
Naming Conventions
All elements will contain information in the variants pallet that developers can copy from the Figma inspector panel to create the visual design with CSS.
Semantics
Semantics are and accessibility are the key to good a successful product.
Semantic HTML markup (headings, titles, alt attributes, etc.) will improve accessibility ratings and page rankings in search results.
More Works
©2024