메인 콘텐츠로 건너뛰기

이제 로컬 코드에서도 사용할 수 있는 Figma Make

Iris LinProduct Designer, Figma
Jesse LumarieSoftware Engineer, Figma

시각적 편집에서 컨텍스트 기반 프롬프트 입력 및 협업에 이르기까지, Figma Make는 팀이 코드로 디자인하는 방식을 확장하고 있습니다.

이제 로컬 코드에서도 사용할 수 있는 Figma Make공유

참고 사항

이 새로운 Make 기능들은 앞으로 몇 주에 걸쳐 베타 버전으로 출시될 예정입니다.

오늘 Figma를 벗어나지 않고도 실제 프로덕션 코드베이스에서 작업할 수 있는 Figma Make의 새로운 기능이 출시됩니다. 베타 데스크톱 앱에서는 자유로운 디자인 작업, 코드 기반 프로토타입 제작, 프로덕션 배포를 결합하기 위한 첫 단계를 확인하실 수 있습니다.

Figma는 사용자가 디자인 도구와 코드 도구 중 하나만 선택할 필요는 없다고 생각합니다. 디자인 캔버스든, 프로토타입 플레이그라운드든, 프로덕션 코드든 필요에 따라 가장 적합한 도구를 자유롭게 사용할 수 있어야 합니다.

오늘날 코드 작업은 10년 전의 디자인 작업과 매우 비슷합니다. Figma가 출시되었을 때, 디자인은 오프라인 상태에서 혼자서 하는 작업이었습니다. 오늘날, 그 어느 때보다 많은 사람들이 코드 작성에 에이전트를 사용하고 있으며, 코딩 자체도 빠르게 변화하고 있습니다. 최첨단 AI 모델이 생성하는 코드 품질은 계속 향상되고 있지만, 그렇게 많은 혁신에도 불구하고 우리가 코드 작업에 사용하는 도구는 아직 초기 단계에 있습니다. 협업 방식만 놓고 보면 우리는 아직도 2016년에 머물러 있습니다. 많은 사람들에게 IDE와 터미널은 "집"처럼 편안하게 느껴지지 않습니다. 우리는 매일 이를 체감하고 있으며, Figma 커뮤니티에서도 끊임없이 같은 이야기를 듣고 있습니다.

"디자인 대 코드"는 잘못된 이분법입니다. 도구는 디자인과 코드라는 두 영역을 넘나들 수 있는 능력을 제한해서는 안 됩니다. 플랫폼으로서 Figma의 핵심 목적은 사용자가 적절한 순간에 적절한 도구에 접근할 수 있도록 하는 것입니다. 직접 편집과 컨텍스트 기반 프롬프트 입력부터 더 긴밀한 협업과 파일 공유에 이르기까지, 이를 가능하게 하기 위해 오늘 출시되는 기능들을 소개합니다.

코드베이스를 시각적으로 편집하기

참고 사항

비기술 사용자를 위해 설정 과정을 더 쉽게 만들었지만, 이 과정을 훨씬 더 매끄럽게 만들기 위해 계속 노력하고 있습니다. 현재로서는 회사의 코드베이스에 이미 접근 권한을 가지고 있는 디자이너들이 이 새로운 Make 기능에 가장 적합합니다.

이제 코드베이스에 연결하여 Make에서 직접 시각적으로 편집하고 변경 사항을 배포할 수 있습니다. 요소를 선택하고 속성을 조정하거나 레이아웃, 색상, 글꼴, 크기를 변경하면 에이전트가 관련 코드를 찾아 UI가 디자인한 내용을 반영하도록 편집합니다 이는 자유롭게 탐색할 수 있는 정밀한 편집 방식입니다.

변경하고 싶은 내용이 명확할 때는 직접 편집 기능을 사용하세요.

속성 변경을 넘어서는 인터랙션이나 애니메이션 같은 수정이 필요한 경우에는 화면 요소에 주석을 달아 원하는 내용을 설명할 수 있습니다. 주석은 에이전트에게 컨텍스트 정보를 제공하며, 여러 요소를 한 번에 참조할 수 있습니다. 이를 통해 직접 편집 기능과 표준 프롬프트 입력 사이에 유연한 옵션을 추가합니다.

인터랙션 로직을 변경하는 경우에는 주석 기능을 사용하세요.

브랜치, 커밋, 그리고 배포하기

프로덕션 코드 배포는 팀의 개발 프로세스를 통해 의도적으로 이루어져야 합니다. PR을 생성하기 전까지는 변경 사항이 로컬 커밋으로 저장됩니다.

Make는 브랜치 생성, 커밋 되돌리기, 기타 작업 등 코드베이스에 대한 Git 업무 흐름을 지원하므로, 엔지니어링 팀은 다른 모든 풀 요청과 마찬가지로 변경 사항을 검토할 수 있습니다.

Make에서 직접 브랜치를 생성해 보세요.
Make에서 버전 관리에 대한 커밋 기록을 미리 확인하세요.

협업하고 구축하기

Make가 로컬 코드베이스를 편집하면 그 변경 사항을 파일 형태로 공유할 수 있습니다. 링크를 전송하고, 팀원이 해당 브랜치에 접근할 수 있게 되면, 브랜치를 체크아웃하여 변경 사항을 확인하고 그 상태에서 작업을 이어갈 수 있습니다. 팀원들의 변경 사항과 아이디어를 확인할 수 있으며, 커밋 기록을 통해 변경 이전과 이후를 비교할 수 있습니다.

Make에서 화면, 페이지, 컴포넌트를 복사해 Figma 캔버스에 레이어로 붙여넣어 보세요. 거기에서 팀원들 및 Figma 에이전트와 함께 자유롭게 아이디어를 내고 편집할 수 있습니다. Figma는 이러한 변경 사항을 감지하여, 변경된 내용을 다시 Make로 가져와 코드에 적용할 수 있도록 안내합니다.

Make에서 Figma Design으로, 그리고 다시 Make로.

목표는 이 루프를 완전히 닫는 것입니다. 즉, Make의 화면과 요소를 Figma Design으로 가져와 팀이 댓글을 달고 편집하며 아이디어를 발전시킨 뒤, 그 결정 사항을 다시 코드로 가져오는 것입니다. 캔버스와 코드베이스가 한곳에 모이게 됩니다. 어디서 시작해야 한다는 정답은 없습니다. 단지 작업과 현재 상황에 가장 적합한 도구가 있을 뿐입니다.

직접 편집, 주석, 채팅, PR 생성 등을 포함한 Figma Make의 새로운 기능은 2026년 5월 28일에 제한된 베타 버전으로 출시되며, 베타 기간 동안에는 AI 크레딧이 차감되지 않습니다. 가까운 시일 내에 AI 크레딧 요금제를 발표할 예정입니다. 조기 액세스를 요청하려면 여기에서 등록하세요. 베타 자격 조건을 충족하고 참여 대상으로 선정되면 이메일을 보내드립니다. 대기자 명단에 등록한다고 해서 접근 권한이 보장되는 것은 아닙니다. 이번 베타 버전은 Mac 사용자용 베타 데스크톱 앱에서만 사용할 수 있습니다. 곧 다른 플랫폼에도 이러한 변경 사항을 적용할 계획입니다. 이 기능들에 대해 더 알아보려면 도움말 센터를 방문하세요.

Create and collaborate with Figma

Get started for free