피그마(Figma)에서 점선 만드는 방법입니다. 생각보다 간단함.
우선 선을 그립니다. 화살표 그려도 되고요. 어차피 둘 다 만든 뒤에 속성에서 끝을 다시 바꿀 수 있으니까 아무거나 그리세요.
*선 그리는 단축키: L, 화살표 그리는 단축키: Shift+L
Stroke 속성 오른쪽 밑의 '…'를 눌러 고급 설정을 엽니다.
Stroke style을 'Dash'로 변경하면 점선이 됩니다.
Dash는 점 하나의 길이, Gap은 점 사이의 거리입니다.
Dash cap으로 끝 모양을 선택할 수 있습니다.
참고로 화살표로 하면 모양이 이상해지니까 선이랑 끝부분을 따로 만드는 걸 추천합니다.
※문제점: Dash cap을 둥글게 하고 Dash를 1로 해도 점이 동그라미가 되지 않는다.
CSS border-style에는 dotted 옵션이 있어서 점으로 되는데 피그마에는 Dash밖에 없어요. Dash 크기를 0으로 하면 또 길어져서 PPT 만들다가 당황함; 동그랗게 만들려면 편법을 써야 합니다.
▶해결방법: Dash를 0.01으로 변경하면 점이 동그랗게 된다.
0으로 하면 다시 길게 되고요. 0에 가깝게 0.1, 0.01과 같은 값을 입력하면 됩니다. 이게 비율로 계산하는 거라서 0이면 오류가 생기는 것 같아요.
Gap 값은 선의 굵기의 2배로 하면 적절합니다. 이건 필요에 따라 조절하세요.
0 댓글