romanoremo.it
All courses
Design & UX/UI

UI Design

A consistent interface does not come from talent, it comes from a system: a small set of rules about typography, colour and spacing, applied everywhere. This course teaches how to build that system and work inside it.

Figma is the working tool, and we cover the parts that genuinely matter: auto layout, components, variants and variables. But the subject is not the software. It is how to design components that survive as the product grows, and how to hand them to developers without a hundred clarification questions.

Accessibility and dark mode are not a bonus module at the end: they are criteria that shape decisions from day one, because retrofitting them costs far more.

Indicative duration
20 hours
Level
Intermediate
Prerequisites
None. A visual sensibility or graphic design background is an advantage.

Who it is for

  • Graphic designers moving from print to digital
  • UX designers who want to strengthen the visual side
  • Product teams that need to establish a design system
  • Frontend developers who receive Figma files and want to read them better

What you will be able to do

  • Apply consistent typographic scales and spacing systems
  • Build a design system with components and variants
  • Work fluently with auto layout and variables in Figma
  • Design to WCAG contrast and accessibility criteria
  • Prepare a handoff developers can use without interpretation
  • Manage light and dark themes with design tokens

Programme

  1. 01

    Visual principles: typography, colour, spacing

    Modular scales, hierarchy, grids and vertical rhythm. The rules that make an interface legible before they make it attractive.

  2. 02

    Design systems and component libraries

    Building a library of reusable components, with naming and structure that hold up as the team grows.

  3. 03

    Figma: tools, auto layout and variables

    The features that save hours: auto layout for components that adapt, variants for states, variables for themes and tokens.

  4. 04

    Designing for accessibility (WCAG)

    Contrast ratios, target sizes, visible focus and hierarchy. Requirements that are increasingly legally binding, not optional.

  5. 05

    Developer handoff and annotation

    What a delivered file has to contain: states, responsive behaviour, edge cases. Everything that otherwise gets invented by someone else.

  6. 06

    Dark mode, themes and design tokens

    Setting colours as semantic tokens rather than fixed values, so multiple themes do not mean redoing the work.

Tailored programmes

No course is a fixed package. Duration, angle and depth are agreed around the objectives of the people taking part, and topics from different courses can be combined into a single programme. I work with corporate groups and with one person alone: tell me what you need and we will build the programme.

Request information

Frequently asked questions

Is a paid Figma licence required?

No, the free tier covers the entire programme.

Should it follow the UX Design course?

Not necessarily, but UX then UI is the sequence that gives the best results. They can also be combined into a single tailored programme.

Can we work on our own design system?

In corporate courses, yes: it is the most frequent use case and the most useful, because the output stays with the team.

How deep does the accessibility coverage go?

It has a dedicated module and is applied as a criterion across all exercises. We cover the WCAG requirements relevant to interface work.

Related courses