Framer, for real: code, components and project¶

Exercise framer-code-components-project-annex.pdf · PDF Project brief framer-project-brief.pdf · PDF

Open your published Framer page and press F12. Go to Elements and unfold three levels. Class names made of letters and numbers, div inside div inside div, styles nobody would type. Framer wrote this for you. If you had to change it by hand tomorrow, could you?

Your page is online, but so far it is one person's drawing. Three cards you built by hand, a button that goes nowhere, and code you have never read. This page turns it into a real web page, and gets you started on the project that assesses Unit 2. There is no Unit 2 exam: the project is the assessment.

What the press printed¶

We are back at the printing press. The poster on the street is perfect. The plates the press used to print it were made for the machine, not for you.

Reading those plates is a skill you can practise on your own page, and the eight problems give you the words. Here is where to look:

An @media rule, or media query, is CSS that applies only at certain window widths. It is what a breakpoint turns into in the browser.

The details change with Framer's versions, so trust what your page shows. The overall verdict does not change much:

Components: one master plate¶

You built three cards by hand. Now change the corner radius of all of them. Three edits. On a page with twelve cards, twelve edits and one forgotten. You solved this in Figma with the mould and its bricks, and in the print shop it is the same trick: one master plate, many prints.

Framer calls these properties variables in some panels. Do not confuse them with Figma's variables: here it only means "this part can change per instance".

To make one:

1. Right-click a feature card and choose Create Component. Name it Card.
2. Delete the other two cards, and drag in two instances of Card from the Assets panel.
3. Change the title of one instance: only that one changes.
4. Change the corner radius inside the component: all three change.

Then let each instance have its own content: make the title and the body text properties. Do the same with your button. Check that the three cards still Fill the row on Desktop and stack on Phone.

flowchart TB
    C["<b>Component: Card</b><br>the master plate<br>radius, padding, structure"]
    C -->|"title and body = properties"| I1["<b>Instance</b><br>its own title and body"]
    C -->|"title and body = properties"| I2["<b>Instance</b><br>its own title and body"]
    C -->|"title and body = properties"| I3["<b>Instance</b><br>its own title and body"]

A component is not a group, either. A group only holds layers. A component has instances that follow it.

Variants and hover¶

A button is not one picture. It has versions, and it reacts.

A variant is another version of a component, inherited from its primary variant. A hover state is the version shown while the mouse is over it.

Open your Button component and add a hover state. Framer branches it from the primary variant and wires the interaction for you. Change the background in the hover state, then open Preview and move the mouse over the button: it animates between the two. Then add a second variant, Secondary, with just an outline, and use it for one button.

Now give your Card a hover state too, for example a darker border.

Make it work for everybody¶

These five checks come straight from Unit 1, and they are quick:

The project: fix the school bar¶

The project starts at the school bar: go and look, and note its problems (queues at the break, not knowing what is left, prices, paying...) and ideas to solve them. It joins that visit to your Framer work.

The project brief has the full list and the rubric. In short, your page needs:

You hand in the address of the published page, an invitation to the teacher's account as editor of the project, three screenshots (Desktop, Tablet and Phone) and the file code-reading.txt.

How to start¶

Do not open the colour picker yet. Write one sentence with the problem and your solution, in this shape: "At the break the queue takes 10 minutes, so my app lets you order before the bell." Your own fact from the bar goes in it.

Then write the content: the sections in order, with the real text. What does a visitor read first, second, third? Only then do you draw. And do not build ten sections: the brief asks for four or more, and a short page done well beats a long one copied.

Key takeaways¶

• Framer's code is good for the browser but unmaintainable by a person: those are two separate qualities. In Framer you edit the canvas, not the code.
• A component is the master piece, an instance is a copy that follows it, and a property is what each instance may change.
• Unlinking an instance cuts it off from future changes to the master. Expose a property instead.
• A variant is another version of a component. A hover state adds feedback, but it cannot be the only clue, because touch screens have no hover.
• Every button links somewhere, content images have alternative text, and Tab reaches every link in order.
• The Unit 2 project is the assessment: a Framer page for your solution to a school bar problem, due Friday 6 November 2026, 23:59.

Quick check¶

You have read what a machine prints. From Unit 3 you leave the editors and write the app yourself: everything you saw in DevTools, you will now write on purpose. Next: Unit 3.