Framer X: TechCrunch Mobile Site Prototype with No Code
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.
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.
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
- Post Title
- Time
- 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
- Post Title
- Date
- 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.