Skip to content

Commit

Permalink
Refine Figma in Chromatic docs
Browse files Browse the repository at this point in the history
  • Loading branch information
domyen committed Dec 7, 2023
1 parent dc71110 commit bdfd36f
Showing 1 changed file with 18 additions and 21 deletions.
39 changes: 18 additions & 21 deletions src/content/collaborate/figma-in-chromatic.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,42 @@
---
layout: "../../layouts/Layout.astro"
title: Figma in Chromatic
description: View Figma components with their linked story right in Chromatic
description: View Figma components next to their stories in Chromatic
sidebar: { order: 5 }
---

# Figma in Chromatic

In 2022 Chromatic released Storybook Connect, a Figma plugin that connects stories to Figma components. This connection allowed you to view your team’s Storybook stories without leaving Figma. Since then, thousands have downloaded the plugin to bring their stories closer to the designs.

Figma in Chromatic is another integration with Figma, bringing that code and design, side-by-side support into Chromatic. With this integration, you’ll be able to view Figma components alongside their linked story right in Chromatic.
View Figma components alongside their linked story right in Chromatic.

## Enable

To get started with this integration, you need to connect your Figma account with Chromatic. Visit your project’s Manage page, and under the configuration tab, you’ll find a new “Connected Applications” section. If you or a teammate have the appropriate Figma access to view your team's designs you can go ahead and connect Figma to this project.
Get started with this integration by connecting your Figma account with Chromatic. Visit your project’s Manage page, and under the configuration tab, you’ll find “Connected Applications”.
![Chromatic manage screen showing new “Connected Applications” section](../../images/figma-manage.png)

## View a linked Figma design
## Link to a Figma design

If you’ve already linked Figma components and stories via the [Storybook Connect Figma plugin](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) then you’ll be able to view those Figma components in Chromatic already. Just visit the Library in your Chromatic project and click one of your components. You’ll see a new “Designs” tab which renders the Figma component in a canvas.
![Designs tab in Chromatic showing the rendering of a Figma component](../../images/figma-designs.png)
Connect Figma components to your stories from within the Chromatic web app. Copy the Figma URL for a component like so:
![image](https://user-images.githubusercontent.com/1164060/229818480-f24216e0-3367-4a6b-9c5e-8ab1e7087cd4.png)

You can zoom, pan, and even inspect the layers.
![Designs tab in Chromatic showing the rendering of a Figma component with the layer inspect drawer open showing CSS for the layer](../../images/figma-layer-styles.png)
<div class="aside">

## Create a link to a Figma design
- Chromatic only supports linking Figma components. It doesn't support links to frame or layers.
- Components must be published to a Figma libary to be viewable in the designs tab.

If you haven’t used the Figma plugin already, you can now connect your Figma components to your stories from within the Chromatic web app. You just need to grab the Figma URL for a component like so:
![image](https://user-images.githubusercontent.com/1164060/229818480-f24216e0-3367-4a6b-9c5e-8ab1e7087cd4.png)
</div>

Next, enter that URL in the form on any story's design tab and save the connection for all your teammates to view this design in the future.
Then enter that URL on a story's Designs tab. This will link the design with the story. You and your teammates will now be to quickly reference the design in the future.
![Designs tab in Chromatic showing the Link to a design UI](../../images/figma-link-story.png)

## Things to note
## View a Figma design in Chromatic

- When you link a Figma frame or layer that is not a component it will not show up in the Figma plugin, Storybook Connect, because the plugin only supports Components at this time.
- Components linked from either the plugin or the Chromatic side that have not been published to a Figma library yet will not render within the Designs tab.
View Figma designs in Chromatic by going to Library and clicking one of your components. You’ll see a Designs tab which shows the linked Figma design.
![Designs tab in Chromatic showing the rendering of a Figma component](../../images/figma-designs.png)

<details>
<summary>Looking for a Figma plugin?</summary>
You can zoom, pan, and even inspect the layers.
![Designs tab in Chromatic showing the rendering of a Figma component with the layer inspect drawer open showing CSS for the layer](../../images/figma-layer-styles.png)

[Storybook Connect](/docs/figma-plugin) is a Figma plugin that allows you to link stories to Figma components. Once linked, you can view your live stories in the design workspace without leaving Figma.
## Bring your stories into Figma with our plugin

</details>
[Storybook Connect](/docs/figma-plugin) is a Figma plugin that allows you to link stories to Figma components. Once linked, you can view your live stories in the design workspace without leaving Figma.

0 comments on commit bdfd36f

Please sign in to comment.