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.

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.

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.