Framer X: TechCrunch Mobile Site Prototype with No Code

Stefanos
Prototypr
Published in
4 min readFeb 18, 2019

Some people really liked by SBB post and that got me thinking. What can i do next with Framer X and no code? When Freddy Iboy shared some thoughts on Classic Framer and Framer X i had a eureka moment. I agree with Freddie but that’s another story. Anyway, back to Framer X and this new design and prototype idea.

Check out this cool Framer X prototype with real-time data from accelerometer and gyroscope. No code needed.

Framer X comes with a bunch of powerful tools for prototyping, like the Scroll tool. This tool can get you a long way into creating powerful prototypes with little effort and no React code.

You can download and try Framer X for 14 days free.

Framer X Prototypes for Websites not Just Apps

The SBB prototype was all about re-imagining an iOS app from the ground up with no code. This prototype is about a high fidelity version for one of the most prominent tech publications in the world: TechCrunch’s mobile site. No pressure!

The Scroll tool is so powerful that you can create a version of TechCrunch’s mobile site homepage. As fast as in an hour. Copy and paste content from TechCrunch took me longer than designing the prototype. All these post tiles, dates, author images and digging into CSS.

The setup of the prototype uses two Scroll components. One for scrolling vertically the main stories feed. Another Scroll component, inside the original component, for horizontal scrolling.

All images come from the Framer X Store component: Design Hunt by Mac Petriv.

Framer X Custom Components

Each story on the main “feed” is a custom made Master component with a bunch of instances using three overrides — events to customize each story’s properties

  1. Post Title
  2. Time
  3. Author

That means that the initial (Master) component acts as a template for all the components that will be created based on it. You can turn anything to a custom component by selecting the frame. Then Command + K or right click and and select Create Component.

Command + D will create a duplicate of the original (Master) component. The new component will be a child of the Master component. This child component is called an Instance.

Framer X Custom Components and Instances are Powerful yet Simple

Instances are powerful yet simple to understand and use. Like children in real life, Instances (the children of Master) depend on their parent.

Any changes made to the Master component apply in real-time to all children (Instances). In this example a bunch of Instances representing news stories blocks from TechCrunch.

“Even years later, Twitter doesn’t delete your direct messages” is an Instance of the storyBlock Master component. So is “Daily Crunch: Amazon scraps HQ2 planes in NYC”. Both Instances depend on the Master component (top left) for their properties like the post_title, the time and author.

Notice that properties — events names use short and descriptive names.

Let’s say the font weight and size of the post title are not exactly right. Instead of changing each of those two Instances properties, you can update the Master. The Master component will update in real-time the font weight and size in the Instances.

The same applies for colors, positioning elements, frame size, images, you name it.

The horizontally scrolling section “Where we’ll be next” follows the same design pattern. A custom made Master component with a bunch of instances using three overrides — events to customize each section’s properties

  1. Post Title
  2. Date
  3. Location

Notice that this second screenshot has very “ugly” events names. This is technically correct but in principle using short and descriptive properties — events names will make the prototype easier to read and understand.

Everything else in this prototype is a bunch of frames with the appropriate colors and text as seen on TechCrunch’s mobile site on iPhone X (sans ads).

That’s it pretty much. A high fidelity prototype ready to share and optimize later on . Sure, i could add another screen for tapping on the hamburger menu or mouseOver effects on titles and images etc. I didn’t.

This prototype idea was to show off how 90% of the design of one of the world’s most popular tech websites can be designed using Frame X in about an hour with no React code.

Obviously the TechCrunch logo, content, author names et al belong to TechCrunch and its mother company. I hold no rights and i claim no rights on any of these assets. They were just used for showing off the design.

This post was originally published here.

Sign up to discover human stories that deepen your understanding of the world.

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

No responses yet

What are your thoughts?

I’m still a little confused as to how you’re pulling in your react production components into this framer repo — I have a number of already-built react components that we’re trying to build out in framer X, but we have the problem of what to do when…

Hello Ivan, thanks for the cool article. I want to clarify one thing: is it still makes sense to use this with the new updated Framer X Beta(as you can simply add components one by one) and if it is possible to add simply all of the components all…

Is it possible to refer the ButtonType and Size_options that you defined on the Props again in the options for the Property Panel? So you don't need to declare options twice…
Or even import directly from the external library? Does it work on TypeScript?