techlist.io
KREN
figma

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

figmadesign-to-codehtmlfigma-pluginsswiftuifluttertailwind

피그마 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 사례 중간에서 끝나므로, 나머지 두 프로젝트의 구체적인 내용은 포함되어 있지 않다.