Skip to main content

Figma

Introduction​

Figma is almost the defacto standard ecosystem to express the user experience design for digital properties.

Creating in Figma​

The child pages cover the use of several "tools" which both integrate well into an authoring flow, and produce quality outputs in terms of minimal effort and standard/compatible outputs.

Presenting Figma​

A publically available Figma can be browsed, via iframe

<iframe
  src="https://embed.figma.com/design/nrPSsILSYjesyc5UHjYYa4?embed-host=figma-embed-docs#figma"
  allowfullscreen>
</iframe>

resulting in

(maintain hover-over to view enlarged)

To create the correct url, you need to transform it slightly. For example

  • starting with the normal Figma url e.g.
https://www.figma.com/design/MKMTVJjO29HDsUPmU17z81/DCX-Feature-Enhancements?node-id=27022-125716&p=f&t=A67WT9CpidBA2WM2-0
  • change the host from www.figma.com to embed.figma.com
  • then append ?embed-host=figma-embed-docs
  • then append #figma to correctly style (thanks to custom css)

So the final url looks like

https://embed.figma.com/design/MKMTVJjO29HDsUPmU17z81/DCX-Feature-Enhancements?node-id=27022-125716&p=f&t=A67WT9CpidBA2WM2-0&embed-host=figma-embed-docs#figma

The result will be

<iframe
  src="https://embed.figma.com/design/MKMTVJjO29HDsUPmU17z81/DCX-Feature-Enhancements?node-id=27022-125716&p=f&t=A67WT9CpidBA2WM2-0&embed-host=figma-embed-docs#figma"
  allowfullscreen>
</iframe>

(maintain hover-over to view enlarged)

Protected Figma

If the Figma pages are behind a login you will see the login prompt. If you try using within VSCode's simple browser, the popup login modal will fail to appear. Switch to a regular browser to get the login popup.