kugusha.eth
Cover photo

No-code Frames 101

Build frames on Farcaster with no coding skills

Alexandra

Alexandra

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.

post image
Concept by @lght.eth

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

post image
polls from supercast (left), farcaster.vote (right)

MINT IN A FRAME

Note: Mint with Warps is supported by default for Zora and Base networks.

post image
mint from highlight (left), from gallery (right)

BROWSE IN A FRAME
Explore web3 identities with Airstack Explorer

Example: Browse all holders of Aux Arbres NFTs.

  1. Copy & paste the NFT contract to the explorer. 

  2. Click Warpcast icon on the top right.

  3. Copy & paste the frame link to your cast. 

post image

The frame on Warpcast:

post image

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.

post image
Slice frame (left), Warpshop setup (right)

GATED FRAMES

post image
Example: a subscriber-gated frame that reveals who our special guests were for Many Such Cases podcast

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)

post image

Frame Studio Interface

post image

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.

post image

FRAMEBOARD

Create a frame: frameboard.com

A curated board in a frame. Possible actions: 

  • External link 

  • Follow board 

  • Switch between pages

post image

OTHER (COOL) FRAMES
A list of frames that don't fit into any particular category but are worth trying:


PRO TIPS

  1. 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.

  2. Mix & Match. A few other platforms support frames. For example, mint frames are integrated to Paragraph articles; Paragraph frames work within the Converse app.

  3. 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.

Collect this post as an NFT.

kugusha.eth

Subscribe to kugusha.eth to receive new posts directly to your inbox.

Over 400 subscribers

Super Tight WoodyFarcaster
Super Tight Woody
Commented 9 months ago

What is the easiest way to make FRAMES? Are there easy templates? Must be so simple that someone who sniffs glue can do haha

Tudor 🟣🟡Farcaster
Tudor 🟣🟡
Commented 9 months ago

aside from the Frame Studio in Neynar?

Super Tight WoodyFarcaster
Super Tight Woody
Commented 9 months ago

Do you have a link to that? Not sure I’ve seen!!

Tudor 🟣🟡Farcaster
Tudor 🟣🟡
Commented 9 months ago

this is a good summary by @kugusha.eth : https://paragraph.xyz/@kugusha.eth/no-code-frames-101

Super Tight WoodyFarcaster
Super Tight Woody
Commented 9 months ago

489 $DEGEN

Super Tight WoodyFarcaster
Super Tight Woody
Commented 9 months ago

Thank you!!

MesshupFarcaster
Messhup
Commented 9 months ago

Neynar Is super easy dude. If a smooth and polished brain like me can do it, I bet a glue sniffer can 🫡

Super Tight WoodyFarcaster
Super Tight Woody
Commented 9 months ago

245 $DEGEN

IggyFarcaster
Iggy
Commented 11 months ago

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

Tudor 🟣🟡Farcaster
Tudor 🟣🟡
Commented 11 months ago

cc @brenoca

RafiFarcaster
Rafi
Commented 1 year ago

I made this frame fully in Figma with frame.town

RafiFarcaster
Rafi
Commented 1 year ago

Posted it for testing but already got some likes. Won't delete it :*

JacobFarcaster
Jacob
Commented 1 year ago

this is so cool

JacobFarcaster
Jacob
Commented 1 year ago

very curious to learn more! 13690 $degen

RafiFarcaster
Rafi
Commented 1 year ago

Will get back to you when Figma reviews the plugin 🫡

yggᵛᵛFarcaster
yggᵛᵛ
Commented 1 year ago

Holy guac 🤌

Alex - chimp.fun 🙉Farcaster
Alex - chimp.fun 🙉
Commented 1 year ago

Love this! Can you share how it was done? Frame.town redirects to your profile

RafiFarcaster
Rafi
Commented 1 year ago

It's a Figma plugin that will soon open for beta testing (waiting for Team Figma review). See: https://warpcast.com/rafi/0x4e0210dc

Alex - chimp.fun 🙉Farcaster
Alex - chimp.fun 🙉
Commented 1 year ago

Cool! Happy to give feedback

RafiFarcaster
Rafi
Commented 1 year ago

Will get back to you soon!

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

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

RafiFarcaster
Rafi
Commented 1 year ago

WIll let you know when it's live!

tldr (tim reilly)Farcaster
tldr (tim reilly)
Commented 1 year ago

super!!!! love it man

annoushkaFarcaster
annoushka
Commented 1 year ago

Looks like I’m gonna start building frames soon……

RafiFarcaster
Rafi
Commented 1 year ago

You bet!

Cheryl 🔵Farcaster
Cheryl 🔵
Commented 1 year ago

this is amazing 🤯 cant wait to try it out in figma! 777 $degen

🍺’-🔵Farcaster
🍺’-🔵
Commented 1 year ago

Been learning Figma for a while now. Gonna give this a shot. Any more tips you can share?🍺

Lucas | POAP StudioFarcaster
Lucas | POAP Studio
Commented 1 year ago

@gotoalberto esto puede ser interesante !

dwn2erth🎩Farcaster
dwn2erth🎩
Commented 1 year ago

so cool!!!!

FrankFarcaster
Frank
Commented 1 year ago

neat

TeeFarcaster
Tee
Commented 1 year ago

@topframes.eth !new

RafiFarcaster
Rafi
Commented 1 year ago

oh cool! didn't know about @topframes.eth

🔮 TopFrames.xyzFarcaster
🔮 TopFrames.xyz
Commented 1 year ago

Saved to the TopFrames list! 🫡 View all new Frames at https://app.topframes.xyz/feed/new

oreusaFarcaster
oreusa
Commented 1 year ago

nice wowow

DecaliFarcaster
Decali
Commented 11 months ago

You received a +100 🔥 FIRE bonus. Check your balance.

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

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

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

POLLS IN A FRAME @super or /supercast @vocdoni @survey polls.dep.dev

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

MINT IN A FRAME @zora @highlight @gallery (new) /fxhash - coming ???

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

Browse in a frame: @airstack.eth Curated board in a frame: @frameboard Gated frames: https://app.onlyframes.xyz/ Commerce in a frame: @slice & @warpshop

WarpshopFarcaster
Warpshop
Commented 1 year ago

Thank you for the shoutout 🙏🏻

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

Frame Studio by /neynar explained - Overview - Interface - Analytics https://neynar.com/

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

Other cool frames that don't fit into any particular category: @interface @paragraph @bountycaster @converseapp ETH tipping frame by @greg SeeMore frame by @cameron

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

here's the text version of the no-code workshop 👀 cc @ezbek @skyron.eth @emr.eth

tomuFarcaster
tomu
Commented 1 year ago

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

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

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

tomuFarcaster
tomu
Commented 1 year ago

agree oh glass is really cool! @jtgi won’t stop shipping

ted (not lasso)Farcaster
ted (not lasso)
Commented 10 months ago

this frame is broken but now i'm subscribed to your newsletter hell ya!

kugusha 🦋Farcaster
kugusha 🦋
Commented 10 months ago

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

ComplexlityFarcaster
Complexlity
Commented 1 year ago

Adding this: Create your own image gallery in a frame: https://frames-gallery.vercel.app/

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

Thank you!

TaylorFarcaster
Taylor
Commented 1 year ago

Thank you! 1000 $degen

ParagraphFarcaster
Paragraph
Commented 1 year ago

Explore the power of Frames with @kugusha.eth's new blogpost. Builder ≠ developer; you don't need to code to build or contribute positively. Discover features such as interactive mini apps, multi-step no-code frames, commerce, polls, and more in an easy, mobile-first prototype. Join the conversation on Warpcast!

No-code Frames 101