6. 디자인시스템 - 샘플 Component 제작

이제 본격적으로 컴포넌트를 제작해 보자!

Figma에 생성된 Component를 Storybook으로 옮기는 과정을 정리해 둔다.

좀더 좋을 방법이 있다면 계속 개선해 나갈 예정이다.

 

1. 공통 scss 작성

• _variables.scss : css 변수 모음

...
$color-global-mint90: #003B40 !default;
$color-global-mint80: #004C53 !default;
$color-global-mint70: #006D78 !default;
...

 

2. Figma -> Storybook Compoent 작성

2.1. Figma Code -> Anima

Figma to Code 플러그인 중에서 필자가 구성한 Storybook에서는 Anima가 제일 유사하여 선택하고 진행

 

2.2. styleguide.css 가져오기

 

 

방법1 (필자가 선택한 방법)

필자는 scss를 사용함으로 scss형태로 변환해 주자.

 

방법2

.storybook > preview-head.html에 코드를 추가하고 css에서 `background-color:  var(--aaaaaa);`과 같이 사용해도 된다.

 

2.3. style.css

scss형태로 변환해 준다.

figma에서 가져온 code는  `var(--lightbuttonbackground-disabled)`임으로 vscode에서 정규식으로 scss형태의 변수로 치환해 준다.

 

Before

.button-box-solid.disabled {
  background-color: var(--lightbuttonbackground-disabled);
}

 

After

.button-box-solid {
  &.disabled {
    background-color: $lightbuttonbackground-disabled;
  }
}

 

2.4. component 가져오기

Figma에서 제공되는 코드를 Strorybook에 적용한 후 확인해 본다. (테스트 가능 할 정도만 변환)

 

import React from 'react';

interface ButtonProps {
  rightIcon: false;
  label: string;
  leftIcon: false;
  size?: 'large' | 'medium' | 'small';
  type?: 'primary' | 'secondary' | 'tertiary';
  state: 'enabled' | 'pressed' | 'disabled';
  error: 'true' | 'false';
  className: any;
  /**
   * Optional click handler
   */
  onClick?: () => void;
}

/**
 * Primary UI component for user interaction
 */
export const Button = ({ rightIcon = false, label = 'Button label', leftIcon = false, size, type, state, error, className }: ButtonProps) => {
  return (
    <div className={`button-box-solid ${size} ${state} ${type} error-${error}`}>
      <div className="button-label">{label}</div>
      {state === 'pressed' && <div className="dim" />}
    </div>
  );
};

 

3. 확인

 

 

테스트 용으로 만든 소스를 rollup으로 빌드 후 npm에 올리고 테스트 app를 만들고 실행 해 보니 정상적으로 동작하였다.

 

이번 분기에는 10DS만 할애해서 디자인 시스템을 어떤식으로 만들고 활용할지에 대한 리서치 및 디자인팀과의 협의 정도 였는데, 아직 보안할 점이 보이긴 하지만 실무에서 바로 사용하면서 개선해 나가도 될정도의 프로토타입이 나온것 같아서 다행이라고 생각한다.

 

프로토타입 및 방향성은 정했으니 다음 분기에는 DS를 좀더 투입하여 부족한 부분들은 보완하고 실제 프로젝트에 적용하도록 하자.

 

https://dchkang83.tistory.com/220

3. 디자인시스템 - npm에서 받아서 활용해보기