Tutorial 201:

Create

Tutorial 201: Lesson 4

Layouts

Lesson Materials
Download Files

Designing a user interface

You’ve defined the tables and fields that contain your information. But right now, your users don’t have a good way to view or interact with the data. You need some layouts.

Layouts are the screens your user sees as they use your app. Layouts are made up of parts that have special functions, like displaying header or navigation information.

FileMaker Pro gives you a set of tools, including stencils and alignment tools, to help you create professional-looking screens sized to fit on specific devices. The New Layout/Report Assistant walks you through the steps for creating a new layout. The Field Picker tool lets you quickly add a set of fields to your new layout.

Layout themes keep the color, font and other design attributes of layout objects consistent, easy to apply and easy to update. Since even simple apps have many layouts, FileMaker Pro also provides a handy way to keep them organized for easy upkeep.

Why is this important?

  • Your layouts are the face of your app! This is what your user will see and interact with.
  • Layout setup tools give you a head start in creating interfaces that perfectly fit your users’ devices. 
  • Users’ eyes are trained to find misalignments, even if they aren’t conscious of them. The alignment tools demonstrated here make it easier to create professional-looking interfaces.

Video 1

Creating your first user layout

Learn the basics of layout setup by creating the Client List layout.

In this video, you will:

  • Use New Layout/Report wizard: get help creating a layout from scratch (0:40)
  • Set screen stencils: create layouts for specific screens (1:49)
  • Learn about layout parts: understand layout structure (2:04)
  • Add fields with the Field Picker: present your data quickly (2:46)
  • Align using dynamic guides: keep fields and labels aligned while you move them (5:02)

Video 2

Refining the list layout

Make adjustments to your new layout so it’s easier for users to see important information.

In this video, you will:

  • Adjust layout height: save screen space (0:32)
  • Undo and redo layout changes: undo changes you don’t want (1:20)
  • Apply styles and themes: manage layout appearance with a few clicks (2:00)
  • Manage layouts: keep layouts organized (3:38)

Related Resource