Built the design system for fast validation of product hypotheses.
June 2021
Improving the productivity of the product team by the design system was important, but it was even more important to deliver value to the current users we are facing. The five-member MyMusicSheet product team had to create a design system with few resources, while still reaching the current product goal.
I discovered a design system tool that can minimize the communication cost between developers and designers. Initially, it took considerable time to define the clear spec of each component, but I viewed it as a necessary step for the next stage. Otherwise, more time was spent managing and delivering the component specifications. This occurred because designers and developers used different tools once the specifications were confirmed.
I selected Framer as a design system tool that designers and developers can manage together. In Framer, the designer can define the actual props, variants, and adornments from the UI design phase. When designing Nested Components, I could give developers the component details by managing the prop for sub-components as objects.
addPropertyControls(MPInput, {
pseudoClass: {
type: ControlType.Enum,
displaySegmentedControl: true,
defaultValue: "normal",
options: ["normal", "hover", "focus"],
},
status: {
type: ControlType.Enum,
displaySegmentedControl: true,
defaultValue: "normal",
options: ["normal", "error", "disabled"],
},
size: {
type: ControlType.Enum,
displaySegmentedControl: true,
defaultValue: "l",
options: ["m", "l"],
},
required: {
type: ControlType.Boolean,
defaultValue: false,
},
customHeight: {
type: ControlType.Boolean,
defaultValue: false,
},
_height: {
type: ControlType.Number,
title: "ㄴ Height",
defaultValue: 40,
hidden(props) {
return props.customHeight === false
},
},
label: {
type: ControlType.String,
placeholder: "Label",
defaultValue: "Label",
},
placeholder: {
type: ControlType.String,
placeholder: "Placeholder",
defaultValue: "내용을 입력해주세요",
},
value: {
type: ControlType.String,
placeholder: "Value",
},
helperText: {
type: ControlType.String,
placeholder: "Helper Text",
},
prefix: {
type: ControlType.String,
placeholder: "prefix",
},
suffix: {
type: ControlType.String,
placeholder: "suffix",
},
...inheritProps("Icon_L", "leftIcon2", mpIconProps, ["iconName"]),
...inheritProps("Icon_R", "rightIcon2", mpIconProps, ["iconName"]),
customBG: {
type: ControlType.Boolean,
defaultValue: false,
},
backgroundColor: {
type: ControlType.Color,
title: "ㄴ Background",
defaultValue: colors.White,
hidden(props) {
return props.customBG === false
},
},
customRadius: {
type: ControlType.Boolean,
defaultValue: false,
},
...fusedNumber({
variableName: "radius",
defaultValue: 5,
type: "corner",
hidden(props) {
return props.customRadius === false
},
}),
shadow: {
type: ControlType.Boolean,
defaultValue: false,
},
shadowLiteral: {
title: "ㄴ Literal",
type: ControlType.String,
defaultValue: "0px 0px 1px rgba(0,0,0,0.2)",
hidden(props) {
return props.shadow === false
},
},
})
With Property Controls, developers and designers can handle component specifications together. Since it uses props from real product creation, updates to design and development can be made simply by adjusting the code.
As you can see in the picture, designers can quickly deliver the final design using real props and variations of components. If we need a design that changes the specs of current components, these changes are automatically sent to the developer. This happens through Git and Slack messages when the Framer code file is changed. This workflow has made it easier to keep our design system up to date.
We used a system that let translators work with translation files directly and check the workflow on the design. MyMusicSheet, a global service, managed translations in five languages. The old way involved sharing screen captures for translation, which often caused errors because the screen flow was unclear. Translation files stored locally and on Slack could get lost. If a translator enters text in various languages into the Framer component, it gets applied to the design draft. The developer can then take the file from Framer and use it in the development setting.
After working on the design system for about 3 months, we were able to validate as many product hypotheses as possible, exceeding our initial plans. Most importantly, the product team became more focused on discovering the real problem, not just on the visual outputs.
Components List
· Aside Button
· Badge
· Button
· Callout
· Check
· Dialog
· Divider
· File Upload Item
· Helper Text
· Icon Button
· Icon
· Input
· Menu Cell
· Pagination
· Progress
· Radio
· Slider
· Spacing
· Spinner
· Switch
· Tab Item
· Text
· Textarea
· Toast
· Tooltip