개발 환경에 Figma 포함

우리는 종종 디자인이 변경되거나 수정되거나 개발자가 디자이너가 요청한 대로 구성 요소를 만들지 않는 문제에 직면했습니다. 디자인이 한 곳에 있고 구성 요소 파일이 다른 곳에 있을 때 동기화를 유지하기가 어려운 경우가 많습니다. 그리고 일단 구성 요소가 구축되면 개발자는 아마 다시는 디자인을 열지 않을 것입니다.

But what if we could create a better experience? What if we could add the designs directly into the developers working environment and have those designs update in real time!

Bit 및 Figma을 사용하면 정확히 할 수 있습니다. 보여드리겠습니다.

디자인 업데이트 - 개발 환경의 변경 사항 확인

피그마 임베드

Figma은 오늘날 디자이너에게 가장 많이 사용되는 도구이며 우리가 Bit에서 사용하는 것입니다.

Bit is like Git but for Components. It gives you the ability to build components in isolation with it's own versioning system making it easier to publish and share components across multiple projects and repos.

디자이너가 Figma에서 구성 요소를 생성할 때 이를 Bit 구성 요소에 추가하기 위해 해야 할 일은 헤더의 오른쪽 상단에 있는 Figma의 공유 버튼을 사용하는 것입니다. 그런 다음 '임베드 코드 가져오기' 링크를 클릭합니다. 이렇게 하면 문서 파일에 직접 포함하는 데 사용할 수 있는 포함 코드가 제공됩니다. Figma를 사용하면 이 파일에 부여할 권한을 선택하여 모든 사람 또는 팀원에게만 표시할 수 있습니다. Bit는 오픈 소스 제품이므로 누구나 볼 수 있도록 디자인을 공개했습니다.

When we create components in Bit we create them in a folder and inside we have an index file that exports everything as well as a component file, the component docs file, the test file, the composition file for viewing the component and the styles if needed.

피그마와 비트

물론 여기에 Figma 파일을 추가하는 것과 같이 Figma 임베드를 추가하는 다른 옵션이 있습니다. 그러나 핫 리로딩이 포함된 개발자 환경인 Bit 작업 영역의 개요 탭에 있는 문서 바로 아래에 컴포지션이 표시되므로 구성 요소 문서 파일에 추가하는 개발 경험이 매우 마음에 듭니다. 서로 바로 옆에 내 구성 요소의 구성.

훨씬 더 나은 개발자 경험이며 검토 목적으로도 훨씬 좋습니다. 그러나 완전한 앱 구성 요소와 같은 더 복잡한 디자인의 경우 문서 대신 새 탭에 Figma 파일을 추가하는 것이 더 합리적일 수 있습니다.

우리 문서는 mdx를 사용하므로 문자 그대로 여기에 포함 코드를 붙여넣을 수 있습니다.

<iframe
  style="border: 1px solid rgba(0, 0, 0, 0.1);"
  width="800"
  height="450"
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FDaShaxpMbyWlvOGMFFUHCl%2Fbutton%3Fnode-id%3D0%253A1"
  allowfullscreen></iframe>

그러나 React를 사용하여 구성 요소를 빌드할 때 따옴표 대신 대괄호를 사용하도록 스타일을 수정해야 합니다.

<iframe
  title="button.docs.mdx"
  style={{ border: '1px solid rgba(0, 0, 0, 0.1)' }}
  width="800"
  height="450"
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FDaShaxpMbyWlvOGMFFUHCl%2Fbutton%3Fnode-id%3D0%253A1"
  allowfullscreen></iframe>

비트 구성 요소의 문서에 Figma Live 포함

이것은 완벽하게 작동하며 이제 Bit 작업 영역의 개요 탭에서 문서에 포함된 Figma 파일이 있음을 볼 수 있습니다. 즉, 개발자는 이제 설계를 기반으로 완전히 격리된 구성 요소 개발을 시작할 수 있으며 링크를 쉽게 클릭하여 Figma 파일을 열어 구성 요소 설계를 더 잘 검사할 수 있습니다. 그런 다음 개발자는 이 구성 요소에 필요한 다양한 구성을 만들기 시작하고 완료되면 구성 요소를 내보내고 승인을 위해 디자이너 및 프로젝트 관리자에게 링크를 보낼 수 있습니다.

Figma 구성 요소 만들기

더 많은 스타일을 추가하거나 너비와 높이를 수정할 수 있도록 Figma 포함을 위한 구성 요소를 생성하여 이를 더욱 개선할 수 있습니다. 이렇게 하면 Figma 임베드를 더 추가할 때 관리하기가 더 쉬워집니다. 소비자가 필요에 따라 재정의할 수 있도록 기본값으로 높이 및 너비 속성을 추가할 수도 있습니다.

iframe 지연 로딩

Chrome 및 Chromium 기반 브라우저에서 완전히 지원되는 lazy loading for our iframe도 추가할 수 있습니다. 이렇게 하면 사용자가 메모리 사용량을 줄이기 위해 가까이 스크롤할 때까지 오프스크린 iframe 로드가 지연됩니다. 이는 Figma 파일을 보기 위해 아래로 스크롤하지 않거나 파일이 필요하지 않을 수 있으므로 모든 구성 요소에 Figma 포함을 추가할 때 특히 유용하며 사용자에게 훨씬 더 나은 사용자 경험을 제공합니다.

loading = 'lazy';

Figma 포함 구성 요소

import React from 'react';
import classNames from 'classnames';
import styles from './figma-embed.module.scss';

export type FigmaEmbedProps = {
  /**
   * src for figma embed. Click on Share button in Figma and click on 'Get embed code' and then copy the value of the src attribute from the iframe.
   */
  iframeSrc: string,
  /**
   * add lazy loading
   */
  loading?: 'lazy' | 'eager',
  /**
   * width of iframe
   */
  width?: string,
  /**
   * height of iframe
   */
  height?: string
} & React.HTMLAttributes<HTMLIFrameElement>;

export function FigmaEmbed({
  iframeSrc,
  loading = 'lazy',
  width = '100%',
  height = '600',
  className
}: FigmaEmbedProps) {
  return (
    <iframe
      className={classNames(styles.iframe, className)}
      width={width}
      height={height}
      src={iframeSrc}
      loading={loading}></iframe>
  );
}

Figma 구성 요소 사용

이제 iframe의 src를 변경하기만 하면 모든 구성 요소 문서에서 Figma 구성 요소를 사용할 수 있습니다. 원하는 경우 높이, 너비, 스타일 및 지연 로딩을 수정하거나 기본값을 사용할 수도 있습니다.

<FigmaEmbed iframeSrc="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FDaShaxpMbyWlvOGMFFUHCl%2Fbutton%3Fnode-id%3D0%253A1" />

예시 보기

Figma Component example

Button component with figma embed

새로운 비트

Bit를 사용해 본 적이 없다면 시작할 수 있는 tutorial complete with video을 생성했습니다. 재미있게 보내세요.