あなたのdev環境に

私たちはしばしばデザインの変更や変更の問題に直面しているか、または開発者がどのように設計者が要求したかを正確に構成していない.デザインが1つの場所と他のコンポーネントのファイルに住んでいるときに頻繁に同期して物事を維持するのは難しいです.そして、一旦コンポーネントが造られるならば、開発者は多分再びデザインを決して開けません.

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!

With Bit and Figma それはまさにあなたができることです.お見せしましょう.

アップデートデザイン-あなたのdev環境の変化を見てください

形態図

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内のコンポーネントを作成するとき、私たちのビットコンポーネントにこれを追加するには、ヘッダーの右上にあるFigmaの[共有]ボタンを使用します.次に' get embed code 'リンクをクリックします.これにより、あなたのドキュメントファイルに直接埋め込むことができます.FIGMAは、私たちがこのファイルのために与えたい許可を選ぶことができます.ビットがオープンソース製品であるので、我々は我々のデザインを彼らを見るために誰のためにでも開けました.

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とビット

もちろん、そのようなemmaファイルを追加したり、そこにfigmaファイルを追加する他のオプションもあります.しかし、私は非常にコンポーネントのdocsファイルに追加するというdevの経験が非常に気に入っています.これは、私たちの開発者環境がホットリロードで完了しているビットワークスペースの概要タブの中で、docsのすぐ下にある組成物が表示されていることを示します.
それはあまりにもより良い開発者の経験であり、また、あまりにもレビューの目的のために良い.しかし、完全なアプリケーションコンポーネントのようなより複雑なデザインのためには、Digmaファイルをドキュメントの代わりに新しいタブに追加するのにより意味があるかもしれません.
我々のドキュメントがMDXを使用するように、我々は文字通りちょうどここのembedされたコードをペーストすることができます.

<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>

しかし、我々は我々のコンポーネントを構築するために反応を使用しているので、引用符の代わりに括弧を使用するためにスタイルを変更する必要があります.

<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ビットコンポーネントのドキュメントで埋め込む

これは完璧に動作します、そして、あなたはビットワークスペースのあなたの概要タブで現在あなたのfigmaファイルをあなたのドキュメントに埋め込んだように見えます.これは、開発者は現在、開発者に完全な分離のデザインに基づいて起動することができますし、簡単にコンポーネントのデザインを検査するためにFigmaファイルを開くにリンクをクリックすることができます.開発者は、このコンポーネントのために必要なさまざまな組成物を作成を開始し、一度は、コンポーネントをエクスポートすることができますし、デザイナーとプロジェクトマネージャの承認のためのリンクを送信することができます.

コンポーネントを作成する

我々はさらに多くのスタイルを追加するか、幅と高さを変更するように埋め込む私たちのfigmaのコンポーネントを作成することによってこれをさらに向上させることができます.これは、我々はさらにFigmaの埋め立てを追加するときに管理することが容易になります.また、消費者がそれを越える必要があるデフォルト値と高さと幅属性を追加することもできます.

怠惰な負荷

また、追加することができますlazy loading for our iframe これは完全にクロムとクロムベースのブラウザでサポートされています.これは、ユーザーがメモリ使用量を減らすために近くにスクロールするまで、offscreen iframeがロードされるのを延期します.これは特に、Figmaファイルを見たり、それを必要としないかもしれないし、ユーザーがはるかに良いユーザーエクスペリエンスを与えるかもしれないスクロールダウンしない可能性がありますようにすべての私たちのコンポーネントにFigmaの埋め込みを追加するときに便利です.

loading = 'lazy';

コンポーネントの埋め込み

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を変更するだけで、コンポーネントのいずれかのdocmaコンポーネントを使用できます.あなたが望む場合、またはデフォルトの値を使用する場合は、高さ、幅、スタイル、怠惰なローディングも変更することができます.

<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

新しいビット

あなたが私が作成した前にビットを試していないならばtutorial complete with video どちらが始まるでしょう.楽しい.