Framer: the canvas is the website¶

Exercise framer-first-page-annex.pdf · PDF

Picture a landing page on your phone: a big title, a button, three cards. Now shrink a browser window showing the same page, and the three cards stack by themselves. How many lines of code did it take to build that? None.

By the end of this page you can do the same: build a real web page for your own app, make it work at three widths, publish it, and open it on your phone. All of it in a browser, with nothing to install. There is a catch, though, and it is worth knowing before you fall in love.

The printing press¶

Keep one picture in your head for the whole page: a printing press.

In Figma you draw the poster, and someone else prints it. Framer is a press: the thing on the table is the poster, and the button at the top right sends it to the street.

Editors that write code¶

A visual editor is a tool where you build an interface by placing and adjusting pieces on a canvas, instead of typing it. A visual editor that generates code also writes out, as text, what you drew.

You may have met the first two below in 1^st year.

A snippet is a small piece of code, not a whole program. So Figma gives you pieces to assemble, and Framer gives you a finished product you cannot take away. They sit at opposite ends, which is why you should know both.

A tour of Framer¶

Go to framer.com, sign up with Google or an email, skip the questionnaire, and create a new blank project. Do not start from a template: you want to build every layer, so you know what each one does. If you would rather not have an account, tell your teacher privately and you will agree an alternative.

It will feel familiar, because it was designed for people who come from Figma.

Framer redesigns its panels often. If a word on your screen differs from this page, look for the idea, not the word.

Stacks: auto layout with another name¶

Draw a frame on the page, put a text and a button inside, and select the frame. In Layout, choose Stack.

A stack is a frame that arranges its children automatically, following a direction, a distribution, a gap and padding.

Seen those before? They are auto layout from Unit 1. Framer calls it a stack, and in the browser both ideas are the same CSS feature, flexbox: the browser's way of laying out items in a row or a column.

Sizing modes: as wide as what?¶

Every layer in a stack answers one question: how wide am I? Framer offers five answers.

Building a landing page¶

A landing page is a single page whose job is to present one thing and make you want it. Yours has a hero (the big opening block: the app name, one sentence, a button) and a row of three feature cards. Here is the layout, and how to test each choice:

flowchart TB
    P["<b>Page</b><br>vertical stack"] --> H["<b>Hero</b><br>vertical stack, Fit Content height"]
    P --> F["<b>Features</b><br>horizontal stack, gap 24"]
    H --> T["Title and sentence"]
    H --> B["<b>Button</b><br>Fit Content both ways"]
    F --> C1["<b>Card</b><br>Fill"]
    F --> C2["<b>Card</b><br>Fill"]
    F --> C3["<b>Card</b><br>Fill"]

When something misbehaves, it is usually one of these:

Breakpoints: one page, three widths¶

You have seen a page rearrange itself on a phone. The idea has a name and a date: responsive web design, from Ethan Marcotte's article in A List Apart on 25 May 2010. A responsive page adapts to the width it is given.

A breakpoint is a window width at which the layout changes its arrangement, not just its size.

In the press, it is the same poster cut for a wall, a bus stop and a leaflet. This course uses Desktop 1200, Tablet 810 and Phone 390. That is a common choice among Framer users, not an official standard: if Framer proposes other numbers in your project, use Framer's.

The rules of inheritance are what make it work:

The breakpoint you click on is the one you edit. If Desktop changed when you meant to change Phone, you selected the layer on the Desktop canvas.

So why only three? Drag the edge of a breakpoint: between 810 and 1200 the layout simply stretches. Fill and Fit Content do the work in between. You add a breakpoint only when the arrangement must change.

Two habits keep you out of trouble:

• Do not resize the cards by hand on Phone. Overrides pile up. The fix is one setting: direction vertical, width Fill.
• Test the widths in between. Open Preview and drag its width from 1400 to 360. A width where something breaks is a bug report, not a reason for a fourth breakpoint. The usual culprit is a Fixed width: find it and set Fill.

Publish: who is hosting this?¶

Press Publish at the top right, and Framer gives your site a free address on a Framer subdomain. Open it on your phone: scan a QR code made from the address, or just type it. You have shipped a web page.

Now look closer. Your page is sitting on Framer's servers.

That last line is the catch. You can read your page's code in the browser, but you cannot take it away. If Framer closes your account, the site goes with it.

Key takeaways¶

• A visual editor that generates code writes out what you draw. Figma Dev Mode gives you snippets to assemble. Framer gives you a finished site you cannot take away.
• A stack is auto layout under another name: direction, distribute, gap, padding. In the browser it is flexbox.
• Fill is the space the parent leaves free, Fit Content is what the layer holds, Fixed is a number of pixels, Relative is a percentage.
• A breakpoint is a width where the arrangement changes. Changes on the primary breakpoint are inherited; changes on the others are overrides.
• Fewer breakpoints are better: Fill and Fit Content cover the widths in between.
• Publishing puts your page on Framer's servers, with no HTML export.

Quick check¶

Your page is on the street, printed by a machine. Next you open up what such a machine writes, and learn to fix it: Generated code, assets and tokens.