Recommended Figma to hype workflow

If I want to create a scrolling single page, some of which has viewport animations, interactive parts and some of which is purely design what is the best method. I’ve designed in hype myself but to get the assistance of a windows based figma user, to design, what would be the suggested workflow
Thanks Michael

Below is some info on getting high fidelity elements out of Figma, but this workflow might be different depending on what you're trying to rebuild in Hype:

In Hype, you get:

  • You can also get SVGs using the regular export process. If you export these files to a folder, you can then drag these SVG files into Hype and Hype will pick up any updates you make (re-exports from Figma). Use descriptive layer names in Figma to stay organized.
    Screen Shot 2022-05-18 at 7.44.37 AM. This workflow is very similar to how it works in Sketch (check out this video: Design in Sketch & Animate in Tumult Hype - YouTube )
  • There's some powerful plugins in Figma that generate HTML + CSS for you. Check out: https://www.figma.com/community/plugin/842128343887142055 -- This gives you HTML + CSS for everything in Figma. If you're just representing this content in Hype and not animating it, you can just copy + paste this into either an iframe in Hype, or (better performance) the inner HTML of a rectangle. Its my understanding that you can capture autolayout features so this gives you an actual responsive element that can be resized using Hype's flexible layout properties :left_right_arrow:
4 Likes

Nice, plug-in. I was always running it through a file and ImageOptim, but this seems more convinent.

Thanks Daniel