진행 기간: 1주차(20250303-20250309)

진행 강의:

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

강의

이번 주차에는 섹션 3개 분량의 내용을 다뤘습니다.

• 특히 디자인 시스템에 있어서 가장 중요할지도 모르는 스타일 파운데이션을 만드는 부분을 다뤘습니다.

  • 크게 개념 소개 및 구조 부분 섹션, 이론 및 실습 두 섹션(색상 및 타이포그래피, 간격, 그림자, 그리드)으로 나누어 학습하였습니다.

    • 섹션 1에서는 스타일 파운데이션을 만들기 위해서 디자인 시스템, 디자인 토큰의 개념과 figma에서 도입된 베리어블(variables)에 대해서 알아보았습니다.

    • 섹션 2에서는 여러 디자인 시스템에서의 예시를 바탕으로 나만의 색상 베리어블의 이름과 구조을 만들고, 타이포그래피 베리어블과 스타일을 만드는 것과 베리어블 인터페이스와 플러그인을 통해 실제로 정의하고 적용하는 법에 대해 알아보았습니다.

    • 섹션 3에서는 간격 베리어블을 정의하는 다양한 방식과 적용 방법, 다양한 효과 및 특히 그림자 효과의 이론적인 적용과 베리어블과 스타일을 활용한 실제 적용 방법, 그리드 시스템의 적용 방법에 대해서 알아보았습니다.​​

미션

진행해야 할 미션은 총 3가지 였습니다.

• 색상 베리어블 인증샷 & 링크 제출

• 타이포그래피 베리어블 & 링크 제출

• 기타 스타일 인증샷 & 링크 제출

이전까지는 디자이너가 아닌 개발자로서 Material Design System 같이 이미 잘 정의되어 있는 디자인 시스템의 요소를 사용하는 것에만 집중하였기 때문에, 강의의 개념과 적용 방법이 익숙하지 않았습니다. 진땀을 흘리면서 여러 번 강의를 반복해 들으며 미션을 진행하였습니다.

회고

이전에는 스스로에게 있어 Figma가 아주 단순한 프로토타입 디자인 용도로 활용되었다면, 이제는 App, Web 플랫폼의 디자인의 밑바탕을 직접 그리는 용도로 쓰임이 진화하였다는 느낌이 들었습니다. 또 베리어블을 통해 프로그램처럼 체계적으로 나의 색상, 타이포그래피, 간격 등을 관리하고 적용할 수 있는 실마리를 발견하였던 한 주였습니다.