Figma로 오리지널 아이콘을 만들 때 발생하는 문제점과 해결 방법

처음 뵙겠습니다.저는 Monoxer, Inc.의 디자이너, 모요입니다.
평소 웹페이지, 애플리케이션의 UI와 경험을 디자인하고 엔지니어들과 협업해 디자인 시스템을 활용한다.
추가 달력 최초 참가!저는 처음 Qita입니다.
이 글의 요약

Figma로 아이콘을 만들면 이루어지면 몇 가지 문제가 생긴다

Figma 측의 처리 또는 설정 변경을 통해 해결

플러그 인 "Fill Rule Editor"는 매우 편리합니다!

Figma로 자체 제작 아이콘!
스케치를 사용할 때는 Illustrator로 아이콘을 만들어 스케치에 들어가지만 Figma로 옮기는 것을 계기로 아이콘도 Figma로 만들었다.
이런느낌↓

이 아이콘들은 엔지니어가 다음 프로그램 라이브러리를 사용하여 실시한 것이다
몇 가지 문제가 발생했기 때문에 Figma의 해결 방법을 소개했으면 좋겠다고 생각합니다
발생한 문제와 해결 방법
1. 아이콘의 선이 겹친다
문제.
Figma에서 대상을 두껍게 발라 설치하면 두 겹의 상자가 된다.

해결책

부품이 모두 결합되었는지 확인

결합된 객체에서 Command+Shift+O로 컨투어 선택

(추가) 아웃라인 객체의 Constraints를 Scale로 변경

2. 아이콘이 흐릿하다
문제.
왜 일부 아이콘이 흐릿할까요?

해결책
해상도를 높이기 위해 아이콘 중 하나를 512px의svg로 설정합니다
(엔지니어는 왜 다른 아이콘도 끊지 않는지 모르겠다
라이브러리 측의 설정에서 fontHeight를 지정하면 scale 해상도를 강제로 해결할 수 있습니다!

svgicons2svgfonts: {
   normalize:　true,
   fontHeight: 1000,
}

3. 아이콘을 검게 칠한다
문제.
아이콘의 선 또는 객체가 채워집니다.

해결책

플러그 인 "Fill Rule Editor"설치
https://www.figma.com/community/plugin/771155994770327940/Fill-Rule-Editor

Fill Rule Editor를 활성화하고 아웃라인 아이콘을 선택합니다.

주황색 부분(Non-zero Rule)을 클릭

화살표를 클릭하여 가장 바깥쪽을 오른쪽으로, 채우지 않은 부분을 왼쪽으로 변경합니다.

4. 제작된 아이콘의 수량과 설치된 아이콘의 수량이 일치하지 않습니다
문제.
제작된 아이콘 수량에 비해 설치된 아이콘 수량이 적다
해결책
아이콘 이름이 중복되었는지 확인하십시오.
(특히 개발도상국 제품은 의존 상황의 이름을 최대한 피하는 것이 좋다고 생각한다.△페이버릿스타)
총결산

결합과 대강화를 잊지 마세요!

Constraints 설정을 Scale로 설정하십시오!

플러그인「Fill Rule Editor」을 설치하세요!

예의범절에 주의하세요!