인코딩하기 쉬운 Figma 데이터 제작 고려

🎄 개시하다
Qiita주식회사 Advent Calendar 2021 9일째는 Qiita주식회사 제품개발 G디자인TM의 상택@aizawa213!잘 부탁드립니다!
이게 뭐야?
나는 올해 졸업 후 큐타 주식회사에 들어가 디자이너 일을 시작했다.
회사라는 조직에서 디자인을 하면서 コーディングしやすいFigma의 중요성을 다시 한번 느끼고 정리를 해봤어요.
정답입니다!그게 아니라 소통하면서 올리고 싶은 내용인데 「これは違いそう」「こういうのも欲しい」 등이 있다면 編集リクエスト와コメント였으면 좋겠어요!
사전 요구 사항 공유
이 글은 다음과 같은 상황을 전제로 한다.
경우에 따라 적용되지 않는 내용도 있으니 양해 부탁드립니다.

Figma를 사용하여 웹 서비스를 만드는 UI 디자인

Figma를 보면서 디자인을 만든 본인 이외의 사람이 인코딩

디자이너가 표시/스타일링 부분/심사팀을 맡는다

발생하기 쉬운 문제 조사
우선 Figma의 데이터를 상대방에게 전달하고 인코딩을 요청할 때 쉽게 놓을 과제를 열거한다.
구상의 표기와 편차가 있다
나는 웹 서비스의 UI를 디자인할 때 기본적으로 표시를 구상으로 디자인했다.
인코딩할 때 표기를 다시 고려하는 것은 매우 번거롭다. 디자인한 사람과 다른 표기를 구상하면 정보 구조와 스펀지 처리를 할 때의 행위는 의도와 다르다.
구상의 풍격과 차이가 있다色,フォント,余白의 지정 등은Figma와 편차가 있어서 쉽다고 생각합니다.
또 빈 사이즈가 맞더라도 원하는 곳padding이 있다margin.
비현실적 행위
허버, 디스패치, 포커스, 블랙 등의 상태 변화가 있는 상황에서'처음 디자인했을 때','디자인을 전달할 때','설치할 때'등의 행위가 누설되기 쉽다.
또 내용이 변하는 요소는 내용을 넘어설 때 어떻게 해야 할지 고민해야 한다.
규격에 관한 평론과 규격 이외의 평론이 뒤섞여 있어 이해하기 어렵다
위에서 전달하고자 하는 내용을 Figma의 댓글 기능으로 저장하면 다른 댓글과 확인 댓글에 묻히기 쉽다.
결국 댓글을 남겼는데 못 찾더라고요.
인코딩하기 쉬운 Figma 데이터 고려
어떤 데이터를 만들어야 이 같은 과제를 해결할 수 있는지 고려해 다음과 같은 리스트를 작성했다.

공유 사전 요구 사항

표기의 의도를 쉽게 알 수 있다

양식을 이해하기 쉬운 지정

공통부분과 다른 부분을 구별하기 쉽다

상황에 따라 달라지는 부분을 이해하기 쉽다

각각 상세하게 쓰다.
공유 사전 요구 사항
우선, 디자인/인코딩에서 빈번하게 나타나는 (색상과 글꼴의 지정, 단추 등 구성 요소)를 전제 규칙으로 공유하면 각 파일에서의 교류를 줄일 수 있다.
Qita주식회사에서 다음과 같은 것은 제가 회사에 들어왔을 때 디자인 시스템으로 정의되었습니다.

Color, Font size 등 상용 양식

Button, Input 등 서비스 전반에 걸쳐 사용되는 구성 요소

Header, Footer 등 각 서비스 구성 요소

이렇게 자주 사용하는 물건은 미리 정의하고 참조할 수 있어 모든 파일의 교류를 줄일 수 있다.
버튼과 인풋 등 상태 변화의 요소Variants 기능에도 각각의 스테이트가 정의돼 있다.
자세한 내용은 아래의 Qita 블로그에 소개되어 있으니 꼭 보십시오.

Qita의 디자인 시스템 공개 알림(전편)

Qita의 디자인 시스템 공개 알림(후편)

표기 의도는 이해하기 쉽다
제가 Figma로 디자인을 만들 때 어느 정도의 태그를 고려하여 디자인을 구성하는 경우가 많습니다.또 고려한 표기 구조를 바탕으로 스펀지의 행동 등을 구상해 디자인했다.
따라서 Figma의 데이터로 의도를 전달하는 표지를 인코딩하면 표지를 다시 고려하는 두 번의 번거로움과 의도하지 않은 행동을 줄일 수 있다.
아래의 데이터 제작을 통해 의도를 전달할 수 있다.div、section 등은 표지 중タグ에 포위된 부분Frame을 설정하고, 반대로 표지에 포위되지 않은 부분은 Frame을 설정하지 않는다.
이렇게 하면 어느 정도 라벨로 어디를 감쌀 수 있다.
또한 레이블을 연상시키는 프레임 이름을 사용해 의도를 전달할 수 있는 태그를 사용할 수 있다.

Ex

<section /> → 〇〇 section

<ol /> , <ul /> → 〇〇 list

<li /> → 〇〇 list item

<article /> → 〇〇 article card

반면 리스트list가 아니면 섹션wrapper인 만큼 헷갈리지 않는 프레임 이름을 붙이는 것도 중요하다.
스타일 지정이 간단하고 알기 쉽다
속성에 관하여 FigmaInspect는 패널에 간단명료하게 나타날 수 있습니다.

이런 느낌.
또 표기 목적의 구조를 채택함으로써 도층 구조에서 읽을 수 있다どこからどこまでが一つのオブジェクトなのか.
이렇게 하면 Padding 공백 margin 을 취할 것인지, 배경색을 어디에 추가할 것인지 등을 읽을 수 있다.
공통 부분과 다른 부분을 구별하기 쉽다
UI를 만들 때 반복 모드가 발생할 확률이 높습니다.
반복적으로 나타나는 요소는 구성화를 통해 같은 스타일이 좋다는 것을 쉽게 알 수 있다.
반대로'매우 비슷하지만 미묘한 다른 요소'도 어느 정도 발생한다.또한 Figma는 구성 요소Override에서 상당히 유연하게 변경할 수 있다.
이 경우 서로 다른 부분과 변경된 부분을 댓글에 남기면 누락에 대비할 수 있다.
상황에 따라 달라지는 부분을 이해하기 쉽다
공통 부분과 다른 부분을 쉽게 구별할 수 있다'에 가깝지만 UI는 항상 상태에 따라 모양과 내용이 달라진다.Blank 또는 Loading, Hover 또는 Disabled, 디바이스 폭의 변화, 텍스트 증가 및 감소 등에 대해 고려해야 할 상태가 많습니다.
디자인 데이터로 이런 상태 변화를 만들어야 한다.
또 어렵게 만들었는데 찾지 못하면 의미가 없기 때문에 방치 방법에 규칙을 두고 미술판에 라벨을 설치하면 쉽게 찾을 수 있을 것 같다.
이밖에 호버의 행동, 화면 이동, 롤링 시 행동 등을 활용プロトタイプ機能해 원활하게 전달할 수 있다!
모르면 바로 들려
고민을 많이 했는데 마지막으로 중요한 건 "여기가 잘 모르겠구나"라고 생각할 때 내 말을 편하게 들을 수 있다는 거예요.
기왕 사람이 하려면 완벽하기도 어렵고 완벽하기도 어렵다.
물론 더 좋은 데이터를 만들기 위해 노력하면서도 "응?"이런 상황에 처했을 때 쉽게 들을 수 있는 디자이너가 되도록 노력하겠습니다!
마지막
여기까지 읽어주셔서 감사합니다!
내일Qiita주식회사 Advent Calendar 2021은 Qiita주식회사 공동기초개발팀의 우물@mziyut이 맡는다!