시작하기 전에

이 기능을 사용할 수 있는 사용자

모든 요금제에서 사용 가능

편집 가능 액세스 권한이 있는 사람은 누구나 선 속성을 업데이트할 수 있습니다

선은 디자인 파일의 레이어에 적용할 수 있는 속성 컬렉션입니다. 벡터 경로를 시각적으로 표현한 것이 선이라고 볼 수 있습니다. 선 속성을 사용하여 다음 작업을 수행할 수 있습니다.

• 도형, 벡터 네트워크 또는 불리언 연산의 외곽에 윤곽선을 추가합니다.
• 선과 화살표를 생성합니다.
• 이미지에 테두리를 추가합니다.
• 직사각형, 프레임, 컴포넌트 등 직사각형 레이어의 개별 변에 선을 추가합니다.

색상, 굵기, 분포, 변, 엔드포인트 속성을 사용하여 선의 모양을 제어할 수 있습니다.

선 속성

오른쪽 사이드바의 Stroke(선) 섹션에서 선 속성을 보고 조정합니다.

페인트

페인트는 선을 정의하는 데 사용하는 주요 속성입니다. 하나의 선에 여러 페인트(색상)를 적용할 수 있습니다. 여기에는 그레이디언트 및 이미지 페인트가 포함됩니다. 페인트는 동일한 두께, 위치, 스타일 속성을 공유해야 합니다.

1. 색상 선택기를 사용하여 페인트 유형, 값, 불투명도를 선택합니다.
2. 를 클릭하여 현재 선택 항목에 다른 페인트를 추가합니다.
3. 또는 을 선택하여 각 페인트의 표시 여부를 전환합니다.
4. 을 선택하여 스타일 선택기를 엽니다. 여기에서 색상 스타일을 적용하거나 현재 선택 항목에서 새 스타일을 만들 수 있습니다.
5. 선택한 레이어에서 선을 제거하려면 를 선택합니다.

위치

Figma를 사용하면 레이어의 경로에 선을 적용할 위치를 정의할 수 있습니다. Inside(내부), Outside(외부), Center(중앙) 중에서 선택하세요. 중앙으로 설정된 선을 제외하고, 대부분의 도형 레이어의 기본 옵션은 Inside(내부)입니다.

SVG 형식은 중앙 선만 지원합니다. 레이어를 SVG로 내보낼 계획이라면 이 점을 고려해야 합니다.

내부 또는 외부 선이 있는 레이어를 SVG로 내보낼 때, Figma는 선을 '단순화'합니다. 이렇게 하면 내부 또는 외부 선이 중앙 선처럼 보이게 되며, 내보낸 개체의 모양에는 영향을 미치지 않지만 SVG 코드의 복잡성에는 영향을 미칩니다.

선 단순화에 대해 자세히 알아보기 →

굵기

필드를 사용하여 선의 두께를 픽셀 단위로 선택하세요. 값을 입력하거나, 필드에 포커스를 맞춘 후 마우스 또는 트랙패드를 사용하여 값을 스크롤할 수 있습니다.

개별 선

기본적으로 Figma는 레이어의 모든 변에 선 속성을 적용합니다. 레이어가 직사각형, 프레임 또는 컴포넌트/인스턴스인 경우 Stroke per side('변'별 선) 속성도 사용할 수 있습니다.

Stroke per side('변'별 선) 속성을 사용하여 선을 적용할 변을 선택합니다.

• 모두(기본)
• 상단
• 하단
• 왼쪽
• 오른쪽
• 사용자 지정: 선을 적용할 변을 선택합니다. 사용자 지정으로 각 변마다 다른 선 두께를 설정할 수도 있습니다.

각 면당 사용자 지정 선

사용자 지정을 선택하면 Stroke(선) 섹션에 네 개의 개별 필드가 표시됩니다. 필드를 사용하여 각 변의 두께를 독립적으로 조정하세요. 변에서 선을 제거하려면 두께를 0으로 설정하면 됩니다.

개별 선을 사용하여 일반적인 디자인 요소와 패턴을 생성할 수 있습니다.

• 테이블의 행 상단이나 하단에 단일 선을 적용합니다.
• 섹션 헤더 또는 구분선 아래에 가로줄을 표시합니다.
• 요소의 세 변에만 테두리를 적용합니다.
• 카드 또는 작업 요소의 왼쪽 변에 색상 블록을 추가합니다.

종료 지점

열린 경로의 엔드포인트에 스타일링을 추가하세요. 엔드포인트 속성은 선택한 벡터 경로에 따라 두 개의 다른 위치에 나타납니다.

단 2개의 엔드포인트

레이어가 열린 벡터 경로인 경우, 주요 Stroke(선) 섹션에서 벡터 경로의 시작과 끝에 엔드포인트를 설정할 수 있습니다. 예를 들어, 선이나 화살표 도형에서 설정이 가능합니다.

두 필드를 사용하여 시작(왼쪽) 및 종료(오른쪽) 엔드포인트의 끝단 또는 팁 스타일 ↓을 설정하세요.

3개 이상의 엔드포인트

닫힌 벡터 경로 또는 도형이 있거나, 엔드포인트가 3개 이상인 열린 경로가 있는 경우에는 엔드포인트 설정이 Advanced stroke menu(고급 선 설정 메뉴)에 표시됩니다.

전체 레이어를 선택한 경우 엔드포인트 속성을 사용하여 모든 엔드포인트에 동일한 팁 또는 끝단 스타일을 설정할 수 있습니다.

각 엔드포인트를 독립적으로 편집하려면 벡터 편집 모드에서 각 엔드포인트를 선택해야 합니다.

1. 레이어를 선택한 상태에서 Enter / Return 키를 눌러 벡터 편집 모드를 엽니다 →
2. 단일 엔드포인트를 선택합니다. 선택된 엔드포인트는 흰색 선이 있는 파란색 원으로 식별할 수 있습니다.
3. 오른쪽 사이드바의 Stroke(선) 섹션에서 을 선택하여 Advanced stroke(고급 선 설정) 메뉴를 엽니다.
4. End point(엔드포인트) 속성을 업데이트합니다.
5. Advanced stroke(고급 선 설정) 메뉴는 계속 열려 있으므로, 캔버스에서 다른 엔드포인트를 선택하고 엔드포인트를 다시 업데이트할 수 있습니다.

끝단 및 팁 엔드포인트

엔드포인트에 추가할 끝단 또는 팁을 선택하세요.

• None(없음): 경로 끝에 끝단이나 팁이 추가되지 않습니다. 경로는 추가 길이 없이 사각형 형태로 마감됩니다.
• Round(default)(둥근(기본값)): 선의 절반 두께만큼 끝단이 추가되며, 경로 엔드포인트가 너비의 50%만큼 둥글게 처리됩니다.
• Square(사각형): 선의 절반 두께만큼 끝단이 추가되며, 경로의 엔드포인트를 사각형으로 처리합니다.
• Line arrow(선 화살표): 엔드포인트 양쪽에 45도 각도를 이루는 선 두 개입니다. 선 화살표는 경로 자체와 동일한 선 두께를 사용합니다. 화살표 머리선의 길이는 변경할 수 없습니다.
• Triangle arrow(삼각형 화살표): 양쪽 엔드포인트에 삼각형 화살촉이 적용됩니다. 경로의 한쪽 끝에만 화살표를 적용하려면 벡터 편집 모드 →로 전환해야 합니다.
• Reverse triangle(역삼각형): 삼각형 화살표의 반대 방향 또는 반전된 버전으로, 화살표가 경로 안쪽을 향합니다.
• Diamond arrow(다이아몬드 화살표): 엔드포인트에 다이아몬드 모양의 팁(속이 채워짐)이 추가됩니다.

선 유형

고급 선 설정을 사용하여 선의 모양을 추가로 사용자 지정할 수 있습니다. 이 설정에 액세스하려면 오른쪽 사이드바의 Stroke(선) 섹션으로 이동하여 Advanced stroke settings(고급 선 설정)을 선택하세요.

기본 선

기본 선 설정을 사용하여 파선 또는 점선을 만들 수 있습니다. 

점선

균일한 점선을 만드세요.

1. Stroke(선) 패널에서 을 선택하여 Advanced stroke(고급 선 설정) 메뉴를 엽니다.
2. Dashed(파선) 스타일을 선택합니다.
3. 원하는 Dash(점선) 길이를 픽셀 단위로 입력합니다.
4. 점선 사이의 Gap(간격) 길이를 픽셀 단위로 입력합니다.
5. 점선의 끝단 유형을 선택합니다.
   • None(없음)
   • Round(둥근)
   • Square(정사각형)

점선

점선을 생성하세요.

1. Stroke(선) 패널에서 드롭다운을 사용하여 선 위치를 Center(중앙)로 변경합니다.
2. 을 선택하여 Advanced stroke(고급 선 설정) 메뉴를 엽니다.
3. Dashed(파선) 스타일을 선택합니다.
4. Dash(점선) 길이를 1 픽셀로 입력합니다.
5. Dash cap(선 끝 처리) 설정에서 Round(둥근)를 선택합니다.
6. 점선 사이의 Gap(간격)을 적절하게 조정합니다.

사용자 지정

사용자 지정 패턴으로 파선 또는 점선을 만드세요.

1. Stroke(선) 패널에서 을 선택하여 Advanced stroke(고급 선 설정) 메뉴를 엽니다.
2. Stroke style(선 스타일) 설정을 Custom(사용자 지정) 옵션으로 설정합니다.
3. Dashes(점선) 설정에서 점선 패턴을 정의하려면 dash, gap, dash, gap(점선, 간격, 점선, 간격)... 형식의 구문을 사용합니다.
4. 사용할 Dash cap(선 끝 처리)을 선택합니다.

브러시 선

브러시 선은 선택한 항목에 자연스럽고 손으로 그린 듯한 느낌을 줍니다. Advanced stroke settings(고급 선 설정)의 Brush(브러시) 탭을 사용하여, 자신이 만든 사용자 지정 브러시를 비롯한 사용 가능한 브러시 스타일을 탐색합니다. 스타일 위에 커서를 올리면 선택한 스타일이 어떻게 표시되는지 미리 볼 수 있습니다. 브러시 선을 적용한 후, Direction(방향) 설정을 사용하여 선의 흐름 방향을 결정할 수 있습니다.

동적 선

동적 선은 선택한 영역의 선에 손으로 그린 듯한 울퉁불퉁한 느낌을 줍니다. Dynamic stroke(다이나믹 선) 설정을 사용하여 선의 모양을 구성할 수 있습니다.

• Frequency(빈도): 선에 포함된 굴곡의 개수를 결정합니다.
• Wiggle(위글): 굴곡의 크기를 결정합니다.
• Smoothen(매끄럽게): 굴곡의 거친 정도를 결정합니다.

조인 및 미터 각

경로나 벡터 네트워크 내에서 선이 결합되는 방식을 정의합니다. 전체 경로의 조인을 조정하거나, 벡터 편집 모드로 전환하여 경로에서 단일 앵커 포인트를 선택합니다. 다음 중에서 선택합니다.

• Miter(미터): 두 경로가 만나는 지점에 화살표처럼 뾰족한 포인트를 만듭니다.
• Bevel(베블): 날카로운 끝을 잘라내어 가장자리를 평평하게 만듭니다.
• Rounded(둥글게): 두 경로가 만나는 지점을 둥글게 하여 부드럽게 연결합니다.

Miter angle(미터 각) 설정을 사용하면 두 선이 만날 때 생성되는 경사 각을 제어할 수 있습니다. 예를 들어, 미터 각을 90°로 설정하면, 90° 이하일 경우에는 경사면이 생성되고, 90°를 초과하면 날카로운 포인트가 만들어집니다.

지원되는 선 속성 개요

일부 속성은 특정 레이어 유형에서만 지원됩니다. 아래 테이블을 참조하여 작업 중인 레이어 유형에서 특정 속성이 지원되는지 확인하세요.

레이어 유형	페인트	위치	굵기	'변'별 선	색상 스타일	종료 지점	가입하기
직사각형	✓	✓	✓	✓	✓	✕	✓
선	✓	✕	✓	✕	✓	✓	✕
화살표	✓	✕	✓	✕	✓	✓	✓
타원	✓	✓	✓	✕	✓	✕	호(Arc) 도구로 수정한 경우
다각형	✓	✓	✓	✕	✓	✕	✓
별	✓	✓	✓	✕	✓	✕	✓
불리언	✓	✓	✓	✕	✓	✕	✓
벡터 네트워크	✓	✓	✓	✕	✓	열린 경로만	✓
텍스트	✓	✓	✓	✕	✓	✕	✓
프레임(컴포넌트 포함)	✓	✓	✓	✓	✓	✕	✓

파일에 대한 보기 전용 액세스로 선 속성을 보고 복사하기

파일에 대한 열람 가능 권한이 있는 경우, 선 속성은 오른쪽 사이드바에 Borders(테두리)로 나타납니다. 속성을 CSS 또는 Hex, RGB, HSL, HSB와 같은 색상 값으로 나타낼 수 있습니다. 속성을 표현하는 방법을 선택한 후 Borders(테두리) 섹션 위에 마우스를 올려놓고 Copy(복사)를 클릭하세요.

스타일 및 선

선에만 색상 스타일을 만들고 적용할 수 있습니다. 무게 및 위치와 같은 선의 다른 속성을 스타일로 저장할 수 있는 방법은 없습니다.

색상 스타일을 선에 적용하면 다른 속성을 계속 조정할 수 있습니다. 여기에는 두께와 분포뿐만 아니라 끝단, 조인, 점선과 같은 고급 선 속성이 포함됩니다.

선에 색상 스타일 적용하기

1. 업데이트할 레이어를 선택합니다.

2. 오른쪽 패널의 Stroke(선) 섹션에서 스타일 아이콘을 클릭합니다.

3. 스타일 선택기를 사용하여 관련 색상 스타일을 선택합니다.

4. 선의 다른 속성을 원하는 대로 조정합니다.

선의 크기 조정

선은 크기를 조정하는 방식에 따라 다르게 반응합니다.

• 개체의 치수를 조정하면서 선의 두께를 유지하려면 개체 크기를 조정합니다. 선의 바운딩 박스 위로 마우스를 가져가세요. 커서가 나타나면 드래그하여 크기를 조정하면 됩니다.
• 크기 조정 도구를 사용하여 개체의 치수와 함께 선 속성의 크기를 조정합니다. 크기 조정 도구 사용 방법을 알아보세요 →

선을 벡터 개체로 변환

윤곽선을 사용하면 선을 벡터 개체로 변환할 수 있습니다. 이 작업은 개체의 각 경로를 편집 가능한 단일 도형으로 변환합니다.

이를 통해 다음 작업을 수행할 수 있습니다.

• 반 점선을 제거하거나 확장하기
• 사용자 지정 도형을 만들고 벡터 편집 모드에서 편집하기
• 여러 경로를 단일 개체로 결합하기
• 벡터 개체의 크기를 균일하게 조정하기

윤곽선

1. 레이어를 마우스로 우클릭하고 Outline stroke(윤곽선)을 선택하거나, 키보드 단축키를 사용합니다.
   
   • Mac: ⌘ Command ⌥ Option O
   • Window: Control Alt O
2. Figma는 경로를 벡터 개체로 변환하고, 선에 사용한 페인트를 채우기로 적용합니다.
3. 벡터 편집 모드에서 해당 벡터 객체가 어떻게 보이는지 확인할 수 있습니다. Enter / Return 키를 누르거나 도구 모음에서 Edit object(개체 편집)를 클릭하여 벡터 개체를 편집합니다.