figma2024년 1월 24일

개발 모드의 향후 계획 (새 탭에서 열림)

Figma는 Dev Mode 무료 베타 종료를 앞두고 주석, 변경 사항 비교 개선, 플러그인, Jira·VS Code 연동 기능을 공개했다. 이를 통해 디자이너와 개발자 간 핸드오프에 필요한 맥락을 강화하고, 조직별 기술 스택과 디자인 시스템에 맞춘 개발 워크플로를 지원한다. Dev Mode는 2024년 1월 31일부터 무료 베타를 종료하고 유료 좌석이 필요해진다. ## 디자인과 연결되는 주석 기능 - 디자이너가 디자인 레이어에 설명, 속성, 사양, 측정값을 직접 추가할 수 있다. - 클릭과 드래그만으로 치수와 간격을 표시해 개발자에게 구체적인 구현 정보를 전달한다. - 주석이 특정 레이어에 연결되므로 디자인이 변경되면 속성이나 측정값도 함께 업데이트된다. - 확대·축소 수준에 따라 주석이 자동으로 표시되거나 숨겨져 캔버스를 복잡하게 만들지 않는다. - 플러그인 API를 이용하면 여러 레이어에 주석을 일괄 생성하고 관리할 수 있다. ## 시각적·코드 기반 변경 사항 비교 - Compare Changes 기능이 개편되어 디자인 변경 사항을 시각적 차이와 코드 차이로 모두 확인할 수 있다. - 주석 기능과 결합해 어떤 디자인 요소가 바뀌었고 구현에 어떤 영향을 주는지 파악하기 쉬워졌다. - Figma for Jira 앱을 사용하면 Jira 이슈에 디자인 맥락을 삽입할 수 있다. - 디자인이 변경될 때 Jira에서 알림을 받아 핸드오프 과정에서 업데이트를 놓치지 않도록 지원한다. ## 조직별 코드 생성과 플러그인 - 조직마다 다른 개발 환경에 맞춰 HTML, React, Tailwind, Bootstrap 등 다양한 형식의 코드를 생성할 수 있다. - 디자인 시스템 컴포넌트와 실제 코드베이스의 컴포넌트 연결 여부를 확인하는 플러그인을 만들 수 있다. - 플러그인에 내부 API 안내, 디자인 시스템 문서 링크, 사용 가능한 컴포넌트 정보 등을 포함할 수 있다. - Enterprise 관리자는 특정 플러그인을 조직 전체에 고정하고 Dev Mode에서 기본 실행되도록 설정할 수 있다. - Razorpay는 자체 Dev Mode 플러그인인 RazorSharp를 구축해 디자인에 대응하는 코드를 자동 생성했다. ## Figma for VS Code 개선 - VS Code 안에서 Figma 디자인을 탐색하고 검사할 수 있도록 확장 기능의 탐색성과 검색성이 개선됐다. - 여러 페이지와 무한 캔버스를 직접 이동하는 대신 프레임을 그리드 형태로 선택할 수 있다. - Focus View를 통해 개별 프레임을 집중해서 확인할 수 있다. - VS Code를 떠나지 않고 Figma 플러그인을 실행할 수 있어, 사내 도구나 코드 생성 플러그인을 개발 환경에서 바로 사용할 수 있다. ## Dev Mode 유료 전환 - Dev Mode는 2024년 1월 31일 무료 베타에서 정식 서비스로 전환된다. - 이후 사용하려면 플랜과 좌석 유형에 따라 유료 Dev Mode 좌석이 필요하다. - 무료 베타 기간 동안 사용자 피드백을 반영해 200개 이상의 기능과 수정 사항이 추가됐다. 조직은 디자인 시스템과 실제 코드베이스의 연결이 중요하다면 주석과 플러그인을 우선 도입하고, 개발자가 VS Code 중심으로 작업한다면 Figma for VS Code와 사내 플러그인 연동을 검토하는 것이 효과적이다. 유료 전환 전 팀별 좌석과 플러그인 운영 정책도 함께 정하는 것이 좋다.

tailwindfigmadesign-systemsdev-mode+4

figma2023년 11월 7일

주목하고 좋아하게 (새 탭에서 열림)

피그마 Creator Fund는 커뮤니티를 위해 무료 위젯·플러그인·템플릿 등을 만드는 창작자를 지원하며, 13명에게 약 30만 달러를 지원했다. 이 글은 그중 실용적이고 어려운 문제를 해결한 프로젝트들을 소개하고, 창작자가 명확한 비전과 시각 자료를 바탕으로 자신이 관심 있는 아이디어를 발전시키라고 권한다. 제공된 본문에는 세 프로젝트 중 **Figma to Code** 사례가 중심적으로 포함되어 있다. ## Creator Fund의 목적과 성과 - Figma Community에서 누구나 사용할 수 있는 무료 리소스 제작을 지원한다. - 2023년 3월 시작 이후: - 수백 건의 지원서를 접수했다. - 9개국 13명의 창작자에게 약 30만 달러를 지원했다. - 디자인 시스템 튜토리얼, Figma 개발자 플랫폼 학습 플러그인 등 다양한 결과물이 나왔다. - Figma는 단순히 흥미로운 프로젝트보다 다음과 같은 프로젝트를 선호한다. - 해결하기 어려운 문제를 다루는 프로젝트 - 사용자의 시간을 절약하는 실용적인 도구 - 커뮤니티 전체가 무료로 사용할 수 있는 리소스 ## Creator Fund 지원서 작성 시 고려할 점 - 만들고 싶은 것이 무엇인지 명확한 비전을 제시해야 한다. - 몇 문장으로 급하게 작성하기보다 아이디어와 목표를 충분히 구체화해야 한다. - 추가 설명을 요청받을 수 있으므로 시각 자료를 준비하는 것이 좋다. - 심사위원이 원하는 것을 추측하기보다 자신이 실제로 관심 있는 문제를 선택해야 한다. - 지원 프로그램은 단순한 자금 제공을 넘어, 창작자가 프로젝트를 완성하도록 돕는 역할을 한다. ## Figma to Code: 디자인을 코드로 변환 - 브라질 쿠리치바의 Bernardo Ferrari가 만든 프로토타이핑 플러그인이다. - Figma 레이아웃을 다음 형식의 코드로 변환한다. - HTML - Tailwind - Flutter - SwiftUI - 디자인 시안을 실제 프론트엔드 코드로 빠르게 옮길 수 있어 프로토타이핑과 초기 개발 과정을 단축한다. - 디자인을 기반으로 제품을 만들고 사업화하려는 창작자에게 특히 유용하다. ## 코로나19 프로젝트에서 시작된 플러그인 - Bernardo는 코로나19 확산 정보를 제공하는 브라질 지역 웹사이트의 유지보수를 맡으며 플러그인을 구상했다. - 웹 개발 경험이 2015년 이후 거의 없었기 때문에 Figma에서 디자인한 화면을 직접 코드로 재현하는 방식으로 작업했다. - 기존 디자인-코드 변환 플러그인에는 다음과 같은 한계가 있었다. - 코드 생성 속도가 느림 - 여러 단계를 거쳐야 함 - 전체 기능을 사용하려면 유료 결제가 필요함 - Figma API 지원 범위가 좁고 오토 레이아웃 같은 기능이 빠짐 - 하나의 언어나 프레임워크만 지원함 - 반응형 디자인과 접근성을 충분히 고려하지 않음 - 이를 해결하기 위해 약 두 달 동안 플러그인을 개발했고, 2020년 7월 출시했다. ## Creator Fund를 통한 기능 개선 - 출시 후 몇 년 동안 Figma와 웹 프레임워크가 크게 바뀌었지만, 플러그인은 이를 따라가지 못했다. - 초기 버전은 다음과 같은 제한이 있었다. - 패딩을 수직·수평 방향으로만 설정 가능 - 오토 레이아웃에서 `min`과 `fixed` 정도만 지원 - Creator Fund 지원을 계기로 플러그인을 유료화하지 않고 대대적으로 개선할 기회를 얻었다. - Figma의 새로운 Dev Mode를 지원하는 작업도 진행했으며, 2023년 Config에서 업데이트를 공개했다. - 지원금은 기존 프로젝트를 유지하는 데 그치지 않고, 최신 Figma 기능과 개발 환경에 맞춰 제품을 발전시키는 촉진제가 되었다. ## 실용적인 시사점 - 디자인-코드 변환 도구는 단순한 코드 생성뿐 아니라 반응형 레이아웃, 접근성, 최신 Figma API 지원까지 고려해야 한다. - 무료 도구를 지속적으로 유지하려면 개발 비용과 기능 업데이트를 지원하는 구조가 필요하다. - Creator Fund에 지원하려는 창작자는 명확한 문제 정의, 구체적인 해결 방법, 실제 사용자가 얻는 이점을 함께 제시하는 것이 좋다. - 제공된 글 본문은 Figma to Code 사례 중간에서 끝나므로, 나머지 두 프로젝트의 구체적인 내용은 포함되어 있지 않다.

tailwindfigmadesign-to-codehtml+3

figma2023년 8월 21일

Dev Mode 후속 업데이트: (새 탭에서 열림)

Figma는 Dev Mode 오픈 베타 2개월 동안 사용자 피드백 5,000건 이상을 반영해 200개가 넘는 기능과 수정 사항을 배포했다. 이번 업데이트의 핵심은 디자인 파일을 개발자가 더 쉽게 탐색·검수하고, 코드 생성 결과를 실제 개발 환경에 가깝게 만드는 것이다. 상태 라벨, 버전 비교, 향상된 코드 스니펫, VS Code 연동 등으로 디자이너와 개발자 간 협업 효율을 높였다. ## Dev Mode에 새로 추가된 기능 - 컴포넌트, 인스턴스, 프레임, 섹션에 개발 준비 상태를 나타내는 **상태 라벨**을 추가할 수 있다. - Design Mode에서 제공되던 **레이아웃 그리드, 룰러, 아웃라인 모드**를 View 메뉴와 기존 단축키로 사용할 수 있다. - 분리(detached)된 컴포넌트를 원본 메인 컴포넌트와 비교해 변경 사항을 확인할 수 있다. - 코드 옵션으로 **Android XML과 iOS UIKit**이 다시 제공된다. - 색상 형식에서 `UIColor`를 선택할 수 있다. - 파일 이름을 클릭하면 **버전 기록의 여러 디자인 버전**을 열어 검사할 수 있다. ## 사용성 및 성능 개선 - 외부 라이브러리에서 가져온 디자인 시스템 컴포넌트의 라이브러리 이름을 표시한다. - 컴포넌트 플레이그라운드에서 중첩된 컴포넌트 속성과 컴포넌트 모드를 확인하고 실험할 수 있다. - 텍스트 속성에는 `rem` 단위를 사용하면서, 다른 속성은 픽셀 단위로 유지할 수 있다. - 캔버스에서 여러 객체를 `Shift` 클릭으로 선택하고 한 번에 내보낼 수 있다. - Figma 파일과 알림을 **VS Code 내부에서 확인**할 수 있다. - 타이포그래피 미리보기에서 스타일 이름, 글자 크기, 줄 높이 같은 속성을 확인하고 복사할 수 있다. - 텍스트의 특정 부분만 선택해 개별 속성을 검사할 수 있다. - 왼쪽 레이어 패널의 높이를 드래그로 조절할 수 있다. - 원시 값과 일치 가능성이 높은 디자인 시스템 변수를 자동으로 제안한다. - 코드 스니펫뿐 아니라 Figma 속성 형식으로도 값을 확인할 수 있다. - 디자인에 포함된 이미지 등의 소스 파일을 다운로드할 수 있다. - 대체 단위 설정을 일반 환경설정 메뉴에서 쉽게 찾을 수 있다. - 섹션을 선택하면 프레임별 링크를 모아서 확인할 수 있다. ## 코드 생성 개선 - `Shift` 키를 누른 채 모든 코드 스니펫을 한 번에 복사할 수 있다. - 하나의 패딩 값만 설정된 경우에도 CSS에서 `padding-top`, `padding-bottom`, `padding-left`, `padding-right`를 생성한다. - 코드에 `font-style`, `line-height`, `font-weight`를 항상 표시한다. - `line-height`를 백분율과 픽셀 값으로 함께 제공한다. - CSS 코드 생성에서 다음 OpenType 기능을 지원한다. - `font-feature-settings` - `font-variant-numeric` - `font-kerning` - 오토 레이아웃의 `min-width`, `max-width`, `min-height`, `max-height`와 줄바꿈 레이아웃의 세로 간격에 변수를 사용할 수 있다. - 여러 문단이나 서로 다른 텍스트 스타일이 섞인 텍스트 레이어는 스타일별 CSS 코드를 개별적으로 표시한다. - 커뮤니티에는 Tailwind, React, Vue 등을 위한 약 80개의 코드 생성 플러그인이 제공된다. ## 버그 수정 및 탐색 개선 - 탭 키 내비게이션으로 Design Mode와 Dev Mode 사이를 전환할 수 있다. - 힌트와 툴팁 전반에서 대체 단위를 올바르게 표시한다. - 텍스트 그라디언트 표시를 개선하는 등 시각적 품질 문제를 수정했다. 이번 업데이트는 Dev Mode를 단순한 디자인 검사 도구가 아니라, 디자인 시스템 확인·코드 생성·파일 관리·개발 환경 연동을 아우르는 협업 작업 공간으로 발전시키는 데 초점을 맞췄다. 팀에서는 상태 라벨과 버전 기록을 개발 핸드오프 과정에 적극 활용하고, 생성된 CSS나 플랫폼 코드는 실제 프로젝트 규칙과 비교해 검토하는 것이 좋다.

tailwindfigmareactcss+4