Webpage Design System
The Creative Studio team I worked with at Block was responsible for designing and managing our news website, which included news articles and campaign pages. Typically, we had to create a mock-up of the page we were building in our CMS, which was time-consuming—having to export and upload assets and then build the page from scratch to show stakeholders a mockup.
In Figma I built a design system that copied the components from our CMS (some limitations due to what you can and can’t do in Figma). With this design system designers can quickly mock something up and share it with whoever needs to review it.
Here is a video showcasing how you would build out a page for desktop and mobile.
COMPONENT BREAKDOWN
With all the components, I made it so a designer can change everything in the component using the design side panel or they can dive right into the layers and change things that way. Some components are very complex and some are pretty self-explanatory, below are a few videos showing them being used. All can have their width adjusted using the variables in the design side panel.
All components are built in a desktop and mobile version.
(Once you are able to add fonts, text styles, and font sizes in variables in Figma I would only need to have one version of each component since the sizes for mobile will be handed in variables)
Accordion
The most complex component, in the component you have a tile that the H-Tag can be either H3 or H4. After that, you have 6 cells that make up 2 columns and 3 rows In each cell, you can either have text or an image. Then you can turn off cells to have the cell next to it expand across the whole row.
Icon Stack
Pretty simple component, an icon, title, and copy. You can turn on or off the title. You can change the icon from the icon library the team built out using the instance swap property feature. And lastly, picking the orientation of the icon being on top or to the side.
(Had to make those two different components, if Figma allowed changing the auto layout direction on a component variant then I would have only needed one version.)
Pull Quote
A little complex but not too bad. Now in our CMS in this component, we could change the font of both the quote and the author so one way to do it is, you have the designer go in and change the text style or the way I built it out was to have two of the same layer but styled differently, and then link both of them to the component text field so if you did want to change the font you would just have to toggle one on and the other off. And lastly, there is a toggle to have the author on or off.
Shape Link Group
This component is meant to be at the end of a webpage for any additional links. Just some text and then a shape icon with an arrow in it that can be changed to a different shape.
You can have 5 all stacked onto of each other.
Here is a side-by-side screen capture of a final webpage built from our CMS compared to a mockup built in Figma using this design system.
Link to the live article.
(Note: the background of the CMS version is a gradient and doesn’t capture well when trying to capture a full-page screenshot.)