Fig: Frame Interface Guidelines

Best practices for designing great Farcaster frame experiences

A few weeks ago, we announced Frog, a framework for building Farcaster Frames, as part of our collaboration with the Wevm team.

Today, we’re excited to open source Frame Interface Guidelines (Fig), which outlines best practices for building great frame experiences, inspired by Apple’s Human Interface Guidelines.

Why do we need best practices?

Frames turn any cast into an embedded interactive app in a Farcaster client such as Warpcast, redefining how content is viewed, engaged, and shared on social media.

Frames have revolutionized user interactions within Farcaster, turning static posts into interactive elements useful for ecommerce, games, and other social experiences. But they were lacking a great developer experience, so we built Frog to enable developers to build great Frames.

Since shipping Frog, we realized we were missing clear guidelines on what makes or breaks a frame experience. The current landscape of Frame development, although innovative, lacks consistency, leading to user confusion and a steep learning curve that hinders wider adoption.

So what exactly is Fig?

Inspired by Apple’s Human Interface Guidelines as the standard for consistent and user-friendly design, we built Frame Interface Guidelines (Fig) to establish a common design framework that encourages creativity while maintaining a cohesive user experience across different frames.

Fig provides comprehensive guidance on designing Frames that are not only functional but also delightful to interact with. It encompasses everything from layout and typography to more complex elements like user interactions and accessibility, ensuring that Frames not only look appealing but also function smoothly across different devices and platforms.

We provide all that guidance in the repository’s README, and in a separate Figma community file which you can fork and play with. We strongly recommend reading through the document end to end and frequently referencing it when building Frames.

How do I use Fig with Frog?

Frog is our framework for building high quality frames, along with developer tools for debugging and testing. Recently, Wevm built Frog UI, an extension of the Frog Framework that provides type-safe layout & styling primitives to help you build extensible and consistent dynamic Frame Image interfaces.

Frog makes it easy to follow the Fig through FrogUI frame primitives, familiar JSX components (SwiftUI-like) allowing you to rapidly compose layouts as well as manage color, icons, and typography in a systematic way.

By default, FrogUI has built-in system tokens and icons that align with Fig — great for a hackathons or prototyping frames. In addition, FrogUI can be customized with colors, icons, and other styles to add your brand’s unique touch. Finally, FrogUI uses responsive aspect-ratio units so that if you change between 1:91:1 or 1:1, your layouts and sizes will still look great. To get started with FrogUI and learn more, head to frog.fm/ui.

Code from FrogUI

How do I use Fig with Figma?

We have published a file to Figma Community with a set of aforementioned templates, and defaults for font sizes & colors which translate neatly to FrogUI's defaults.

What’s next for Fig?

As we continue to build on the foundation that Fig has established, we look forward to enriching the guidelines with community feedback and evolving needs. Future updates will focus on enhancing interactivity and improving accessibility to further improve the quality of Farcaster Frames.

We encourage developers and designers to adopt Fig in their Frame projects, contribute to its ongoing development, and help define the future of user interfaces in crypto. Visit the Fig Repository to get started with Fig, play around with the Figma.

Whether you’re a developer, designer, or a Frames enthusiast, reach out if you’re interested in collaborating or have feedback. You can reach us at achal@paradigm.xyz or georgios@paradigm.xyz. You can also find us on Warpcast at @achal, @gakonst, @awkweb, and @jxom.