inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

아이콘 만들기

아이콘을 만들어서 사용할 때 궁금한게 있어요

394

yjs0993

작성한 질문수 16

0

아이콘 사이즈가 24x24라면, rectangle 툴을 24x24로 만들어서 아이콘을 안에다 넣어주는게 맞는건가요? 아이콘만 넣지 말고 아이콘 영역을 rectangle 툴을 이용해서 만들어주는게 맞는건지요

figma 웹 디자인 모바일-디자인

답변 1

0

에릭

질문 감사합니다.

아이콘을 만드실 때에 Rectangle tool로 박스를 만드신 후에 그 안에 아이콘을 넣어주어도 되기는 합니다만, 그것보다는 Frame을 활용하셔서 박스를 만드신 후에 그 안에 아이콘을 넣으실 것을 추천드려요. Frame을 만들면 Frame 안에 들어가는 오브젝트들에 대한 수정이 훨씬 더 간단하기 때문에 그렇습니다. Rectangle의 경우에는 아이콘 관련 오브젝트를 선택하고 싶은데 원치 않게 Rectangle이 선택이 될 수 있어요.

그리고 아이콘을 다 만드신 다음에는 아이콘 영역에 해당하는 부분 (만약 Frame을 만들고 그 안에 아이콘을 넣었다면, Frame이 아이콘의 영역입니다.)이 Fill이 되지 않는지 확인을 하시기 바랍니다. Fill이 되었다면 아이콘을 png또는 SVG로 저장했을 때에 배경에 Fill이 된 색상이 들어가게 되어서 특정 배경색상이 있을 경우, 그 위에 아이콘 외에도 Fill이 된 색상도 보일 수가 있습니다.

질문 감사드리고 더 궁금한 점 있으면 말씀주세요^^

0

yjs0993

그럼 만약 네모 모양의 프레임이 아니라 동그란 모양의 프레임으로 아이콘의 영역을 잡아주고 싶다면, 동그란 모양의 프레임을 만들기 위해서 레디우스 값만 조정해주면 되는건가요? 그리고 완벽한 동그란 모양의 프레임이 되는지 궁금해요

0

에릭

안녕하세요. 일반적으로 저는 프레임을 동그랗게 만들지는 않습니다. 앞서서 말씀드린대로 프레임은 아이콘의 배경 영역일 뿐이고 그 자체에 Fill을 하지 않기 때문에 투명처리가 되도록 한 후 SVG 또는 PNG를 만들기 때문인데요. 굳이 동그랗게 만들고 싶으시다면 그렇게 하셔도 되지만, 저는 추천드리지는 않습니다.

 

그리고 마지막에 프레임에 대해 완벽한 동그라미로 만들 수 있는지와 관련해서는 참고로 프레임을 만드신 후 Radius를 계속해서 올리시다보면 어느지점부터는 정 원이 되는 것을 확인하실 수 있을 겁니다.

강의 수강 기간 연장 부탁드리겠습니다

0

21

1

프레임 조정 관련

0

94

2

arrow auto 플러그인이 검색해도 안나오는데 대체할 다른플러그인 추천해주실수있을까요 ?

0

95

1

오브젝트간 간격 4px 주시는 이유가 구체적으로 궁금합니다.

0

130

0

하단바 고정

0

498

2

도형 오토레이아웃 설정

0

170

2

단락별 행간 조절

0

105

2

수강기한 연장 관련 질문드립니다.

0

103

2

24화 질문인데 도형 선택해도 layer가 안 뜹니다

0

189

3

go back to previous(이전 버전으로 가기) 가 안뜹니다

0

415

3

Auto Layout 적용이 되지 않습니다

0

422

2

SF Symbols 윈도우

0

390

2

섹션 13 질문입니다. Asset에 Toolbar가 뜨지 않습니다

0

153

2

Constraint기능에서 Top & Bottom 기능이 연동이 안되네요

0

177

2

Copy Link로 프로토타입 공유 시, 휴대폰 프레임 안보이게 하는 기능

0

346

2

프레임 크기를 조정하다가 모르는 박스를 발견했어요.

0

156

2

Style 저장하는데 Variable?

0

399

1

Text 박스 조정하는 법

0

1132

2

확장성

0

129

2

하단바 설정하는 방법

0

313

2

컴포넌트들 에셋상에서 폴더값으로 분류하는 법

0

663

4

하단바 고정시

0

976

3

섹션 12 예제 파일이 안보입니다!

0

187

2

제플린 핸드오프에 관련 질문입니다.

0

151

2