This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Colin Sygiel
Posted Jan 02 - Read on Facebook

Hi all, I'm relatively new to Framer and started working on prototyping a web application, with multiple pages.

I got a few questions:
1. Do you mainly use the design tab to design all pages with content and then apply code where needed, or do most framers work mainly with the code tab?
2. Related to the first question: Is it common practice to have a hybrid approach where you design components and then use code to structure components on the page/make re-usable?
3. How do you structure the hierarchy/organization of your pages? Do you make a FlowComponent out of the homepage and then link all other pages using flow?

Big thanks, happy new year!


Yasin Arık

Ok, as I am a new user (still on trial mode though) I am not sure if I can help you but here is what I've done in the past 5 days of Framer.

First of all, frames are a very good approach. They do parenting very smartly.

So, I am currently working on an Instagram clone. I have a serious project in my mind and I thought that I can learn Framer better with cloning Instagram because it consists many elements that I will also use similar versions in my project.

I want the clone to be very dynamic. Hopefully, I will share the results so people can see what I have done and give some feedback so we all improve ourselves.

Currently, the main feed tab of Instagram clone is working. I assign random usernames, random likes, random photos. I can populate the post amount. It's just a loop and it can create any number of posts in theory. Also every post has a random number of multiple photos. Some posts have 3 photos, some have only 1 photo in a post. Every post has a different (random) predefined photo aspect ratio. 1:1, 2:3, 4:3, 5:4 etc.

There is a "Stories" panel on top. It's scrollable and it is also generated by a loop.
So, how I achieve that?

I designed the elements in design tab. I didn't use an artboard for the phone size (I mean the templates, iphone 8 for example)

In Framer design tab, you don't have to create elements inside each other. You can assign parents to them by code. However, first of all you can bring the attributes of each element that you designed on design tab into code tab.

I didn't know that this was possible but when I had learned it, I started researching about copying elements from design tab..

Then thankfully, I found the module called "Symbols". Basically it creates classes from the elements from the design tab and make them reusable.

To illustrate, I created an Instagram post.
First the username and profile picture panel on the top of the each post. Called it topHolder. Then created a photoHolder and a bottomHolder.

In the code view, using the Symbols module (and it's very basic to use after you get the point) I created classes (or Symbols) from those elements.

However, I can't see anything on screen yet. Because I need to create "instances" from those classes. See how everything connected to each other? Now, you can create any amount of instances in any place. You can also parent them in each other so the placements become relative.

Lastly, I use the "selectChildren()" command most. This way you can change the properties (.height, .width, .color, .text etc) of any children inside a parent layer.

Read the entire post on Facebook