Drag&Drop web design system for the Forward marketing team
Overview
Due to a small design team, many web pages on the Forward website were designed by marketers. To keep the website design consistent, I categorized and refined all the existing design patterns and built a "drag-and-drop" design system in Figma. Marketers can grab the necessary website sections and quickly assemble a webpage. The design system has dramatically accelerated marketers' creation and 90% of Forward web pages are rebuilt with this system.
Date
2021.3-2021.5
Drag&Drop web design system for the Forward marketing team
Overview
Due to a small design team, many web pages on the Forward website were designed by marketers. To keep the website design consistent, I categorized and refined all the existing design patterns and built a "drag-and-drop" design system in Figma. Marketers can grab the necessary website sections and quickly assemble a webpage. The design system has dramatically accelerated marketers' creation and 90% of Forward web pages are rebuilt with this system.
Date
2021.3-2021.5
Drag&Drop web design system for the Forward marketing team
Overview
Due to a small design team, many web pages on the Forward website were designed by marketers. To keep the website design consistent, I categorized and refined all the existing design patterns and built a "drag-and-drop" design system in Figma. Marketers can grab the necessary website sections and quickly assemble a webpage. The design system has dramatically accelerated marketers' creation and 90% of Forward web pages are rebuilt with this system.
Date
2021.3-2021.5
Step 1
Start with a template
Go to the example page and pick a template to start with
Step 1
Start with a template
Go to the example page and pick a template to start with
Step 1
Start with a template
Go to the example page and pick a template to start with
Step 2
Change copy/images/icons
Hold the Command key ⌘ or multi-click to select the element you want to edit
Step 2
Change copy/images/icons
Hold the Command key ⌘ or multi-click to select the element you want to edit
Step 2
Change copy/images/icons
Hold the Command key ⌘ or multi-click to select the element you want to edit
Step 3
Drop a new section and edit it
Need more content? Head to the section page and copy a section. Paste it to your design frame. The section will automatically snap to the end of the frame.
Step 3
Drop a new section and edit it
Need more content? Head to the section page and copy a section. Paste it to your design frame. The section will automatically snap to the end of the frame.
Step 3
Drop a new section and edit it
Need more content? Head to the section page and copy a section. Paste it to your design frame. The section will automatically snap to the end of the frame.
