읽을거리 · AI 디자인
아이콘 두께를 0.5만 줄이고 싶을 때, 피그마 에이전트는 이제 선을 면이 아니라 선으로 그린다
11월 5일 피그마 릴리스 노트에 에이전트가 만드는 벡터 일러스트와 아이콘의 개선 네 가지가 올랐다. 선 작업은 stroke, 기능별 레이어 묶음, 기존 그림을 스타일 참조로 쓰는 방법을 적고, 도움말과 소개 페이지가 서로 다르게 말하는 부분도 따로 짚었다.
11월 5일 피그마 릴리스 노트에 한 줄이 올라왔다. 에이전트가 만드는 벡터 일러스트와 아이콘이 나아졌고, 그 첫째가 「선 작업은 채우기(fill)가 아니라 선(stroke)으로」다.
아이콘 열두 개를 만들어 놓고 한 개만 선이 굵어 보일 때가 있다. 선으로 그려진 아이콘은 두께 숫자 하나를 바꾸면 끝난다. 면으로 그려진 아이콘은 윤곽이 도형이라, 두께를 바꾸려면 윤곽을 다시 그려야 한다. 이번 변경은 그 차이를 에이전트가 만드는 결과물에 적용했다는 이야기다.
이 글은 11월 9일에 피그마 릴리스 노트와 도움말, 공식 아이콘 소개 페이지를 열어 확인한 내용만 적었다. 에이전트로 아이콘을 직접 만들어 비교하지는 못했다. 그래서 결과물의 품질은 판단하지 않고, 문서에 적힌 것과 적히지 않은 것을 나눠 둔다.
릴리스 노트에 적힌 개선 네 가지
11월 5일 항목은 에이전트가 만드는 벡터가 「편집하기 쉽고, 스타일에 맞추기 쉽고, 움직이게 만들기 쉽게」 바뀌었다고 설명한다. 네 가지를 풀어 쓰면 이렇다.
| 개선 | 쓰임새 |
|---|---|
| 기능별로 묶인 독립 레이어 | 눈, 입, 배경처럼 부분만 골라 고친다 |
| 기존 일러스트를 스타일 참조로 첨부 | 그 그림과 같은 결로 부품이나 아이콘을 더 만든다 |
| 선 작업은 fill이 아니라 stroke | 두께와 끝 모양(캡)을 다시 그리지 않고 바꾼다 |
| 깔끔한 레이어 구조 | Figma Motion에서 바로 움직이게 만들 준비가 된다 |
출처: Figma Release Notes 2026-11-05 항목 (2026-11-09 확인). 이 항목에는 적용되는 요금제와 사용 순서가 적혀 있지 않았다.
같은 릴리스 노트의 하루 뒤 11월 6일 항목도 이미지 쪽이다. AI 이미지 편집 도구 Select area가 이제 물체를 클릭하면 자동으로 선택해 준다. 가장자리를 손으로 따라 그릴 필요가 없다는 뜻이다. 이쪽은 macOS 데스크톱 앱에서만 된다고 적혀 있다.
선과 면, 무엇이 달라지나
벡터 아이콘을 만드는 방법은 크게 둘이다. 선을 긋고 두께를 주거나, 두께가 있는 모양을 아예 닫힌 도형으로 만들어 색을 채우거나.
- 선(stroke): 두께, 끝 모양, 모서리 둥글기를 숫자로 바꾼다. 아이콘 세트 전체의 두께를 맞추기 쉽다.
- 면(fill): 크기를 키우면 선 두께도 같이 커진다. 두께만 따로 바꾸려면 도형을 고쳐야 한다.
그래서 아이콘 세트에서는 보통 선으로 두는 편이 관리하기 편하다. 릴리스 노트가 굳이 「선 작업」을 따로 짚은 것도 그 때문으로 읽힌다. 다만 에이전트가 모든 아이콘을 항상 선으로 그리는지는 문서에 적혀 있지 않다. 면으로 채운 글리프 스타일 아이콘이 필요한 경우 어떻게 되는지도 알 수 없다.
스타일 참조: 이미 있는 아이콘을 붙여 놓는다
둘째 항목은 이미 가진 그림을 기준으로 삼는 방식이다. 도움말은 에이전트에게 파일을 첨부하는 방법을 이렇게 안내한다. 프롬프트 상자의 첨부 버튼에서 Attach Figma files를 고르고, 디자인 주소를 붙이거나 여러 디자인을 추가하거나, 이미지와 파일을 끌어다 놓는다. 프레임과 이미지를 채팅에 바로 붙여 넣어도 된다.
공식 아이콘 소개 페이지의 순서는 짧다.
- 왼쪽 사이드 바에서 Agents를 고르거나 CMD + Enter를 누른다. 아이콘이 들어갈 프레임을 추가한다.
- 필요한 아이콘을 말로 설명하고, 디자인 라이브러리를 언급해 실제 스타일을 쓰게 한다.
- 캔버스에서 결과를 보고 같은 스레드에서 고친다. 다른 방향이 필요하면 스레드를 따로 연다.
- 선 두께, 크기, 스타일을 다시 시킨다. 아이콘은 편집 가능한 벡터 레이어로 남으므로 손으로 고쳐도 된다.
라이브러리를 가리키면 선 두께, 모서리 반경, 스타일 규칙(디자인 토큰)을 기본값 대신 가져온다고 페이지는 설명한다. 내보내기는 피그마가 지원하는 형식이면 되고, 예로 SVG, PNG, PDF를 든다.
공식 자료끼리 맞지 않는 곳
여기서 멈추고 확인할 것이 있다. 같은 피그마 사이트인데 문서마다 말이 다르다.
- 에이전트 도움말(Work with the Figma agent in design files)은 「벡터 편집과 Draw 도구」(벡터 일러스트, 아이콘, 경로, 점, 도형, 불리언 연산을 만들거나 고치기)와 「아이콘 만들기」(아이콘 생성, 모양 수정, 아이콘 세트 만들기)를 둘 다 Coming soon으로 표시한다. 지금 지원된다고 적힌 것은 정지 이미지를 편집 가능한 벡터 레이어로 바꾸는 기능이다.
- 아이콘 소개 페이지는 에이전트가 아이콘을 만든다고 단계까지 설명한다.
- 이 페이지에는 「공개 베타 동안 에이전트는 AI 크레딧을 쓰지 않는다」는 문장도 있다. 에이전트가 유료 전환되고 크레딧이 나가는 것은 이 사이트의 10월 18일 글에서 다뤘으니, 이 문장은 지난 내용일 가능성이 크다. 확인하지는 못했다.
릴리스 노트가 11월 5일 날짜로 「개선」을 알렸으니 기능 자체는 열려 있을 것으로 보이지만, 도움말의 Coming soon 표시가 아직 안 바뀐 것인지 일부만 열린 것인지는 문서에서 알 수 없다. 내 계정에서 에이전트 창을 열어 직접 시켜 보는 것이 가장 빠른 확인이다. 크레딧이 얼마나 나가는지도 도움말에 금액이 없고, 작업의 복잡도에 따라 다르다고만 적혀 있다.
이미지를 벡터로 바꾸는 기존 기능은 지금 된다
도움말에서 확실히 지원된다고 적힌 쪽은 이미지를 벡터로 바꾸는 기능이다. 손으로 그린 기호, 레터링, 사진, 일러스트가 대상이다. 순서는 이렇다.
- 이미지 레이어를 고른다.
- Figma Design, Draw, Slides에서는 보조 도구 막대의 More > Vectorize를 누른다. Figma Buzz에서는 인라인 도구 막대의 Edit > Vectorize다.
- Recolor 옵션으로 다듬는다. Full color(색 수 조절), Grayscale(회색 단계 수 조절), Black and white(경계값 조절) 중에서 고른다.
- 보조 도구 막대의 체크 표시를 눌러 저장한다.
복잡하거나 해상도가 낮은 이미지는 잘 안 바뀔 수 있고, 그럴 때는 Remove background나 Boost resolution을 먼저 쓰라고 도움말이 권한다. 요금제는 Starter, Professional, Education(K-12 제외), Organization, Enterprise에서 쓸 수 있고 파일 편집 권한이 있어야 한다. 이 기능은 선으로 그려지는지 면으로 그려지는지가 문서에 없다. 11월 5일 개선과는 별개로 읽는 편이 안전하다.
아이콘이 필요한 바이브 코더에게
러버블이나 클로드 코드로 화면을 만들다 보면 아이콘이 가장 먼저 어색해진다. 서로 다른 세트에서 하나씩 가져와 붙이면 선 두께가 제각각이기 때문이다. 에이전트가 아이콘을 선으로 그린다면 SVG로 내보낸 뒤 코드에서 stroke-width 값 하나로 전체 두께를 맞출 수 있다. 이 부분은 문서에 적힌 것이 아니라 SVG의 일반적인 성질에서 이어 붙인 추측이다. 실제 내보내기 결과에서 선이 유지되는지는 내보낸 파일을 열어 확인해야 한다.
코드로 받은 뒤에는 이 사이트의 피그마 셰이더·코드 레이어 글처럼 피그마 안에서 이어 가는 길도 열려 있다. 다만 아이콘 SVG가 그 흐름과 어떻게 연결되는지는 이번 자료에 없다.
오늘 열어 놓고 해 볼 순서
한 번에 아이콘 열두 개를 시키지 않는다. 문서에도 비슷한 취지가 있다. 아래 순서가 한도를 아끼는 길이기도 하다.
1. 파일에 기준 아이콘 두 개를 놓는다. 내 프로젝트에서 이미 쓰는 아이콘 두 개를 프레임에 붙인다. 이것이 스타일 참조가 된다.
2. 한 개만 시킨다. 예시 문장은 이렇다. 직접 돌려 본 것은 아니다.
첨부한 두 아이콘과 같은 선 두께, 같은 끝 모양으로 '설정' 아이콘 하나만 그려 줘. 면 채우기는 쓰지 마.
3. 결과를 열어 본다. 레이어 패널에서 선(stroke)으로 되어 있는지, 두께 숫자가 기준 아이콘과 같은지 확인한다. 선이 아니라 면으로 나왔다면 거기서 멈추고, 같은 요청을 한 번 더 한다. 크레딧이 나가는 작업이다.
4. 맞으면 세트로 넓힌다. 같은 스레드에서 나머지 아이콘을 시키고, 두께만 달라 보이는 하나는 손으로 바꾼다.
출처: Figma Release Notes, Work with the Figma agent in design files, Convert static images to vector layers, Figma: AI icon generator (모두 2026-11-09 확인).