Embedding Figma into your Dev Environment

#figma #design #bit

We have often been faced with the problem of designs changing or being modified or developers not making the component exactly how the designer requested. When designs live in one place and component files in other it is often hard to keep things in sync. And once the component has been built the developer will probably never even open the designs again.

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 that is exactly what you can do. Let me show you.

Update Design - See Changes in your dev Environment

Figma Embeds

Figma is of the most used tools for designers today and it is what we use at 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.

When a designer creates a component in Figma all we need to do to add this to our Bit component is use the share button in Figma which is located at the top right in the header. Then click on the 'Get embed code' link. This will give you an embed code that you can then use to embed directly into your docs file. Figma allows us to choose the permissions we want to give for this file, to be visible to anyone or just members on our team. As Bit is an open source product we have left our designs open for anyone to see them.

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

There are of course other options for adding the Figma embed such as creating a new tab in your workspace and adding the Figma file there. However I quite like the dev experience of adding it to the components docs file as the compositions are shown just below the docs in the overview tab of the Bit workspace which is our developer environment complete with hot reloading and that means I get to see design and composition of my component right next to each other.

It is a much better developer experience and also much better for review purposes too. However for more complex designs such as complete app components it might make more sense to add the Figma file to a new tab instead of in the docs.

As our docs uses mdx we can literally just paste the embed code here.

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

However we will need to modify the styles to use brackets instead of quotes as we are using React to build our component.

<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 Embed in Bit Component's Docs

This will work perfect and you will now see in your overview tab in the Bit workspace, that you have your Figma file embedded in your docs. This means that the developer can now start to developer the component in complete isolation based on the designs and can easily click on the link to open the Figma file to better inspect the components design. The developer then starts creating the various compositions needed for this component and once finished they can export the component and send the link to the designer and project manager for approval.

Create a Figma Component

We can improve this further by creating a component for our Figma embed so that we add more styles or modify the width and height. This will make it easier to manage when we add further Figma embeds. We can also add a height and width attribute with default value which will allow the consumer to override it should they need to.

Lazy Loading our iframes

We can also add lazy loading for our iframe which is fully supported in Chrome and Chromium-based browsers. This will defer the offscreen iframe from being loaded until the user scrolls near to it which reduces memory usage. This is especially helpful for when adding Figma embeds to all our components as sometimes you might not scroll down to see the Figma file or might not need it and it will give users a much better user experience.

loading = 'lazy';

Figma Embed Component

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>
  );
}

Using your Figma Component

You can now use your Figma Component in any of your component docs by just changing the src of the iframe. You can also modify the height, width, styles and lazy loading if you wish or just use the default values.

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