> "So how do i actually create HTML graphics?" Traditionally, graphics template creation has relied on proprietary editors that are linked to the specific rendering system. But as HTML graphics is an open format, it relies on an *ecosystem* of tools and providers- allowing users to pick and choose the best workflow for creation. To learn how to use each of these tools, refer to our Guides section. --- # After Effects (with plugins) Ferryman by StreamShapers offers a web application which can convert AE animations into dynamic templates via a Lottie file. This means that the AE file will first need to be exported to a Lottie file (using a plugin such as BodyMovin) then be put through StreamShaper’s app where you can define the dynamic fields and out comes a HTML graphic or OGraf ready to be used in your graphics system. ![](https://www.youtube.com/watch?v=u4wruk2QTs0 "After effects to HTML graphics") # Loopic The "Figma for HTML graphics”. The tool is designed specifically for HTML graphics template creation, the workflow is streamlined with a single click export of a template that is ready to be imported into various graphic controllers. And while the app is simple to use, you can still implement complex animations such as transition logics using the browser's native feature, as well as ingesting live data via an API. ![](https://www.youtube.com/watch?v=P6VEWyv7-P0) # Rive The draw of Rive is in its powerful animation editor which includes a state machine for complex animations and transitions. In addition to the editor, Rive uses its own .riv file format and the runtime renderer, which allows them to go beyond traditional CSS effects and HTML performance. ![](https://youtu.be/vNHH2sna2pI) # AI Tools