One of the recent narratives from the Farcatser & Base community has resonated a lot with me recently: Builder ≠ developer; you don't have to code to build and positively contribute.
This article is a text form of the workshop during the Frames Hackathon in Paris on March 9.
Frame - an interactive mini app within Farcaster feed.
In its simplest form, a frame is an image (or gif) with buttons. It can be single or multi-step, where a button triggers different actions - from navigating between frame's pages to initiating transactions.
Why building frames?
Distribution of your ideas
Simple & fast mobile-first prototype
Read more about frames in the docs.
From basic implementations to more complex frames, natively integrated into the apps. (Meaning that you can create a frame by copy-pasting links.)
POLL IN A FRAME
Supercast (built-in polls support)
Quizframe.xyz (quiz)
MINT IN A FRAME
Gallery.so (new)
Note: Mint with Warps is supported by default for Zora and Base networks.
BROWSE IN A FRAME
Explore web3 identities with Airstack Explorer.
Example: Browse all holders of Aux Arbres NFTs.
Copy & paste the NFT contract to the explorer.
Click Warpcast icon on the top right.
Copy & paste the frame link to your cast.
The frame on Warpcast:
COMMERCE IN A FRAME
Buying physical goods with just a few clicks through the Farcaster feed is a game changer (and my personal favourite use case). Set up your shop and start selling literally anything.
GATED FRAMES
NEYNAR FRAME STUDIO
Frame Studio: dev.neynar.com
Build multi-step no-code frames. Possible buttons/actions:
Switch between pages (incl. custom logic)
Mint NFTs (only Zora links; Base, Zora or Ethereum L1 networks)
External link
Examples: AMA announcement in /art
Step 1. Image + Calendar Reminder (external link) or About LGHT (page navigation)
Step 2. Image + Projects (external links) or Back to Step 1 (page navigation)
Frame Studio Interface
Frame Studio Analytics
'Interactions by cast hash' display casts that used that frame.
Note: a frame can be published by anyone, not only its creator.
FRAMEBOARD
Create a frame: frameboard.com
A curated board in a frame. Possible actions:
External link
Follow board
Switch between pages
OTHER (COOL) FRAMES
A list of frames that don't fit into any particular category but are worth trying:
Bountycaster automatically creates a frame for new bounties and allows you to manage the bounty through the frame; there's another frame for browsing existing bounties.
ETH Tipping in a Farcaster Frame - one of the first transaction frames built by @greg.
Follow [anyone] onchain frames from Interface, Paragraph, Converse and SeeMore (Links like paragraph.xyz/@name, frames.interface.social/name, converse.xyz/dm/name are auto-transformed into a frame on Warpcast).
PRO TIPS
Use Frame Validator - https://warpcast.com/~/developers/frames
It is helpful to preview, test and preload your frame. Preloading a frame with images (relevant for galleries) can significantly reduce loading time for the end user. To preload, simply click through your gallery in the validator.Mix & Match. A few other platforms support frames. For example, mint frames are integrated to Paragraph articles; Paragraph frames work within the Converse app.
Have fun! Because that's the whole point.
Building frames is simple and really doesn't require any coding skills. The more you build, the easier it becomes. New tools are launching every week, and I will keep updating this article. In the meantime, share your no-code frames with me on Warpcast, and I might (or might not) tip you some $degen.
Let's build 💙
You will get to know me better over time, and I would like to get to know you too! My direct casts on Warpcast (@kugusha.eth) are always open for conversations and discussions. You can also send me a message onchain via Converse or any other XMTP-powered app.
What is the easiest way to make FRAMES? Are there easy templates? Must be so simple that someone who sniffs glue can do haha
aside from the Frame Studio in Neynar?
Do you have a link to that? Not sure I’ve seen!!
this is a good summary by @kugusha.eth : https://paragraph.xyz/@kugusha.eth/no-code-frames-101
Neynar Is super easy dude. If a smooth and polished brain like me can do it, I bet a glue sniffer can 🫡
245 $DEGEN
great no-code guide to build frames. useful for all the non-technical founders in here h/t @kugusha.eth https://paragraph.xyz/@kugusha.eth/no-code-frames-101?referrer=0x8379bd16381620914d8fa3d535f6ca9ef23ece53
I made this frame fully in Figma with frame.town
Posted it for testing but already got some likes. Won't delete it :*
Holy guac 🤌
this is so cool
Looks like I’m gonna start building frames soon……
You bet!
very curious to learn more! 13690 $degen
Will get back to you when Figma reviews the plugin 🫡
Would love to add it to the no-code frames article but can't figure out how to navigate to figma https://paragraph.xyz/@kugusha.eth/no-code-frames-101
WIll let you know when it's live!
Love this! Can you share how it was done? Frame.town redirects to your profile
It's a Figma plugin that will soon open for beta testing (waiting for Team Figma review). See: https://warpcast.com/rafi/0x4e0210dc
Cool! Happy to give feedback
super!!!! love it man
this is amazing 🤯 cant wait to try it out in figma! 777 $degen
Been learning Figma for a while now. Gonna give this a shot. Any more tips you can share?🍺
No-code Frames 101 - eli5 frames - polls, mints, commerce, browsing (& more) in a frame - /neynar frame studio explained - helpful tips Mentioned apps and tools are linked in the comments. https://paragraph.xyz/@kugusha.eth/no-code-frames-101
POLLS IN A FRAME @super or /supercast @vocdoni @survey polls.dep.dev
MINT IN A FRAME @zora @highlight @gallery (new) /fxhash - coming ???
Browse in a frame: @airstack.eth Curated board in a frame: @frameboard Gated frames: https://app.onlyframes.xyz/ Commerce in a frame: @slice & @warpshop
Thank you for the shoutout 🙏🏻
Frame Studio by /neynar explained - Overview - Interface - Analytics https://neynar.com/
Other cool frames that don't fit into any particular category: @interface @paragraph @bountycaster @converseapp ETH tipping frame by @greg SeeMore frame by @cameron
here's the text version of the no-code workshop 👀 cc @ezbek @skyron.eth @emr.eth
I like this one! I did one a while ago, but yours is more structured, well done 🤌🏻 in case it helps to update any info: https://paragraph.xyz/@tomu/create-frames-without-code 10000 $DEGEN
Thanks for sharing! intentionally didn’t include manifold as I don’t support like/recast as a mandatory requirement. But haven’t seen glass before, will explore it
agree oh glass is really cool! @jtgi won’t stop shipping
this frame is broken but now i'm subscribed to your newsletter hell ya!
oh wow this one will be most active as i only have that much time in a day 😅 but appreciate the support https://paragraph.xyz/@higherathletes.eth/higher-athletes-program
Adding this: Create your own image gallery in a frame: https://frames-gallery.vercel.app/
Thank you!
Thank you! 1000 $degen