Figma 디자인 시스템을 코드로: Anima Vibe Coding2 min read

Figma design system으로 vibe code하는 방법

1. Anima Plugin을 사용해 Figma design system을 Anima로 가져오기

   Anima Figma Plugin을 사용해 Figma DS를 Anima로 가져오세요. “Design System” 탭을 선택하고, components를 선택한 다음 Anima에서 생성합니다. Anima design systems를 업데이트하거나 components를 batch로 업로드할 수도 있습니다. 많은 팀에게 Figma plugins는 compliance 관점에서 code packages보다 공유하기 쉽습니다.
   

2. Anima가 documentation이 포함된 code design system을 생성합니다

   Anima는 Figma에서 components, variants, properties, styles를 직접 가져와 Anima Playground에 넣습니다.

3. Figma components가 실제 interactive code가 됩니다

   Anima는 Figma designs를 interactive React components로 변환하고, Anima agent가 나중에 사용할 수 있는 완전한 npm package를 생성합니다.

   각 component에 대해 variants, states, props, controls를 포함한 Storybook documentation이 생성됩니다.

4. 시스템을 업데이트하고 iterate하기

   새 components와 updates를 가져오거나, vibe code improvements를 통해 components를 더 robust하게 만들 수 있습니다. Design system은 팀 전체에서 계속 공유됩니다.

5. 여러분의 design system으로 vibe code하기

   Anima에서 prompting할 때, Anima team에서 사용할 수 있는 어떤 design system이든 선택할 수 있습니다. 그러면 Anima의 agent가 여러분의 design system과 visual language를 따르는 code project를 생성합니다.

6. 내부 또는 공개로 공유하기

   Anima는 teams를 위해 만들어졌습니다. 로그인한 team members는 projects를 private하게 공유할 수 있고, 필요할 때는 full-screen public links도 publish할 수 있습니다.

7. Coding agents로 hand off하거나 code 다운로드하기

   Claude Code, Cursor, GitHub Copilot, 그리고 OpenClaw는 Anima MCP를 통해 Anima Playground links를 읽고 그 지점부터 계속 작업할 수 있습니다. Code를 직접 다운로드할 수도 있습니다.

8. 필요할 때 Figma로 돌아가기

   Anima를 사용하면 만든 결과물을 다시 Figma로 copy해서 추가로 refine할 수도 있습니다.

누구를 위한 것인가

• Design system teams: Figma DS를 만드는 데 몇 달을 투자했고, 조직 전체가 AI로 ideation할 때 그 시스템을 사용하길 원하는 팀.
• Product managers: brand를 깨지 않고 빠르게 prototype을 만들고, 이후 engineering에 hand off하거나 design으로 다시 넘기고 싶은 사람.
• Engineers: Playground에서 새로운 screens를 compose하고, feedback을 모은 뒤 Claude Code 또는 Cursor로 작업을 가져가고 싶은 사람.
• Design leads: 조직 전체의 visual consistency를 유지하는 vibe coding solutions를 찾는 리더.
• Cross-functional teams: marketing, sales, leadership을 포함해, designer나 developer를 기다리지 않고 idea에서 on-brand prototype까지 가고 싶은 팀.

AI는 여러분의 Figma design system을 알아야 합니다

우리가 vibe coding에 대해 이야기하는 모든 professional team은 같은 pain을 공유합니다: AI 덕분에 100배 빠르게 ideation할 수 있고, non-designers도 갑자기 superpowers를 갖게 되지만, 결과물은 종종 brand language를 말하지 못하는 generic UI입니다.

조직의 모든 사람이 ideation한다면, 모든 사람은 design system의 고객이어야 합니다. Professional vibe coding platforms는 그 시스템과 함께 작동해야 합니다.

팀들은 이미 Figma에서 강력한 design systems를 구축하는 데 많은 투자를 했습니다: components, variants, design tokens, UX guidelines. 그 시스템이 곧 제품의 visual language입니다. AI-assisted design의 세계에서는, 그 언어를 말할 수 있는 AI가 필요합니다.

팀들은 AI-generated UI를 원하지만, code design system을 조직 외부로 공유할 수 없다고도 말합니다. Compliance가 허용하지 않기 때문입니다. Anima에서는 entry point가 code가 아니라 Figma가 될 수 있으므로, codebase를 노출할 필요가 없습니다.

여러분의 compliance team도 실제로 승인할 수 있습니다

대규모 조직에서 AI tool 승인을 받아본 적이 있다면 그 과정을 알고 있을 것입니다: security review, vendor assessment, 그리고 tool이 codebase에 access할 수 있는지에 대한 질문. 그러고 나면 project는 procurement에서 몇 달 동안 멈춥니다.

Anima는 그 현실을 중심으로 만들어졌습니다. Code에서만 시작하는 것이 아니라 Figma에서 시작할 수 있습니다. Figma files는 이미 departments, agencies, contractors 전반에 공유되고 있으며, 많은 경우 그 workflow는 이미 내부적으로 승인되어 있습니다.

여러분은 codebase가 아니라 Figma design system을 공유합니다. Code는 여러분의 environment를 떠나지 않으며, 새로운 code-access risk를 도입하지 않아도 됩니다.

AI로 vibe design하고 code를 hand off하기

무엇이든 prompt하면 on-brand UI를 얻을 수 있습니다. 팀의 누구든 brand와 aligned된 상태로 새로운 screens, flows, experiences를 생성할 수 있습니다.

Prompt, flowchart, 또는 modernize해야 하는 legacy system의 screenshot에서 시작하세요. Anima는 여러분의 design system과 visual language를 사용해 결과물을 compose합니다.

그런 다음 Anima MCP를 통해 developers 또는 agents에게 hand off하세요. Claude Code, OpenAI Codex, GitHub Copilot, Cursor는 여러분의 팀이 남긴 Anima Playground 지점부터 계속 작업할 수 있습니다.

Design system 역시 vibe-coding playground입니다

Design system은 절대 static하지 않습니다. 팀들은 항상 components를 업데이트합니다.

Anima를 사용하면 Figma에서 새 components를 추가하거나 기존 components를 업데이트할 수 있습니다. Coded library와 agent documentation도 함께 업데이트됩니다.

또한 vibe coding을 통해 design system을 확장할 수도 있습니다: 새로운 patterns를 테스트하고, 새로운 layouts를 탐색하고, 잘 작동하는 것을 팀의 shared system으로 다시 push할 수 있습니다.

Legacy UI를 quarters가 아니라 days 안에 modernize하기

우리는 대규모 enterprise 안에서 design system migrations를 진행하는 팀들과 이야기해 왔습니다. 이들은 legacy system에서 새로운 design system으로 옮겨야 하는 수십 개의 apps와 수백 개의 screens를 운영하고 있습니다.

기존 방식은 months of manual design work가 필요합니다. Designers는 모든 screen을 Figma에서 다시 만들고, engineers는 모든 screen을 code로 다시 구현합니다. Quarters가 걸리고, 때로는 years가 걸리기도 합니다.

Anima를 사용하면 Figma에서 새로운 design system을 ingest하고, agent에게 legacy screens를 보여준 뒤, 새로운 components를 사용한 coded prototypes를 생성하고, MCP를 통해 final implementation을 위해 coding agent에게 hand off할 수 있습니다.

즉, Anima로 days 안에 redesign하고, 같은 workflow에 연결된 coding agents로 weeks 안에 implement할 수 있습니다.