생성형 AI가 언제나 우리의 의도를 즉각적으로 이해해 준다면 얼마나 좋을까요? 대다수의 경우 생성형 AI는 맡은 업무를 잘 수행해 줍니다. 이 기술이 최소한의 정보를 가지고 우리가 원하는 바를 제공해 줄 때, 이는 감동적이기까지 합니다.

Anima의 목표는 프런트엔드 엔지니어링을 자동화하여 인간이 시간을 낭비하지 않도록 하는 것입니다. 2023년 Anima의 AI는 5만 개 이상의 코드 스니펫을 생산하여 1,000년의 코딩 시간을 절약했습니다. Anima는 Figma의 플랫폼에 100만 개 이상 설치되어 디자인투코드 공간을 선도하고 있습니다.

이제, 우리는 일상적인 프런트엔드 코딩의 자동화의 발전의 길을 선두합니다.

오늘날의 거대 언어 모델 (LLM)은 프런트엔드 UI를 이해하지 못합니다

코드 생성 주변에는 코드 완성부터 명령어까지 다양한 모델이 있습니다. 이러한 코드 모델은 더 빠른 코딩을 도와주는 코딩 어시스턴트인 Copilot을 기반으로 합니다.
그러나 우리는 프런트엔드 자동화에는 현존하는 기술과 가능한 기술 사이에 큰 격차가 있다고 생각합니다. 우리의 목표는 Anima의 역량과 프런트엔드 자동화에 대한 이해를 통해 이 격차를 해결하는 것입니다.
오늘, 프런트엔드 개발자를 위한 AI 코딩 어시스턴트인 Frontier를 여러분께 선보입니다.

Frontier – 각각의 프런트엔드 코드에 최적화된 AI 코드 생성기

Anima Frontier는 통합 개발 환경(IDE)입니다.
먼저 Frontier는 전체 코드 베이스를 분석하여 코드 설계 시스템, 프레임워크, 규칙 및 구성 요소를 매핑합니다. 이 절차는 단 몇 초가 걸리고 코드가 안전한 로컬 환경에서 수행됩니다.
둘째, Anima의 최첨단 디자인투코드 엔진을 사용하여 Frontier는 귀하의 디자인을 분석하고 디자인 버전과 디자인 시스템의 코드를 신속하게 학습합니다.
마지막으로, VS 코드 안에 있는 Figma 디자인의 부분을 선택하면 해당 부분에 대한 코드를 코드를 얻을 수 있습니다. 마법 같지요?

접근 권한 요청하기 

디자인 시스템 자동화의 증가

완성된 프로젝트에는 수백, 수천 개의 구성 요소가 있습니다.
디자인 시스템 거버넌스 및 채택은 이러한 프로젝트를 유지하는 데 중요한 어려운 작업입니다. 이에 대한 해답을 코드 자동화가 제시합니다.

AI 보안과 가드레일

애초부터 Frontier는 엔터프라이즈급 보안 솔루션을 제공하기 위해 구축되었습니다.
일반적인 개인 정보 보호 문제로 인해 많은 엔터프라이즈급 회사들은 AI를 채택하는 것을 망설입니다.

• 전송 보안: 어떻게 하면 거대 언어 모델 (LLM)의 학습 과정에서 코드가 타 회사로 유출되지 않도록 할 수 있을까요?
• 수신 보안: 어떻게 하면 거대 언어 모델 (LLM)에 의하여 조정되거나 훈련되었을 수 있는 다른 회사의 기존 코드가 유입되지 않도록 보장하여 보안 및 잠재적인 저작권 문제를 예방할 수 있을까요?

코드 베이스를 중심으로 거대 언어 모델 (LLM)을 훈련하면 Figma 디자인에 대한 Anima의 해석과 사용자의 코드 베이스에 있는 구성 요소를 사용하는 코드를 보다 쉽게 생성할 수 있습니다. 그러나 거대 언어 모델 (LLM)에 개별 사용자 혹은 기업 소유의 코드를 업로드하여 거대 언어 모델 (LLM)을 훈련시키는 것은 심각한 개인 정보 보호 및 보안 문제를 야기합니다. 특히 엔터프라이즈 환경의 개발자에게 보안과 개인 정보 보호가 매우 중요합니다. 따라서 우리는 코드를 로컬에서 처리하는 방향을 택했습니다.
저희는 코드를 클라우드에 업로드하는 대신 VS 코드 내부에 로컬로 데이터 수집, 인덱싱 및 ML 모델을 하는 시스템을 구현했습니다. 이 시스템은 개발자의 컴퓨터에서 관련 코드를 식별하고 인덱싱합니다. 수집된 정보는 코드 베이스의 일부로 로컬에 저장되므로 클라우드가 아닌 깃을 통해 팀 내에서 안전하게 공유할 수 있습니다. 특정 구성 요소를 인스턴스화해야 하는 경우 상당한 양의 전처리를 로컬에서 수행하고 거대 언어 모델 (LLM)에 필요한 극소량의 코드와 정보만 클라우드로 보낼 수 있으며, 이는 기업이 전송과 수신 보안의 위험에 노출되지 않습니다. 이러한 시스템은 대부분의 작업을 개발자의 컴퓨터에서 수행하기 때문에 신속하게 정보가 처리되는 성능의 이점이 있습니다.

Frontier – 거대 언어 모델 (LLM), ML, AI 아키텍쳐

Anima Frontier는 이 분야에서 가장 발전된 기술을 활용한 Anima의 방대한 경험을 바탕으로 AI로 프런트엔드를 자동화하고 있습니다.
우리는 종종 99%가 거대 언어 모델 (LLM)에 의해 구동되고 30%의 경우 놀라운 결과를 가져오는 인상적인 취미 프로젝트를 발견합니다. 멋진 프로젝트이지만, 프로페셔널에게 적합하지는 않습니다.
거대 언어 모델 (LLM)은 강력한 기술로 기술 전반에 새로운 문을 열어줍니다. 하지만 거대 언어 모델 (LLM)은 지원 환경이 필요합니다. Anima는 작업에 적합한 도구를 선택하여 테스트하고 벤치마킹합니다. 거대 언어 모델 (LLM)의 경우, 컨텍스트를 제공하고 결과를 검증하며 디자인이 의도된 대로 펼쳐질 수 있도록 합니다.
이 복잡한 문제를 해결하기 위해 우리는 이를 수십 개의 작은 문제와 요구 사항으로 나누었습니다. 일부 문제는 창의력이 필요하고 거대 언어 모델 (LLM)으로 가장 잘 해결되며, 특정 모델은 다른 문제보다 빠르고 성능이 좋습니다. 이러한 문제 중 일부는 고전적인 기계 학습 / 컴퓨터 비전 문제, 즉 생성이 아닌 분류가 필요합니다. 일부는 휴리스틱으로 가장 잘 해결됩니다.
각 문제에 대해 최고 수준의 솔루션을 결합하면 거대 언어 모델 (LLM) 기반 코드 솔루션에서 흔히 발견되는 거대 언어 모델 (LLM) 환각의 위험을 최소화하면서 탁월한 결과를 얻을 수 있습니다.

Frontier의 미래

Frontier는 AI를 이용하여 개발자가 프런트엔드 코딩을 더 신속하게 할 수 있게 하는 기술 발전 과정의 시작일 뿐입니다. Anima Frontier는 디자인 업데이트에 맞추어 코드를 변경하고, 코드 에러를 고치고, 상태와 테마를 이해하고, 요소를 정확하게 식별하고, 사양을 읽는 등 인간 개발자처럼 생각할 수 있어야 합니다.
Frontier는 매우 다양한 기능을 가지고 있습니다. 무엇이 가장 불편한지, 그리고 오늘날 AI가 프런트엔드 개발자에게 요구하는 사항은 무엇인지 알려주십시오. 

접근 권한 요청하기 

The post Frontier – 각각의 프런트엔드 코드에 최적화된 AI 코드 생성기 appeared first on Anima Blog.

Figma 플랫폼에서 백만 이상의 다운로드 수를 기록한 Anima는 디자인을 위한 코딩 환경을 선도하고 있습니다. Anima의 다음 목표는 프론트엔드 코딩에 도움이 되는 것입니다. 이 글에서는 우리 고객들이 겪고 있는 어려움과 R&D 팀 투자로 어떻게 이러한 어려움을 극복할 기술의 발전을 이루려고 노력하고있는지 다루어 보겠습니다.

Anima는 기술자에게 도움을 주기 위한 기술로 VSCode 익스텐션을 개발했으며 현재 베타로 이용 가능합니다. 이 베타를 이용하여 Visual Studio Code 안에서 Figma를 바로 코드로 변환할 수 있게 됩니다.

Anima의 코드는 Figma 디자인에 비하여 정돈이 잘 되어있고, 시동 가능하며, 정확도가 높습니다. Figma 파일 링크만 있다면 나머지는 통합 개발 환경(IDE)이 처리합니다. 기존의 반 정도밖에 걸리지 않는 시간 안에 레이어를 선택하고 코드로 변환하여 시각 자원으로 추출하여 멋진 UX를 만들어 보세요.

Visual Studio Code에서 Figma 코드를 React 코드로 변환하기

요약:

1. Anima for VS Code 설치하기
2. Figma 링크를 복사 후 Anima에 붙여넣기
3. 디자인의 부분을 선택하여 React 코드 생성하기
4. 이는 “Asset Manager”에 저장됩니다.

생성형 AI와 프론트엔드 자동화

생성형 AI 기술이 발전함에 따라 회사들은 AI 도구 이용의 장점과 단점을 비교하여 회사에 맞게 사용하도록 노력하고 있습니다. 이메일을 작성하거나 문서를 생성할 때, 혹은 데이터 분석의 경우 AI를 사용하면 일을 쉽게 처리할 수 있습니다.

소프트웨어 분야의 생성형 AI 기술은 아직 개발의 초기 단계입니다. 지금이 초창기이며, 채팅 인터페이스부터 대화형 WYSYWYG, GitHub의 Copilot과 같은 코딩 완료, 버그를 해결하는 “AI Developer Agent”에 이르기까지 개발자를 위한 다양한 솔루션이 생겨기 시작했습니다.

현재 프론트엔드 자동화 개발 단계는 미미하며 앞으로 발전 가능성이 무궁무진합니다. Anima의 능력과 산업에 대한 이해를 바탕으로 더 많은 발전을 이루기를 꿈꿔봅니다.

개발자의 훌륭한 조수 – 프론트엔드 코딩 어시스턴트의 발전

Anima의 목표는 개발자가 업무를 쉽고 빠르게 할 수 있도록 돕는 것입니다. Anima의 코드 생성 엔진과 GenAI를 여러 방식으로 혼합하면 새로운 가능성이 열립니다. 여기에는 기존 코드 위에 새로운 워크플로우를 구축하고, 설계 시스템을 유지 및 관리하며, 더 오래된 레거시 코드도 포함됩니다.

저희의 디자인 파트너가 되어 프로트엔드의 미래를 같이 설계하고 싶으시다면 다음의 링크로 지원해주세요:

누구를 위한 기술인가요?

프론트엔드를 만들고 있는 개발 팀은 보통 React으로 개발을 시작합니다. 아니마의 프론트엔드 코딩 어시스턴트는 Github Copilot, Tabnine 또는 Amazon의 CodeWhisperer와 경쟁하는 제품이라기보다는 자동화할 수 있는 코딩의 양을 보완하고 확장하는 제품입니니다.

이 첫 번째 릴리스에서는 VS Code에 기존의 Anima 프로그램에서 사용 가능했던 Figma 코드를 React 코드로 변경하는 기능을 도입했습니다. 저희가 기획하고 있는 다음 개발은 설계-시스템 통합, 프론트 엔드 코드 기반 유지보수 및 모니터링입니다.

여러분의 피드백을 기다립니다. 베타 버전을 이용해보세요!

The post Anima의 VSCode 익스텐션: 통합 개발 환경 (IDE)를 이용하여 Figma를 React 코드로 변환하기 appeared first on Anima Blog.

Anima는 쉽게 사용자가 Figma 프로젝트에 브레이크 포인트를 설정할 수 있도록 하여 Figma 디자인을 HTML이나 React 코드로 변환해줍니다.

여러분이 피그마에서 웹사이트 디자인을 완성하기 위해 몇 시간을 투자했다고 상상해 보세요. 데스크톱에서 보기에는 정말 멋져 보입니다. 하지만 스마트폰으로 확인하면 너무 심하게 확대되어 보이는 경우가 있습니다. 그래서 여러분은 각 해상도를 대비하여 여러 개의 프로토타입을 만들고 이해 관계자 및 엔지니어와 여러 개의 링크를 공유합니다. 해상도 예시 중 하나는 잘 구현되었지만 다른 화면은 올바른 디자인 구현과는 거리가 멉니다. 이러한 상황은 여러 개의 해상도를 지원하는 것이 필수인 디지털 디자인 분야에서 너무 흔합니다. 여기서 브레이크 포인트가 필요합니다.

브레이크 포인트를 사용하면 애니마는 컴팩트 스마트폰, 태블릿 또는 와이드스크린 모니터에서 모든 디자인이 자동으로 최상으로 보이도록 조정하여 올바른 레이아웃을 표시합니다.

Get Anima plugin for Figma

브레이크 포인트가 뭔가요?

브레이크 포인트는 웹 사이트의 콘텐츠와 디자인이 현재 보고 있는 화면 크기나 해상도에 맞게 조정합니다.

오늘날, 이 기술은 데스크톱, 모바일, 그리고 태블릿 또는 와이드 데스크톱을 위한 페이지 레이아웃을 나타내는 다른 아트보드를 갖습니다. 이 아트보드들 각각은 브레이크 포인트를 나타냅니다.

왜 브레이크 포인트를 사용하여야 할까요?

1. 향상된 사용자 환경 – 웹 사이트 또는 앱이 모든 장치에서 훌륭하고 잘 작동하는지 확인함으로써 더 많은 청중을 수용하고 디자인을 더욱 포괄적이고 사용자 친화적으로 만들 수 있습니다.
2. 가독성과 명료성 – 브레이크 포인트를 통해 설계자는 요소의 크기뿐만 아니라 위치, 가시성, 내용 및 기능까지 가장 적절한 장치 해상도에 따라 조정할 수 있습니다. 랜딩 페이지를 구축하고 있다면, 이 브레이크 포인트가 제공하는 모든 것은 기존 시스템에 적절한 수정이 됩니다.
3. SEO – 검색 엔진은 모바일 친화적인 웹사이트를 선호합니다. 반응형 디자인은 가시성과 트래픽을 증가시키면서 검색 결과에서 더 높은 순위를 차지할 가능성이 높습니다.
4. 이해관계자 또는 고객과의 커뮤니케이션 – 설계 프로세스 중에도 브레이크 포인트를 통해 모든 해결책에 대한 단일 링크를 공유할 수 있으므로 엔지니어링 작업에 참여하기 전에 판매를 종료하거나 이해관계자에게 깊은 인상을 줄 수 있습니다.

브레이크 포인트는 현대의 디자이너에게 매우 중요한 도구입니다. 브레이크 포인트는 어떤 화면에서든 반응형 사용자 중심의 디자인을 만들 수 있도록 하여 기기에 관계없이 최종 제품에 접근할 수 있고 모든 사용자가 참여할 수 있도록 합니다.

브레이크 포인트 사용법

Figma로 브레이크 포인트를 사용하여 반응형 웹사이트를 만드는 방법은 다음과 같습니다:

1. 여러 개의 레이아웃을 사용한 설계
   이 과정은 Figma로 시작되는데, Figma에서는 디자이너가 여러 개의 다른 스크린 사이즈의 화면을 디자인하게 됩니다. 보통 모바일, 데스크톱, 태블릿과 같이 두세개의 여러 화면을 만들게 됩니다. 

2. Anima의 브레이크 포인트 기능을 사용하여 아트보트 연결하기
   같은 페이지의 모든 아트보드를 선택하세요 (예: “홈페이지 모바일”과 “홈페이지 데스크탑”). 그리고 Anima의 플러그인을 사용한 후 “Responsive pages” → “+” → “Save”를 누릅니다.
3. 공개 링크 혹은 코드 추출하기
   • Anima에 설정된 브레이크 포인트를 이용하면 디자인을 HTML / React 코드로 변환할 수 있습니다.
   • HTML/React 코드를 다운로드하려면 “Get code”를 클릭하세요. 생성된 코드 패키지에는 자동으로 브라우저의 윈도우 크기를 기준으로 레이아웃을 조절하여 웹사이트를 생성할 수 있도록 하는 모든 코드와 설정이 들어있습니다. 이 코드는 모든 브레이크 포인트에서 Figma 디자인을 구현할 수 있도록 설계되었습니다.
   • 개인 도메인이나io 도메인을 이용하여 링크를 생성하려면 “Publish”를 누르세요.

브레이크 포인트에 대한 더 많은 정보

• 여러 개의 화면과 Figma 링크 – Anima는 여러 형태의 Figma 프로토타입을 지원하며, 여러 개의 페이지가 각기 다른 브레이크 포인트를 가지고 있을 수 있습니다.
• 브레이크 포인트 & 자동 레이아웃 – Figma 자동 레이아웃도 지원 가능합니다. 자동 레이아웃을 이용하면 페이지에 알맞은 레이아웃을 자동으로 설정할 수 있습니다.
• CSS – Anima는 CSS Media 쿼리를 사용하여 화면의 넓이에 따라 레이아웃을 조정합니다.
• 최상의 결과를 위해서는 어떤 화면의 넓이가 가장 적절한가요?
  • 아트보드 넓이는 레이아웃의 최소 넓이일 경우가 좋습니다.
  • 예를 들어, 데스크톱용 1200픽셀과 모바일용 350픽셀 화면이 있다고 가정해봅시다. 이런 경우 1200 픽셀 이하의 화면에는 모바일 레이아웃이 표시되며, 350 픽셀 이하의 화면에는 350픽셀의 화면이 나타나 약간 확대된 것처럼 보이게 됩니다.

Anima를 사용하여 피그마 디자인을 반응형 웹사이트로 변환하면 개발 프로세스가 간소화되어 디자이너와 개발자가 초기 디자인 단계부터 코딩 단계까지 밀접하게 작업할 수 있습니다.

더 알아보기

Figma를 HTML / CSS로 추출하는 법

무료로 사용해보고 싶으신가요?

무료 Anima 계정 생성하기

The post Anima 브레이크 포인트: Figma 디자인에서 반응형 웹사이트까지 appeared first on Anima Blog.

Figma 디자인을 Tailwind CSS로 추출하기

Anima를 사용하여 Figma 디자인을 Tailwind CSS로 원활하게 내보내는 방법을 알려드립니다.

Anima는 디자인 속성을 Tailwind의 기본 스타일에 매핑합니다. 색상, 간격, 타이포그래피와 같은 디자인 속성은 간결한 Tailwind 클래스로 변환됩니다. 스타일과 변수를 사용하는 경우 Anima의 AI 코드 생성이 이를 Tailwind 구성 파일로 생성합니다.

Tailwind는 워크플로를 간소화하고 반응형 웹 애플리케이션을 쉽게 만들고자 하는 개발자에게 적합한 선택입니다.
이제 Figma 창작물을 Tailwind CSS 마법의 세계로 가져올 수 있는 방법을 알아보겠습니다!
Anima를 사용하면 이제 Figma 디자인을 다음과 같이 바꿀 수 있습니다.

• React, HTML 또는 Vue
• Typescript 또는 Javascript 활용
• CSS 또는 TailwindCSS 사용

(관련 비디오의 단계를 따르고 싶다면 YouTube 튜토리얼: Figma를 Tailwind CSS로 변환하는 방법을 참조하세요.)

Tailwind로 Figma 디자인 변환하기

Step 1: 원하는 Figma 파일에 Anima Plugin 돌리기

선호하는 모드(클래식 모드 또는 개발자 모드)에서 Anima의 플러그인을 엽니다. 처음 사용하는 경우 검색창을 이용하여 애니마(Anima)를 입력하시면 됩니다. Anima에 가입해야 합니다. 몇 초 정도 걸립니다. 약속합니다.

Step 2: React, Typescript / Javascript + Tailwind 선택

다음으로 사항에 맞게 코드 선택을 변경해야 합니다.

• 프레임워크: 프레임워크 드롭다운에서 React를 선택하세요.
• 언어: 선호에 따라 Javascript 또는 Typescript를 선택하세요.
• 스타일 선택 항목에서 Tailwind CSS를 선택합니다. 

이는 기본 코드 환경설정으로 저장됩니다. 후에 언제든지 수정할 수 있습니다.

Step 3: Figma 구성요소, 레이어 또는 프레임 선택

이제 Tailwind로 내보낼 섹션을 선택하면 Anima가 해당 코드를 생성합니다.

1. 버튼이나 키보드 단축키를 사용하여 스니펫을 복사하세요. 
2. “Download selection”를 클릭하여 모든 파일을 다운로드하세요. 
3. View how your code is running by clicking “Open in CodeSandbox”. Here is one for example: CodeSandbox link.

이제 당신 차례입니다!

• Figma를 위한 Anima 플러그인
• Anima 가입하기
• Anima 디스코드 채널에 사용 후기를 올려주세요!

The post Figma에서 Tailwind CSS 추출하기 appeared first on Anima Blog.

코드를 직접 작성하지 않고 Figma를 HTML로 변환하는 방법이 궁금하다면 제대로 찾아오셨습니다. 이 기사에서는 Anima를 사용하여 몇 가지 간단한 단계를 통해 Figma 디자인을 프로덕션 HTML로 내보내는 방법을 보여줍니다.

Anima는 Figma, Adobe XD나 Sketch와 같은 프로그램에서 품질 손상이 거의 없는 코드 기반 프로토타입을 생성할 수 있게 하며, 이 코드를 개발자가 바로 사용 가능한 HTML코드로 바꿔줍니다.

Figma에서 HTML로 직접 이동하면 라이브 웹 기반 프로토타입을 만들고, 간단한 웹 사이트나 랜딩 페이지를 배포하고, 개발자가 전체 UI에 대한 코드 패키지를 정리하여 개발 속도를 높일 수 있습니다.

Figma 디자인을 HTML로 변환하는 법

전체 HTML 코드 패키지를 내보내거나 Figma 디자인에서 개별 구성 요소 코드를 가져올 수 있습니다. Anima를 사용하여 Figma에서 HTML과 CSS 코드를 얻는 두 가지 쉬운 방법은 다음과 같습니다.

1. 옵션 1: 피그마의 개발자 모드에서 HTML 코드 추출하기 (읽기 전용 모드에서만 가능함)
2. 옵션 2: Figma에서 HTML 웹 페이지 추출하기 (Figma 수정 접근 권한이 필요함)

옵션 (1): HTML 웹 페이지와 플로우 전체를 Figma로 추출하기 (편집 접근 허용 필요)

1단계: Figma의 편집 모드에서 Anima 플러그인 실행

먼저 편집 모드(메인 모드)에서 Figma 프로젝트를 열고 Anima 플러그인을 실행하세요.

이미 개발자 모드에서 Anima를 실행했다면 “최근 항목” 아래에 표시됩니다.

2단계: HTML로 내보내려는 Figma 프로젝트 동기화

Anima의 웹 앱에서 Figma 프로젝트를 열려면 동기화해야 합니다. (디자인을 동기화하는 방법을 알아보세요).

디자인이 Anima의 웹 앱에 성공적으로 동기화되면 Anima 플러그인에서 알림을 받게 됩니다. Figma 디자인의 미리보기가 포함된 브라우저 탭을 열려면 “Anima로 이동”을 클릭하세요.

3 단계  코드 추출하기

오른쪽 상단의 ‘코드 내보내기’를 클릭하고 ‘전체 프로젝트’를 선택하세요. 그러면 내보내려는 프레임워크를 확인하는 팝업이 열립니다. 이 경우 “HTML”, “Pixels”(Px) 및 “Flexbox”(Figma 디자인에 설정된 반응 동작을 유지하기 위해)를 선택합니다.

Download ZIP를 누르면 코드 패키지 준비가 완료되었습니다.

코드 패키지 안에는 무엇이 있나요?

지정된 장소에 코드 패키지가 압축 파일로 저장됩니다. 이 압축 파일 안에 필요한 모든 HTML, CSS, 이미지, 글씨체 파일이 있습니다.

파일의 압축이 풀린 후 HTML 파일을 두 번 클릭하여 브라우저에서 미리 볼 수 있습니다. 최종 제품과 마찬가지로 모든 반응형 요소와 상호 작용을 볼 수 있습니다!

텍스트 편집기에서 파일을 열면 잘 구성된 HTML 및 CSS 코드가 표시됩니다.

• 디자인된 모든 화면에는 HTML 및 CSS 파일이 제공됩니다.
• Breakpoint가 있는 화면은 동일한 HTML 및 CSS 파일을 공유합니다.

옵션 (2): Figma 개발자 모드 (Figma 읽기 전용 기능을 사용하여 이용 가능) 바로 HTML 코드로 추출하기

1 단계 Figma 개발자 모드로 전환하기

먼저, Figma를 엽니다. 패널의 상단에 개발자 모드를 상징하는 아이콘이 있습니다. 클릭하시면 “Inspect” 탭이 열립니다. 그리고 Plugins 탭으로 돌아가세요.

2 단계 Anima 플러그인 실행

다음으로 개발자 모드용 Anima 플러그인을 열어야 합니다.

목록에서 보이지 않으면 Anima를 검색합니다 (위 참조). 여기에서 플러그인을 실행하거나 쉽게 액세스할 수 있도록 패널 상단에 고정할 수 있습니다.

3단계: Figma 구성요소, 레이어 또는 프레임 선택

Figma 구성 요소, 레이어 또는 프레임을 선택하여 해당 HTML 코드를 실시간으로 가져옵니다. 그런 다음 패널에서 코드를 복사하거나, Playground에서 열거나, 코드 패키지를 다운로드할 수 있습니다.

이 옵션은 개별 구성 요소 및 화면에 대해 가장 빠르고 간단합니다. 개발자 모드는 읽기 전용으로 액세스할 수 있으므로 개발자 핸드오프에 적합합니다.

그러나 여러 페이지와 상호 작용이 포함된 전체 프로젝트를 내보내려면 Anima의 웹 앱을 사용해야 합니다. 매우 쉽고 빠릅니다!

Figma 디자인을 위해 바로 제작 가능한 HTML 코드를 내보낼 준비가 되셨나요?

• Figma용 Anima 플러그인
• 애니마 가입

반응형 웹사이트를 만들고 비디오, 링크, 상호 작용 등을 추가하는

The post Figma를 HTML로 추출하는 법 appeared first on Anima Blog.

Anima는 Figma의 공식 파트너이며, 코드 생성 AI는 Figma의 새로운 Dev Mode Panel에 기본적으로 통합되어 있습니다. Figma의 개발 모드용 Anima를 사용하면 모든 Figma 구성 요소 또는 화면에 대한 효율적이고 읽기 쉽고 유지 관리 가능한 코드를 실시간으로 생성할 수 있습니다.

Anima 코드의 장점:

• Figma 변형 및 소품을 기반으로 하는 상태 저장 및 대화형 React 구성 요소
• Figma Auto Layout을 기반으로 한 반응형 CSS
• 원하는 스타일 지정: 클래식 CSS, 스타일 구성 요소, Tailwind CSS 및 곧 출시될 CSS 모듈

시작해 봅시다!

Anima를 이용하여 Figma 디자인을 React 코드로 변환

Anima는 다음 두 가지 방법으로 Figna 디자인 구성 요소를 React 코드로 변환합니다:

1. 1. 개별 구성요소에 대한 React 코드(Figma에서 읽기 전용 액세스로 사용 가능):: 
      • 재사용 가능한 React 구성 요소를 원하는 개발자를 위한 가장 효율적이고 접근 가능한 옵션입니다.
      • Figma 개발 모드 내에서 Figma 구성 요소를 React 구성 요소(JSX 또는 TSX)로 전환하세요.
      • 선택한 구성 요소와 개별 하위 구성 요소에 대한 코드를 즉시 생성, 검사 및 복사합니다.
      • 클릭 한 번으로 전체 코드 패키지를 다운로드하거나 CodeSandbox에서 열 수 있습니다.
   2. 전체 화면 및 전체 흐름에 대한 React 코드(Figma에서 편집 액세스 필요):: 
      • • React 지원 프로토타입 및 MVP를 위한 최고의 옵션
        • Figma 화면과 전체 흐름을 Anima의 웹 앱에 동기화하세요.
        • 페이지 간 중단점 및 Figma 링크를 지원하여 동기화된 선택 항목에 대해 React(JSX 또는 TSX)를 내보냅니다.
        • 외부 동기화 및 코드 처리 필요 **

선택지 1: 전체 React 코드 생성하기

Step 1: Figma에서 Anima 플러그 인을 여세요.

Step 2: ‘Turn Design to Code’을 클릭하세요.

Step 3: React로 변경하고 싶은 Figma 구성요소, 화면, 혹은 플로우를 선택합니다.

이렇게 하면 Anima는 브레이크 포인트로 정의된 여러 화면 사이즈를 연결합니다. 그리고 이를 미디어 쿼리로 변환한 후 적절한 React 코드로 전환합니다.

Step 4: 플러그인 하단의 ‘Sync’ 버튼을 클릭합니다.

Step 5: 연동이 완료되면 ‘Go to Anima’ 를 클릭하세요.

Step 6: Anima의 웹 앱에서 ‘<> 코드’ 아이콘을 선택하면 Anima의 웹 앱의 프로젝트로 이동합니다.

Step 7: 프레임워크 옵션에서 ‘반응’을 선택하고 ‘Javascript’ 또는 ‘Typescript’를 선택한 후 ‘Change to React’을 클릭합니다

Step 8: 화면 오른쪽 상단의 ‘Export Code’ 버튼을 클릭하면 특정 선택, 화면 또는 전체 프로젝트에 대한 코드 패키지의 우편 파일을 다운로드할 수 있습니다.

선택지 2: 각각의 구성 요쇼와 화면의 React 코드 만들기

STEP 1: Figma의 Inspect 패널 위에 있는 토글을 사용하여 Dev Mode로 전환한 다음 ‘Plugins’ 탭을 선택합니다.

STEP 2: 개발 모드용 Anima 플러그인을 실행합니다 (목록에 표시되지 않으면 검색 필드에 ‘Anima’를 입력합니다).

Step 3: 레이어 또는 프레임과 같은 Figma 구성요소를 선택합니다.

Step 4: 오른쪽 패널에 실행 가능한 React 및 CSS 코드가 표시됩니다. Tailwind 또는 Styled Components로 전환하려면 토글을 사용합니다.

손쉽게 선택한 구성 요소 인스턴스(‘Usage’)와 하위 구성 요소 (‘Source’) 간 변환을 실행할 수 있습니다.

코드 창 위의 드롭다운을 사용하여 JSX와 TSX 사이를 전환할 수도 있습니다.

Step 5: 모든 코드가 포함된 zip 파일에 대해 ‘Download selection’를 클릭하거나 ‘Open in CodeSandbox’를 클릭하여 즉시 실행합니다.

The post Anima를 이용하여 Figma 디자인을 React 코드로 변환 appeared first on Anima Blog.

Anima 최신제품

Anima는 AI 기반 설계-코드 플랫폼으로, Figma/XD를 실행 가능한 완벽한 픽셀 단위 코드로 변환합니다. 백그라운드에서 기계 학습 요소는 이미 자동으로 레이어 이름을 지정하고 코드를 정리하므로 엔지니어는 2배 더 빠르게 프로그램을 설계할 수 있습니다.

Anima는 디자인-코드 공간의 리더입니다. 70만 건이 넘는 설치 수를 기록한 Anima는 개발자 커뮤니티에서 제일 인기 있는 Figma 애드온입니다. 우리는 아마존, Cisco, 삼성, Deloitte와 같은 업계 거대 기업의 팀에 서비스를 제공합니다. 사용자들은 Anima 덕분에 UI 코딩 시간이 50% 단축되었다고 말합니다.

코딩의 기술 변화

지금까지 우리는 고급 React와 HTML 코드에 중점을 두었습니다. Anima의 코드 품질은 픽셀이 완벽하고 깨끗하며 유지 관리가 용이하다는 점에서 타의 추종을 불허합니다.

지난 12개월 동안 우리는 1000개가 넘는 R&D 팀과 함께 Zoom 세션을 개최했습니다. 시장의 44%가 새로운 프로젝트를 위해 React를 선택했음에도 불구하고 프런트엔드 기술 스택은 단편화되어 있습니다. 1000개 팀에는 각각 고유한 규칙이 있는 여러 저장소가 있습니다.

GenAI 시대의 시작

Anima의 최첨단 코드 생성 엔진과 GenAI 기능을 결합하면 더 많은 프레임워크, 더 빠른 개발 및 고성능 코드 유지가 가능해집니다.

LLM을 사용하면 더 많은 코딩 규칙을 지원하고 제품을 더 빠르게 확장할 수 있습니다.

Anima에는 시각적 테스트가 내장되어 있고 Figma 기능은 레이아웃부터 스타일, 구성 요소 및 상호 작용까지 지원합니다.

시사점

또한 단순성과 효율성을 추구하는 사람들을 위해 Mithril, Alpine.js 및 Stencil과 같은 프레임워크도 AI로 강화된 프런트엔드 코드 생성의 기능을 추가했습니다. AI를 활용하여 제품 기능을 향상하고 다양한 프레임워크를 지원함으로써 프런트엔드 개발 환경에서 혁신의 선두에 서게 되었습니다.

오늘부터 Anima Figma 사용자는 JavaScript 또는 TypeScript에서 Vue/CSS, Vue/Tailwind(Vue 2 및 Vue 3 모두) 및 React/Styled 구성 요소로 디자인 내보내기를 시작할 수 있습니다. 코드 프레임워크, 스타일 및 규칙의 매트릭스는 계속해서 빠르게 성장할 것입니다.

인공 지능 기술을 이용하여 프레임워크 지원을 확대하여 개발자에게 프런트엔드 개발 요구 사항에 맞는 더욱 다양한 옵션을 제공해 드립니다. Angular, Ember.js 및 Backbone.js, Svelte, Meteor, Aurelia를 아우로 모든 테크놀로지를 지원합니다. 프론트엔드 개발 환경은 다양합니다. AI 기반 접근 방식을 통해 모든 규모와 복잡성의 프로젝트를 수용할 수 있습니다.

AI를 활용하여 지속적으로 제품 기능을 향상하고 다양한 프레임워크를 지원함으로써 프런트엔드 개발 환경에서 혁신의 선두에 서게 되면서 미래는 흥미진진한 전망을 갖고 있습니다. 단순성과 효율성을 추구하는 사람들을 위해 Mithril, Alpine.js 및 Stencil과 같은 프레임워크도 AI로 강화된 프런트엔드 코드를 생성해 드립니다.

AI가 팀의 코딩 규칙에 맞게 맞춤화된 코드를 준비하는 데 시간이 조금 더 걸릴 수 있지만, 최고 수준의 품질과 효율성을 약속드립니다.

Anima vs 다중 모드

GenAI를 갖춘 Anima와 다중 모드 LLM(Large Language Model, 대형 언어 모델)은 기술 환경에서 서로 다른 틈새 시장을 제공합니다. Anima는 Figma와 같은 디자인 플랫폼을 React와 같은 실행 가능한 코드로 직접 변환하여 디자인과 개발 사이의 격차를 줄이는 데 중점을 두는 반면, 다중 모드 LLM은 텍스트 이해와 시각적 처리를 결합하여 여러 양식에 걸쳐 콘텐츠를 이해하고 생성합니다. Anima는 웹 및 앱 개발 프로세스를 간소화하고 수동 코딩 없이도 디자인 청사진을 현실로 바꾸는 전문 도구입니다. 이미지 입력 ​​기능을 갖춘 OpenAI의 ChatGPT와 같은 다중 모드 LLM은 AI의 지평을 넓혀 텍스트와 이미지를 모두 시너지적으로 해석하고 생성할 수 있도록 하는 데 더 중점을 두고 있습니다. Anima가 디자이너와 개발자를 위한 워크플로를 최적화하는 반면, 다중 모드 LLM은 포괄적인 AI 기반 콘텐츠 생성 및 이해를 위한 새로운 문을 열어줍니다.

Anima는 디자인을 픽셀 단위의 완벽한 코드로 변환하는 데 뛰어나며 Figma와 같은 플랫폼의 모든 세부 사항을 정밀하게 캡처합니다. 이와 대조적으로, 다중 모드 LLM은 텍스트와 이미지를 모두 처리하는 데는 다재다능하지만 코드 복제와 같이 정확성을 요구하는 작업에는 적합하지 않습니다. Anima는 디자인 충실도를 보장합니다. LLM은 광범위한 내용 이해를 제공합니다.

출시 예정

곧 출시될 Anima 버전에서는 디자인부터 코드까지의 경험의 맞춤화를 전폭적으로 지원할 예정입니다. 모든 개발팀에는 고유한 코딩 스타일과 규칙이 있다는 점을 인식하여 Anima는 이제 사용자가 자신의 코드베이스에서 샘플을 제공할 수 있도록 합니다. 플랫폼은 지능적으로 분석하고 조정하여 생성된 코드가 픽셀 단위의 완벽한 디자인 충실도를 유지할 뿐만 아니라 사용자 프로젝트의 기존 코딩 패턴 및 규칙과 원활하게 조화되도록 보장합니다. 이러한 개인화된 접근 방식은 통합 시간을 획기적으로 줄이고 출력이 모든 코드베이스와 조화되도록 보장합니다.

The post 디자인용 코딩 GenAI, Anima를 소개합니다 appeared first on Anima Blog.