Updating Figma content to include variables #653

lukasoppermann · 2023-11-03T14:05:25Z

The updated page: https://primer-b6c3695719-26441320.drafts.github.io/guides/figma/getting-started#styles-and-variables

This PR replaces old content about figma styles with everything to know about our variables.

content/guides/figma/getting-started.mdx

maximedegreve · 2023-11-06T13:34:49Z

content/guides/figma/getting-started.mdx

+
+Primer Web provides *light mode* and *dark mode* using figma `variables`. This means you don't need a plugin to change between modes. Simply select any `frame` that uses `variables` or components with `variables`. Select the mode from the dropdown <svg class="svg" xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12"><path fill="#000" fill-opacity="1" fill-rule="evenodd" d="m5 1.381-4 2.31v4.618l4 2.31 4-2.31V3.691L5 1.38zm5 1.732L5 .227 0 3.113v5.774l5 2.887 5-2.887V3.113zm3 5.196-5 2.887 1 .578 5-2.887V3.113L9 .227 8 .804l5 2.887v4.618zM6 6c0 .552-.448 1-1 1-.552 0-1-.448-1-1 0-.552.448-1 1-1 .552 0 1 .448 1 1z"></path></svg> in the *layer* section in the right sidebar
+
+<ImageBox caption="Switching the variable mode changes all nested items">


I love little snippets. 😍

The GIF's quality isn't great, but it might be hard to fix unless we change it to a video. We should see what the team thinks, but I think we've talked about using videos instead of GIFs because they're easier for everyone to use.

+1 for using a video instead of a GIF here

How can I add an autoplaying video?

There's a component called CustomVideoPlayer. It accepts all the same props as the HTML tag, so you can pass autoplay.

Great, thanks, used that now. It does not support muted though, right?

maximedegreve · 2023-11-06T13:37:40Z

content/guides/figma/getting-started.mdx

+</ImageBox>
+
+### Video introduction to primer web variables and modes / themes (github internal)
+<a href="https://github.rewatch.com/video/qvryg0cscoowmpyx-figma-primer-web-update-to-figma-variables"><img src="https://thumbnails.rewatch.com/thumbs/qvryg0cscoowmpyx?fm=jpg&p=true&q=100" /></a>


Note: Remember that this is only for internal use. As I mentioned before, we need to make it clear that it's for internal purposes. If we decide to make the Figma library public in the future, maybe we could download the video and host it on a public URL?

It is publicly available forever already. 😉

mperrotti

These are helpful, but I'm a little confused by the heavy use of backticks to put text in <code> tags.

content/guides/figma/getting-started.mdx

mperrotti · 2023-11-06T23:01:25Z

content/guides/figma/getting-started.mdx


-To quickly find a style you can use the search box. E.g. use `accent` to bring up all accent colors.
+### Understanding styles
+Figma libraries like `Primer Web` provide styles for you to use. In contrast to local styles, styles from a library don't show up in the sidebar. However once you open a selection to choose a `text style` or `shadow` you will see the styles from team libraries as well.


Non-blocking nitpick: I'm not sure we want "Primer Web", "text style", or "shadow" in a <code> tag. I think this is intended for things like variable names.

Hey, so for Primer Web, yes.

For text and shadow styles I am wondering if this is correct as they are specific Figma things. Similar to a variable or a property. WDYT?

I guess that's ok. I personally wouldn't do it that way, but I don't think anybody will be confused 🙂

content/guides/figma/getting-started.mdx

mperrotti · 2023-11-06T23:13:03Z

content/guides/figma/getting-started.mdx

  />
 </ImageBox>

-<a href="https://help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma">Learn more about Figma styles <LinkExternalIcon /></a>
+#### Scope
+Variables in Figma are *"scoped"*, meaning they can only be used in specific situations. Currently Figma offers the following scopes for color variables: `Frame fill`, `Shape fill`, `Text fill` , `Stroke`.


Non-blocking nitpick: I'm not sure we need "Frame fill", "Shape fill", etc in <code> blocks. Those just refer to Figma tools.

Same as above. I do feel it is nice to somehow highlight that those are actual scope values. But maybe a code block is not correct, and we should use a different visual style?

Out of interest, why do you feel code blocks are problematic here?

I think it's just a matter of personal preference. It makes me thinks these are things we have in Primer code. If nobody else gets hung up on these, I think it's totally fine.

mperrotti · 2023-11-06T23:15:11Z

content/guides/figma/getting-started.mdx

+
+Primer Web provides *light mode* and *dark mode* using figma `variables`. This means you don't need a plugin to change between modes. Simply select any `frame` that uses `variables` or components with `variables`. Select the mode from the dropdown <svg class="svg" xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12"><path fill="#000" fill-opacity="1" fill-rule="evenodd" d="m5 1.381-4 2.31v4.618l4 2.31 4-2.31V3.691L5 1.38zm5 1.732L5 .227 0 3.113v5.774l5 2.887 5-2.887V3.113zm3 5.196-5 2.887 1 .578 5-2.887V3.113L9 .227 8 .804l5 2.887v4.618zM6 6c0 .552-.448 1-1 1-.552 0-1-.448-1-1 0-.552.448-1 1-1 .552 0 1 .448 1 1z"></path></svg> in the *layer* section in the right sidebar
+
+<ImageBox caption="Switching the variable mode changes all nested items">


+1 for using a video instead of a GIF here

content/guides/figma/getting-started.mdx

lukasoppermann had a problem deploying to github-pages November 3, 2023 14:11 — with GitHub Actions Failure

lukasoppermann had a problem deploying to github-pages November 6, 2023 07:24 — with GitHub Actions Failure

lukasoppermann force-pushed the figmaUpdates branch from 5a52758 to f018d77 Compare November 6, 2023 11:40

lukasoppermann had a problem deploying to github-pages November 6, 2023 11:45 — with GitHub Actions Failure

adding details about variables

6837f15

lukasoppermann force-pushed the figmaUpdates branch from f018d77 to 6837f15 Compare November 6, 2023 12:02

lukasoppermann marked this pull request as ready for review November 6, 2023 12:05

lukasoppermann requested a review from a team as a code owner November 6, 2023 12:05

lukasoppermann requested review from keithamus, maximedegreve, mperrotti and langermank November 6, 2023 12:10

lukasoppermann temporarily deployed to github-pages November 6, 2023 12:29 — with GitHub Actions Inactive

maximedegreve reviewed Nov 6, 2023

View reviewed changes

content/guides/figma/getting-started.mdx Outdated Show resolved Hide resolved

keithamus approved these changes Nov 6, 2023

View reviewed changes

maximedegreve reviewed Nov 6, 2023

View reviewed changes

content/guides/figma/getting-started.mdx Outdated Show resolved Hide resolved

maximedegreve reviewed Nov 6, 2023

View reviewed changes

content/guides/figma/getting-started.mdx Outdated Show resolved Hide resolved

maximedegreve reviewed Nov 6, 2023

View reviewed changes

mperrotti reviewed Nov 6, 2023

View reviewed changes

lukasoppermann commented Nov 7, 2023

View reviewed changes

content/guides/figma/getting-started.mdx Outdated Show resolved Hide resolved

lukasoppermann commented Nov 7, 2023

View reviewed changes

content/guides/figma/getting-started.mdx Outdated Show resolved Hide resolved

lukasoppermann temporarily deployed to github-pages November 7, 2023 07:54 — with GitHub Actions Inactive

lukasoppermann commented Nov 7, 2023

View reviewed changes

content/guides/figma/getting-started.mdx Outdated Show resolved Hide resolved

lukasoppermann force-pushed the figmaUpdates branch from f1fdcec to 97f0609 Compare November 7, 2023 07:59

lukasoppermann temporarily deployed to github-pages November 7, 2023 08:05 — with GitHub Actions Inactive

update to trigger

adc4660

lukasoppermann force-pushed the figmaUpdates branch from 97f0609 to adc4660 Compare November 7, 2023 15:35

lukasoppermann temporarily deployed to github-pages November 7, 2023 15:41 — with GitHub Actions Inactive

Update content/guides/figma/getting-started.mdx

9893313

lukasoppermann temporarily deployed to github-pages November 7, 2023 15:47 — with GitHub Actions Inactive

mperrotti approved these changes Nov 7, 2023

View reviewed changes

lukasoppermann commented Nov 8, 2023

View reviewed changes

content/guides/figma/getting-started.mdx Outdated Show resolved Hide resolved

Update content/guides/figma/getting-started.mdx

01e59a6

lukasoppermann temporarily deployed to github-pages November 8, 2023 14:49 — with GitHub Actions Inactive

Update getting-started.mdx

46f1cb0

lukasoppermann deployed to github-pages November 8, 2023 15:07 — with GitHub Actions View deployment

lukasoppermann merged commit 3b56df3 into main Nov 8, 2023

lukasoppermann deleted the figmaUpdates branch November 8, 2023 15:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updating Figma content to include variables #653

Updating Figma content to include variables #653

lukasoppermann commented Nov 3, 2023 •

edited

Loading

maximedegreve Nov 6, 2023

mperrotti Nov 6, 2023

lukasoppermann Nov 7, 2023

mperrotti Nov 7, 2023

lukasoppermann Nov 8, 2023

maximedegreve Nov 6, 2023

lukasoppermann Nov 7, 2023

mperrotti left a comment

mperrotti Nov 6, 2023

lukasoppermann Nov 7, 2023

mperrotti Nov 7, 2023

mperrotti Nov 6, 2023

lukasoppermann Nov 7, 2023

mperrotti Nov 7, 2023

mperrotti Nov 6, 2023


		Primer Web provides light mode and dark mode using figma `variables`. This means you don't need a plugin to change between modes. Simply select any `frame` that uses `variables` or components with `variables`. Select the mode from the dropdown <svg class="svg" xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12"><path fill="#000" fill-opacity="1" fill-rule="evenodd" d="m5 1.381-4 2.31v4.618l4 2.31 4-2.31V3.691L5 1.38zm5 1.732L5 .227 0 3.113v5.774l5 2.887 5-2.887V3.113zm3 5.196-5 2.887 1 .578 5-2.887V3.113L9 .227 8 .804l5 2.887v4.618zM6 6c0 .552-.448 1-1 1-.552 0-1-.448-1-1 0-.552.448-1 1-1 .552 0 1 .448 1 1z"></path></svg> in the layer section in the right sidebar

		<ImageBox caption="Switching the variable mode changes all nested items">

Updating Figma content to include variables #653

Updating Figma content to include variables #653

Conversation

lukasoppermann commented Nov 3, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mperrotti left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukasoppermann commented Nov 3, 2023 •

edited

Loading