Skip to content

Unit 2 · Visual editors: from design to code

Your Figma prototype is a picture. This unit turns it into code: you use visual editors, read what they generate, and fix it.

Learning outcome Hours Term
RA1 — Generates graphical user interfaces with visual editors, using the editor's features and adapting the generated code. 8 1st

What you will learn

  • Analyse the tools and libraries available to build graphical interfaces
  • Create a graphical interface with a visual editor
  • Use the editor to place the interface's components
  • Change component properties to fit what the app needs
  • Analyse and modify the code the visual editor generates

Lessons

  1. GUI tools — native, cross-platform or web: sort any toolkit by asking what draws the interface, and defend a choice with a fact
  2. Framer first page — build a landing page in Framer with stacks and sizing modes, fit it to three breakpoints and publish it
  3. Generated code — name eight problems of machine-generated code, then fix them with tokens, flexbox, real tags and exported assets
  4. Framer project — read Framer's code, build components with variants and hover, and start the school bar project