본문으로 건너뛰기

블로그

자동 레이아웃, 텍스트 줄바꿈, 간격, 불투명도 항목이 CSS의 방식을 따라가고, 코드 레이어와 스펙스가 캔버스로 들어왔습니다. 디자인 시스템 팀이 확인할 점을 정리했습니다.

작성

피그마 릴리스 노트에서 자동 레이아웃, 글자, 간격, 변수에 관한 항목이 한꺼번에 눈에 띄었습니다. 방향은 모두 같습니다. 디자인 파일이 쓰는 말을 CSS가 쓰는 말에 가깝게 맞추는 것입니다.

릴리스 노트의 표현으로는, 자동 레이아웃이 CSS처럼 동작하게 되어 디자인한 모습과 실제로 만들어지는 모습이 더 가깝게 맞는다고 합니다.

세로 방향 자동 레이아웃에서도 줄바꿈(vertical wrap)을 쓸 수 있게 되었습니다. 항목이 세로 공간을 넘으면 다음 열로 넘어가는, 웹에서는 익숙한 동작입니다.

간격은 두 가지 선택지가 더해졌습니다. 기존 기본 방식은 이제 Between으로 불리고, Around와 Evenly가 새로 생겼습니다. 이름이 CSS의 간격 값과 닮았습니다.

글자는 텍스트 줄바꿈 옵션이 생겼습니다. Balance와 Pretty 두 가지이고, 텍스트 레이어, 텍스트 스타일, 문단 하나에 각각 지정할 수 있습니다.

색은 불투명도를 한꺼번에 바꿀 수 있습니다. 변수 모달에서 바꾸고, 어떤 색 위에도 색을 분리하지 않고 적용합니다.

캔버스 위의 프레임이 반응형 격자에 맞게 정렬되는 모습

코드로 만든 화면이나 예전 화면을 변수가 붙은 채로 캔버스에 가져올 수 있게 되었습니다. 처음부터 다시 그리는 대신 다듬는 일에 시간을 쓰라는 취지입니다.

Config India 2026에서는 이 흐름이 더 분명해졌습니다. 디자인 나침반의 정리에 따르면 10월 15일에 공개한 내용은 세 가지입니다.

  • 코드 레이어는 실제 코드로 작동하는 프로토타입을 디자인 옆에 놓습니다
  • 스펙스는 디자인의 배경과 기술 요구사항을 문서로 함께 다룹니다
  • 페이로드는 데이터베이스, 콘텐츠 관리, 파일 저장, 로그인을 연결합니다

코드 레이어와 스펙스는 공개 베타이고, 페이로드 통합은 전체 요금제에 순차적으로 제공됩니다.

피그마 에이전트가 베타를 마치고 정식 제공됩니다. 디자인 라이브러리에 가이드라인을 붙일 수 있고, 규칙과 모범 사례, 피해야 할 방식을 적은 마크다운 파일을 올리면 그 라이브러리를 켠 채 요청할 때마다 에이전트가 읽습니다.

관리자에게는 MCP 연결을 신원 공급자로 중앙에서 관리하는 기능이 정식으로 열렸습니다. Okta 같은 서비스를 거치면 사용자가 일일이 인증하지 않아도 됩니다.

Weave의 영상과 이미지 모델도 Figma MCP를 거쳐 에이전트에서 쓸 수 있게 되었습니다.

보라색 바탕 위의 Figma 로고

그림: Figma 릴리스 노트

디자인 라이브러리 옆에 규칙 문서가 놓인 모습

새 기능을 켜기 전에 할 일은 라이브러리를 코드의 어휘로 한 번 읽어 보는 것입니다. 릴리스 노트는 기능 소개이고, 우리 라이브러리에서 효과가 얼마나 날지는 적용해 보기 전에는 알 수 없습니다.

읽어 볼 곳은 네 군데입니다.

  • 간격과 줄바꿈 설정이 코드에서 쓰는 값과 같은 이름으로 정리되어 있는지
  • 텍스트 스타일에 줄바꿈 방식이 들어 있는지
  • 변수에서 색과 불투명도가 나뉘어 있는지
  • 라이브러리 가이드라인에 우리 팀의 규칙과 피해야 할 방식이 적혀 있는지

마지막 항목은 지난 며칠의 안드로이드 이야기와 닮았습니다. 도구가 읽는 문서가 생기면, 문서를 오래 두는 일이 곧 결과물의 품질이 됩니다.

이번에 다루지 못한 소재도 있습니다. GitHub 트렌딩 CSS에는 Claude Code, Cursor, Codex에서 쓰는 디자인 스킬 Nutlope/hallmark가 올랐습니다. 컴포넌트 쪽에서는 shadcn/ui 릴리스가 이어졌습니다.

출처는 모두 피그마 릴리스 노트와 디자인 나침반 기사입니다. 본문의 링크에서 하나씩 확인할 수 있습니다.