Skip to content

Commit 45442e9

Browse files
laurakalbagcirephe
laurakalbag
and
cirephe
authored
Figma docs (#385)
* Distinguish between GitHub and Figma personal access tokens * Add tip box linking to Figma docs from assets docs * Add initial docs on Figma embeds * Add Figma docs to v4 docs too * Document Embed Figma frames in paid plan docs Closes STA-6109 * Add Embed Figma Designs to pro features on pricing page Closes STA-6107 * Add info about Figma tokens to privacy policy Closes STA-6117 * Remove phrasing --------- Co-authored-by: Nick <[email protected]>
1 parent cc70afe commit 45442e9

File tree

11 files changed

+138
-3
lines changed

11 files changed

+138
-3
lines changed

‎docs/assets.mdx

+7-1
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,18 @@ You can drag and drop assets on any state or upload them using the <Plus size={1
99

1010
:::studio
1111

12-
Assets are a premium feature of Stately Studio. [Check out the features on our Pro plan](studio-pro-plan.mdx), [Team plan](studio-team-plan.mdx), [Enterprise plan](studio-enterprise-plan.mdx) or [upgrade your existing plan](https://stately.ai/registry/billing).
12+
Assets are a premium feature of Stately Studio. You can try Stately Studio’s premium plans with a free trial. [Check out the features on our Pro plan](studio-pro-plan.mdx), [Team plan](studio-team-plan.mdx), [Enterprise plan](studio-enterprise-plan.mdx) or [upgrade your existing plan](https://stately.ai/registry/billing).
1313

1414
:::
1515

1616
Assets are valuable when you want to include use cases, features, workflows, and more to your state machines. One of our most frequent requests is from teams who want to tie their logic to real-life user interfaces, and assets provide a way to connect user interface design to logic in a way your whole team can understand.
1717

18+
:::new
19+
20+
You can now [embed Figma frames](figma.mdx) that stay in sync with your Figma files.
21+
22+
:::
23+
1824
<EmbedMachine embedURL="https://stately.ai/registry/editor/embed/c447d996-cef1-421d-a422-8be695668764?mode=design&machineId=bf81f493-6855-43e7-a6aa-4551f1acdc6e" title="State assets"/>
1925

2026
## Order of assets

‎docs/figma.mdx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: Embed Figma
3+
---
4+
5+
You can embed Figma frames in your states to keep your design and code in sync. Embedded Figma frames will stay up to date with the latest changes in your Figma files. Figma frames are a special type of [asset](assets.mdx).
6+
7+
[In Nick’s blog post, read about how you can improve your team workflows with Stately and Figma](/blog/2024-01-24-embed-figma/).
8+
9+
:::studio
10+
11+
Embedding Figma frames is a premium feature of Stately Studio. You can try Stately Studio’s premium plans with a free trial. [Check out the features on our Pro plan](studio-pro-plan.mdx), [Team plan](studio-team-plan.mdx), [Enterprise plan](studio-enterprise-plan.mdx) or [upgrade your existing plan](https://stately.ai/registry/billing).
12+
13+
:::
14+
15+
<EmbedMachine embedURL="https://stately.ai/registry/editor/embed/c447d996-cef1-421d-a422-8be695668764?machineId=07a2b829-fc69-487c-af11-d6bb56c282a5" title="States with Figma assets"/>
16+
17+
## How to embed Figma frames
18+
19+
1. [Generate a Figma personal access token and add it to your user Settings in Stately Studio](#figma-personal-access-token).
20+
2. In Figma, right-click the frame you want to embed and select **Copy/Paste as** > **Copy link**.
21+
3. Use the <Plus size={18} /> plus menu and <Paperclip size={18}/> **Embed Figma** on any selected state.
22+
4. Paste the Figma link into the **Figma URL** field and click **Add Figma Asset**.
23+
24+
As Figma frames are a special type of [asset](assets.mdx), you can [change the display size of your Figma frame like any other asset](/docs/assets/#asset-sizes) and [change the order of your state’s assets](/docs/assets/#order-of-assets) to choose which asset is displayed on the state.
25+
26+
### Syncing Figma frames
27+
28+
Your embedded Figma frame will stay up to date with the latest changes in your Figma file unless:
29+
- [you lock your machine](#locked-machines-with-figma-frames)
30+
- [you revoke your Figma personal access token](#revoking-your-figma-personal-access-token)
31+
- [your Figma personal access token expires](#revoking-your-figma-personal-access-token)
32+
33+
Refresh the page in the Stately Studio to see the latest changes from your embedded Figma frame.
34+
35+
## Locked machines with Figma frames
36+
37+
When your machine is [locked](lock-machines.mdx), updates to your Figma frames will not be synced to your machine. You can unlock your machine to sync your Figma frames again.
38+
39+
## Figma personal access token
40+
41+
You need a Figma [personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) to embed Figma frames. You can create a personal access token in [your Figma account settings](https://stately.ai/registry/user/my-settings?tab=Figma) under **Personal access tokens**.
42+
43+
To ensure Embed Figma works correctly, you must grant the following permissions to your personal access token:
44+
45+
- **File content**: Allow **Read-only** access so Stately Studio can sync your embedded Figma frames to your machines.
46+
47+
You can update your Figma personal access token from your user <Settings size={18}/> **Settings** in Stately Studio anytime.
48+
49+
### Revoking your Figma personal access token
50+
51+
If you need to revoke your Figma personal access token, you can do so from your Figma account settings.
52+
53+
When you revoke your Figma personal access token or your token expires, Stately Studio will no longer be able to sync your embedded Figma frames to your machines. The last synced version of your embedded Figma frames will remain in your machines for 14 days. After 14 days, Figma will entirely revoke access to the frame.

‎docs/import-from-github.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ Importing your GitHub repos with **Connect GitHub repo** or importing a machine
6767

6868
Automatic setup will enable access to all the repositories your GitHub user can access. You can [provide your own personal access token](#personal-access-token) if you need more granular control.
6969

70-
### Personal access token
70+
### GitHub personal access token
7171

7272
For more granular control, you can provide a [personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens). You can create a personal access token in your GitHub account settings under [Developer Settings](https://github.com/settings/tokens).
7373

‎docs/studio-pro-plan.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ title: Stately Studio Pro plan
1616
- [Version history](versions.mdx)
1717
- [Import from GitHub](import-from-github.mdx)
1818
- [Live simulation mode](live-simulation.mdx)
19+
- [Embed Figma frames](figma.mdx)
1920
- [State assets](assets.mdx)
2021
- [Lock machines](lock-machines.mdx)
2122
- [Generate test paths](generate-test-paths.mdx)

‎sidebars.js

+5
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,11 @@ const sidebars = {
170170
id: 'annotations',
171171
},
172172
'descriptions',
173+
{
174+
type: 'doc',
175+
label: 'Embed Figma',
176+
id: 'figma',
177+
},
173178
{
174179
type: 'doc',
175180
label: 'Assets',

‎src/pages/privacy.mdx

+6
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ We use [GitHub tokens](https://docs.github.com/en/apps/creating-github-apps/auth
5151

5252
[GitHub’s privacy statement](https://docs.github.com/en/github/site-policy/github-privacy-statement#github-privacy-statement).
5353

54+
### Figma Sync
55+
56+
We use [Figma tokens](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) to sync your Figma frames when you embed Figma assets. We do not use Figma to collect any information about you.
57+
58+
[Figma’s privacy policy](https://www.figma.com/legal/privacy/).
59+
5460
## Hosting
5561

5662
We use GitHub to host our repositories and GitHub Pages to host our legacy documentation. We do not use GitHub to collect any information about you.

‎static/pricing/index.html

+5
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,11 @@ <h3 class="pricing-text price-number">$33</h3>
209209
>Live simulation mode</a
210210
>
211211
</li>
212+
<li class="pricing-text">
213+
<a target="_blank" href="https://stately.ai/docs/figma">
214+
Embed Figma designs
215+
</a>
216+
</li>
212217
<li class="pricing-text">
213218
<a target="_blank" href="https://stately.ai/docs/colors"
214219
>Color states and transitions</a

‎versioned_docs/version-4/figma.mdx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: Embed Figma
3+
---
4+
5+
You can embed Figma frames in your states to keep your design and code sources of truth in sync. Embedded Figma frames will stay up to date with the latest changes in your Figma files. Figma frames are a special type of [asset](/docs/assets).
6+
7+
[In Nick’s blog post, read about how you can improve your team workflows with Stately and Figma](/blog/2024-01-24-embed-figma/).
8+
9+
:::studio
10+
11+
Embedding Figma frames is a premium feature of Stately Studio. You can try Stately Studio’s premium plans with a free trial. [Check out the features on our Pro plan](/docs/studio-pro-plan), [Team plan](/docs/studio-team-plan), [Enterprise plan](/docs/studio-enterprise-plan) or [upgrade your existing plan](https://stately.ai/registry/billing).
12+
13+
:::
14+
15+
<EmbedMachine embedURL="https://stately.ai/registry/editor/embed/c447d996-cef1-421d-a422-8be695668764?machineId=07a2b829-fc69-487c-af11-d6bb56c282a5" title="States with Figma assets"/>
16+
17+
## How to embed Figma frames
18+
19+
1. [Generate a Figma personal access token and add it to your user Settings in Stately Studio](#figma-personal-access-token).
20+
2. In Figma, right-click the frame you want to embed and select **Copy/Paste as** > **Copy link**.
21+
3. Use the <Plus size={18} /> plus menu and <Paperclip size={18}/> **Embed Figma** on any selected state.
22+
4. Paste the Figma link into the **Figma URL** field and click **Add Figma Asset**.
23+
24+
As Figma frames are a special type of [asset](/docs/assets), you can [change the display size of your Figma frame like any other asset](/docs/assets/#asset-sizes) and [change the order of your state’s assets](/docs/assets/#order-of-assets) to choose which asset is displayed on the state.
25+
26+
### Syncing Figma frames
27+
28+
Your embedded Figma frame will stay up to date with the latest changes in your Figma file unless:
29+
- [you lock your machine](#locked-machines-with-figma-frames)
30+
- [you revoke your Figma personal access token](#revoking-your-figma-personal-access-token)
31+
- [your Figma personal access token expires](#revoking-your-figma-personal-access-token)
32+
33+
Refresh the page in the Stately Studio to see the latest changes from your embedded Figma frame.
34+
35+
## Locked machines with Figma frames
36+
37+
When your machine is [locked](lock-machines.mdx), updates to your Figma frames will not be synced to your machine. You can unlock your machine to sync your Figma frames again.
38+
39+
## Figma personal access token
40+
41+
You need a Figma [personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) to embed Figma frames. You can create a personal access token in [your Figma account settings](https://stately.ai/registry/user/my-settings?tab=Figma) under **Personal access tokens**.
42+
43+
To ensure Embed Figma works correctly, you must grant the following permissions to your personal access token:
44+
45+
- **File content**: Allow **Read-only** access so Stately Studio can sync your embedded Figma frames to your machines.
46+
47+
You can update your Figma personal access token from your user <Settings size={18}/> **Settings** in Stately Studio anytime.
48+
49+
### Revoking your Figma personal access token
50+
51+
If you need to revoke your Figma personal access token, you can do so from your Figma account settings.
52+
53+
When you revoke your Figma personal access token or your token expires, Stately Studio will no longer be able to sync your embedded Figma frames to your machines. The last synced version of your embedded Figma frames will remain in your machines for 14 days. After 14 days, Figma will entirely revoke access to the frame.

‎versioned_docs/version-4/import-from-github.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ Importing your GitHub repos with **Connect GitHub repo** or importing a machine
6767

6868
Automatic setup will enable access to all the repositories your GitHub user can access. You can [provide your own personal access token](#personal-access-token) if you need more granular control.
6969

70-
### Personal access token
70+
### GitHub personal access token
7171

7272
For more granular control, you can provide a [personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens). You can create a personal access token in your GitHub account settings under [Developer Settings](https://github.com/settings/tokens).
7373

‎versioned_docs/version-4/studio-pro-plan.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ title: Stately Studio Pro Plan
1616
- [Version history](versions.mdx)
1717
- [Import from GitHub](import-from-github.mdx)
1818
- [Live simulation mode](live-simulation.mdx)
19+
- [Embed Figma frames](figma.mdx)
1920
- [State assets](assets.mdx)
2021
- [Lock machines](lock-machines.mdx)
2122
- [Generate test paths](generate-test-paths.mdx)

‎versioned_sidebars/version-4-sidebars.json

+5
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,11 @@
157157
"id": "annotations"
158158
},
159159
"descriptions",
160+
{
161+
"type": "doc",
162+
"label": "Embed Figma",
163+
"id": "figma"
164+
},
160165
{
161166
"type": "doc",
162167
"label": "Assets",

0 commit comments

Comments
 (0)