[Material Design] 개발자/ 디자이너가 협업할 때 중요한 Figma 의 주요 기능 (style / component / const

figma 기능을 잘 활용하면 디자이너와 개발자의 협업을 더 효율적으로 할 수 있다.
개발자 디자이너 협업캠프에서 디자이너님께서 알려주신 내용을 바탕으로
협업할 때 사용하기 좋은 figma의 주요기능과 개발단에서의 관점들을 정리해보았다.

Material design을 기반으로 하였으며 자세한 내용은 아래링크의 다큐먼트를 참고하면 된다.
개발 코드 예시는 모두 flutter dart이다.

material.io/

Material Design

---

style

서비스 UI에서 쓸, 혹은 쓰고 있는
폰트(font), 컬러(color), 그림자(shadow), 격자(grid) 스타일을 미리 정의한다.

👉 피그마 디자인 파일에서 스타일 지정하기

www.youtube.com/watch?v=gtQ_A3imzsg

👉 개발단에서의 관점
피그마에서 디자이너가 정의해준 스타일을 개발단에서 테마로 지정할 때 코드 재사용성을 높이고 디자인 단에서 스타일이 변경되었을 때 코드상에서 수정해야할 코드의 수와 시간을 단축시킬 수 있다.

1. 컬러
디자이너와 지정한 컬러명과 컬러 팔레트를 코드 상에서 테마로 지정한다.

1) 컬러지정을 하지 않았을 경우
각 component들에게 색깔을 일일히 지정해줘야한다.

Icon(
	Icons.check_circle,
	color:Color(0xFF6200EE),
),

2) 컬러팔레트 지정해주었을 경우
디자이너가 지정해준 컬러팔레트를 코드 단에서 테마(theme)로 지정해 색상을 한꺼번에 적용할 수 있다.
이후 컬러를 수정할 때 해당컬러를 사용한 코드를 찾아서 일일히 수정할 필요없이 theme의 컬러만 수정해주면 된다.

[코드 예시]

1) 디자이너와의 소통을 원활하게 하기 위해 hex 단위의 색상코드를 바로 적용하지 않고
디자이너와 결정한 컬러명으로 컬러 변수를 정의한다.

const kVinePurple50 = Color(0xFFF2E7FE);
const kVinePurple100 = Color(0xFFDBB2FF);
const kVinePurple200 = Color(0xFFBB86FC);
const kVinePurple300 = Color(0xFF985EFF);
const kVinePurple400 = Color(0xFF7F39FB);
const kVinePurple500 = Color(0xFF6200EE);
const kVinePurple600 = Color(0xFF5600E8);
const kVinePurple700 = Color(0xFF3700B3);
const kVinePurple800 = Color(0xFF30009C);
const kVinePurple900 = Color(0xFF23036A);

2) 위에서 정의한 컬러들을 사용해 테마(material theme)에서 컬러 팔레트를 설정한다.

ThemeData _buildVineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    primaryColor: kVinePurple500,
    accentColor: kVineCyan300,
    dividerColor: kVineDividerGray,
    colorScheme: ColorScheme(
        primary: kVinePurple500,
        primaryVariant: kVinePurple500,
        secondary: kVineCyan300,
        secondaryVariant: kVineCyan300,
        surface: kVineSurfaceWhite,
        background: kVineSurfaceWhite,
        error: kVineErrorRed,
        onPrimary: kVineOnPrimaryWhite,
        onSecondary: kVineOnSecondaryBlack,
        onSurface: kVineOnSurfaceblack,
        onBackground: kVineOnBackgroundBlack,
        onError: kVineOnErrorWhite,
        brightness: Brightness.light),
    buttonColor: kVinePurple300,
    textTheme: _buildVineTextTheme(base.textTheme),
    primaryTextTheme: _buildVineTextTheme(base.primaryTextTheme),
    accentTextTheme: _buildVineTextTheme(base.accentTextTheme),
  );
}

3) 테마에서 설정한 컬러를 컴포넌트에 지정한다.
컬러팔레트의 primary 컬러를 사용하고 싶다면 theme.colorScheme (컬러팔레트)의 primary로 지정해준다.
코드 예시는 아래와 같다.

Icon(
	Icons.check_circle,
	color:theme.colorScheme.primary,
),

2. 텍스트
디자이너가 정의한 텍스트 스타일 headline을 테마로 설정한다.

1) 컬러팔레트 지정해주었을 경우
color와 마찬가지로 텍스트마다 text style을 일일히 적용해주는 것이 아니라 theme으로 정의해
일괄적으로 text style을 지정해주기 때문에 수정하기에 용이하다.

[코드 예시]

1) 코드 예시에서는 Roboto font를 사용해 text theme을 지정해보았다.

TextTheme _buildVineTextTheme(TextTheme base) {
  return base
      .copyWith(
        headline1: base.headline1,
        headline2: base.headline2,
        headline3: base.headline3,
        headline4: base.headline4,
        headline5: base.headline5,
        headline6: base.headline6,
        subtitle1: base.subtitle1,
        subtitle2: base.subtitle2,
        bodyText1: base.bodyText1,
        bodyText2: base.bodyText2,
        button: base.button,
        caption: base.caption,
        overline: base.overline,
      )
      .apply(
        fontFamily: 'Roboto',
      );
}

2) 테마에서 설정한 텍스트 스타일을 컴포넌트에 지정한다.

Text(
	title,
	style: Theme.of(context).textTheme.headline6,
),

3. 그리드 (grid)
그리드를 이용해 UI의 패딩과 마진값을 정의해서 사용할 수 있다.

1) 그리드를 지정해주었을 경우

피그마 상에서 디자이너가 설정해준 패딩값을 일일히 확인하는 방법을 사용하지만
위의 사진처럼 디자이너가 패딩과 마진값을 정형화해서 지정해둔다면 개발시간이 훨씬 단축된다.
padding 값도 color처럼 개발단에서 변수값을 지정해 사용한다면 수정하기가 용이하다.

[꿀팁]

구글 머테리얼 디자인에서는 4dp 단위로 설정하는 것을 권장한다.
피그마 상에서 ctrl -g 하면 그리드 껐다 킬 수 있다.
mac에서는 option을 길게 누르고 원하는 component를 누르면 padding값을 알 수 있다.

---

Components

컴포넌트를 제작할 때, 컴포넌트들 간에 디자인적 통일성을 부여하도록 하자. 이 때 컴포넌트를 구성하는 스타일은 디자이너가 미리 지정한 스타일을 적용한다.
서비스 UI를 구성하는 컴포넌트가 master화가 되어 있으면 디자인 수정사항이 생겼을 때 해당 컴포넌트를 사용하는 디자인에 수정사항이 일괄적으로 적용되기 때문에 컴포넌트를 쉽게 관리할 수 있다.

👉 피그마 디자인 파일에서 컴포넌트 지정하기

www.youtube.com/watch?v=k74IrUNaJVk

👉 개발단에서의 관점

디자이너가 피그마 파일에서 마스터화 해준 컴포넌트를 개발단에서도 컴포넌트 파일로 분리해 개발한다면 코드 길이도 짧아지고 수정 시간이 절약된다. 똑같은 스타일의 버튼을 일일히 하드코딩하지 않도록 하자.

[코드 예시]
예시 코드는 버튼을 component화 하고 필요한 text 값를 바꿔끼워 사용할 수 있는 형태이다.

1) 컴포넌트화 하지않고 하드코딩했을 때 컴포넌트를 사용하기 위한 코드

//component 적용 전 
Container(
      width: 44,
      height: 13,
      child: Center(child: Text('ONGOING', style: TextStyle(color: Colors.white, fontSize: 8),)),
      decoration: BoxDecoration(
        color: theme.accentColor
        borderRadius: BorderRadius.circular(5),
      ),
    )
    

2) 컴포넌트화 하였을 때

- 컴포넌트를 사용하기 위한 코드

testStateButton('ONGOING')

- 컴포넌트를 구성하는 코드

class testStateButton extends StatelessWidget {
  String state;
  testStateButton(this.state);

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Container(
      width: 44,
      height: 13,
      child: Center(child: Text(state, style: TextStyle(color: Colors.white, fontSize: 8),)),
      decoration: BoxDecoration(
        color: state=='ONGOING' ? theme.accentColor: theme.buttonColor ,
        borderRadius: BorderRadius.circular(5),
      ),
    );
  }
}

---

Constraints

반응형 웹 페이지 혹은 앱을 만들 때
디바이스 별 화면 크기에 변화가 생겼을 경우 component들의 크기와 위치가 변화하는 규칙을 정의한다.
ex) 디바이스의 width가 길어질 때 버튼하나는 왼쪽에 고정, 또 다른 버튼은 무조건 오른쪽에 고정하도록 한다.

👉 피그마 디자인 파일에서 constraints 지정하기

www.youtube.com/watch?v=LHY9cm_2zwU

👉 개발단에서의 관점

대부분 반응형 break point에 따라 프레임을 나눠 디자인하는 방식을 사용하지만
constraints를 지정해준다면 디자인파일에서 break point 간의 컴포넌트 변화를 직접 확인할 수 있어
디자이너와의 커뮤니케이션이 용이해질 것이라 생각한다.

---

Auto layout

컴포넌트를 구성하는 요소의 크기에 따라 컴포넌트 크기 또한 자동적으로 변화하도록 한다.
컴포넌트의 패딩과 마진값을 설정하는 방법.

👉 피그마 디자인 파일에서 auto layout 지정하기

www.youtube.com/watch?v=TyaGpGDFczw

👉 개발단에서의 관점

디자이너가 프로토타입에서 목업데이터를 사용해 그려준 컴포넌트 예시로는 버튼 텍스트의 길이가 길어지거나
리스트의 데이터가 두 줄 이상일 때 등의 경우를 모두 예측할 수 없다.
auto layout을 설정하면 디자이너와의 커뮤니케이션이 더 용이할 것으로 보인다.

---

Variants

요소 내 상태 변화를 설정하는 기능이다.
컴포넌트를 master한 후 디자인 통일성이 필요한 컴포넌트들을 묶어 variants에 추가하면 상태값을 지정할 수 있다.
ex) 버튼 : basic , hover, inactived / 체크박스 :checked , unchecked

👉 피그마 디자인 파일에서 variants 지정하기

www.youtube.com/watch?v=y29Xwt9dET0

👉 개발단에서의 관점

웹의 경우 사용자 인터렉션에 따라 inactived, hover, actived 했을 때의 디자인을 지정해주어야하기 때문에 꼭 필요한 기능! 아래의 링크에서 예시를 살펴보자
www.figma.com/community/file/903303571898472063

Figma - Figma Variants Playground | Variants are a new way to create, organize, and use components. If you’ve ever created mul