Creating interfaces in Interface Designer
  • 15 Sep 2022
  • 10 Minutes to read
  • Dark
    Light

Creating interfaces in Interface Designer

  • Dark
    Light

Interface Designer is a powerful new way for creators to work with their collaborators without requiring those collaborators to navigate the full complexity of a base. You can create multiple interfaces on top of the same base to ensure collaborators always see and interact with the information most relevant to them.

Overview

NOTE
Interface Designer is currently in open beta and is a feature being actively worked on and added to. All Airtable users currently have access to Interface Designer. While Interface Designer is available for all customers to use for free during beta, it will be subject to pricing and packaging restrictions down the road. After the beta ends, your workspace will retain access to any interfaces you build during the beta regardless of your Airtable plan.

Airtable’s Interface Designer offers flexible ways to simplify workflows, visualize data, and tailor information to different audiences across organizations. In this article, we’ll be covering everything you need to know to create a new customized interface!


Are you trying to figure out what you’d like to build? Or maybe you’d like some inspiration of how interfaces can work for specific workflows? Check out our guide on building new interfaces to get a quick rundown on the whole process from start to finish.


What is an interface?

An interface is like a unique, customizable window into your base’s data. Instead of presenting collaborators with an entire base full of information, you can focus their attention by displaying the data they need to know alongside the context needed to understand and interact with that data.

Those familiar with Airtable are probably very familiar with the idea of a base: an organizing container for tables that hold your data. Interfaces are a presentation layer that can pull information directly from tables in your base.

diagram_interfaces

And as a base is a collection of tables, interfaces are also grouped into collections with a single name and icon for easy identification.

interface_parts

So, to sum up: each interface is located in an organizational group of interfaces, and each group of interfaces is connected to a single base.

teaching_diagram


Creating new interfaces

If you have “Owner or “Creator” permissions on a base, you can create an interface for that base.

Interfaces are collected into organizational groups that can be easily identified with a single name, icon, and description. This is the name and icon that will appear for that collection of interfaces on your home screen:

interfaces_homescreen

 A group can contain multiple interfaces, and each of these interfaces can be found on the Overview page for that group of interfaces:

navigate_to_single_interface

NOTE
Want to learn more about managing and navigating interfaces and groups of interfaces? See this support article!

Creating a new group of interfaces

If this is the first interface in a base, you'll first need to create a new interface group with a name and icon for the whole group of interfaces. Navigate to the base you’d like to create a new group of interfaces in, and click on the “Interfaces” button in the top left of the page.

spotlight_interfaces_button

Clicking on the “Create new” button from the Interfaces home page for a base will walk you through the setup of creating a new group of interfaces:

create_new_interface

You can now customize your new interface group’s name, icon, and icon color. You can additionally add an optional description to let all collaborators know the main purpose of this group of interfaces.

update_icon_and_color

NOTE
If you want more icon choices, you can choose to set an emoji as the icon for your group of interfaces by following the same process used when customizing bases.

For this example, here is the name, icon, and description for the new group of interfaces we created:

new_interface_group

Clicking “Next” will take you to the Overview page for this new group of interfaces. We are now ready to start adding new interfaces within this group by clicking the “Create new” button.

new_interface_group

NOTE
A group of interfaces can only be published if it has at least one interface within it. To learn more about editing, previewing, publishing, and sharing interfaces, please see this support article.

Creating an interface within a group

To recap: interfaces are customizable, editable, and shareable visual representations of your base’s data, and each interface lives in a group of interfaces for organizational purposes.

If you are not in editing mode already, you will first need to click “Edit” :

spotlight_edit_button

Once in editing mode, click on “Create New” button to begin the process of creating a new interface. 

spotlight_create_new_button

You can also create a new interface from the interface group’s menu in the top left-hand corner:

side_menu_create_newgif

1. Choosing a layout

The first step to creating a new interface is to choose from the available layouts:

layouts

Layouts are a framing structure for you to build your interface on. A layout is like choosing a recipe; you have a good starting place that can be customized to your unique tastes by introducing additional ingredients.

There are a variety of layouts to choose from, including Record review, Record summary, Dashboard, and a totally blank layout if you’d like to start from scratch. To learn more about the different available layouts see this support article.

NOTE
Each interface can only have one layout and you can not change the layout for an interface after the interface has been created. You can always feel free to create a new interface if you’d like to try a new layout.

Connecting your layout to a table

Once you’ve selected the layout that is the best fit, you will then need to connect that layout to one of your base’s tables.

table

As you do when creating a new view, you can then configure your data by adding filtering conditions or sorting the information you are retrieving from your table. Note that if you selected the “Blank” layout, you would skip this step.

NOTE
Though each layout is connected to a single table from your base, you can fully customize and add new elements to your layout. Each element can be configured to draw from a different table in your base, with the information filtered or sorted according to your needs. To learn more about configuring the elements in your layout, please see this support article.

2. Giving your interface a name and description

Once you’ve chosen a layout and connected it to a table, you can add a name and description to your new individual interface for clarity and to let your collaborators know how to interact with it.

name_and_Describe

If you choose the “Blank” layout, you’ll skip this step, but we recommend editing the name of your interface now lest you navigate away and forget what you were building.

3. Adding and configuring elements

Elements are the building blocks of interfaces. Adding, reconfiguring, and reformatting elements in an interface will allow you to fully customize the look and feel of that interface.

If you created your interface using a layout, each piece of that layout is an element. Clicking on any element on the page will open up the “Properties” panel that will allow you to edit what is displayed in that element.

zeeb_property_party

While in editing mode, you can drag-and-drop your element anywhere within your interface, and your interface will automatically make space for it:

move_that_Zeeb

Not only can elements display information, but they can also be interactive. You can create editable elements to allow collaborators to update information directly from an interface, allowing them to update the data for the underlying records within your base.

You can also use elements to change the information displayed on the screen by allowing the user to select records, create their own filters, or comment directly on records.

There are many different types of elements that can be configured and combined to make your perfect interface. To learn more about elements, you can read the adding and formatting elements and the configuring elements support articles.

NOTE
Base collaborators will be unable to see your new interface outside of editing mode until you publish that interface. To learn more about editing, previewing, publishing, and sharing interfaces, please see this support article.

4. Previewing, publishing, and sharing your interfaces

After spending some time building your interface, it’s time to get a preview of the final product. Clicking on the “Preview” button in the top bar will let you see what the final product would look like if you published the interface in its current state.

preview_as

You can also use the “View as” toggle to view your interface from the perspective of the different collaborators on your base. This is particularly helpful if you added a “Current user” filter on your interface:

current_user_filter

When you’re happy with the final results, you can click the “Publish” button in the top bar and choose to publish your new interface: 

publish_interfaces

Interface Designer allows you to select which, if any, of your interfaces you’d like to publish within an interface group so you can specify one or multiple interfaces to publish at once.

NOTE
Once you publish a group of interfaces, those interfaces are visible to all current base collaborators. Meaning, collaborators can see the interface group at the top of their home screen and navigate to it directly from there or from within the connected base itself. Additionally, interfaces each have a unique URL, so you can share an interface directly with a base collaborator by sharing an interface’s URL. If your interface includes a “Record picker” or “Record selector” element, then the URL will also include the specific record you are viewing at that time. To learn more about sharing interfaces, please see this support article.

With your new interface published, you can now share that group of interfaces directly by clicking the “Share” button in the top right-hand corner of the screen.

spotlight_share

From the share menu, you can share an interface group via email with an individual Airtable user or a user group.

share_menu

Note that if you share an interface with a user who is not already a collaborator on the connected base, you will make that user a base collaborator. The share menu will allow you to set collaborator permissions for the new person you are inviting to the base as part of sharing the interface:

expanded_share_permissions

NOTE
At this time, only base collaborators can see interface groups on a connected base. If you share an interface with a user, you are effectively making them a base collaborator and granting them access to the underlying base’s data as well as the interface itself.

See this support article to learn more about editing, previewing, publishing, and sharing groups of interfaces.


FAQs

Who can create new interfaces or new groups of interfaces?

Collaborators with “Owner” or “Creator” collaborator permissions on a base can create new interfaces and groups of interfaces.

How does Interface Designer differ from other sharing tools in Airtable, like shared views or forms?

That’s a great question! It’s so great there is a whole article devoted to the new landscape of collaboration in Airtable with the introduction of Interface Designer.

Can I share an interface without making someone a base collaborator?

At this time, only collaborators on a base will be able to see interfaces for that base.

Can I send a base collaborator a link to an interface I’ve built?

Interfaces each have a unique URL, so you can easily share a specific interface with a base collaborator by sharing the URL for the interface you’d like them to see. If you’d like to learn more, please read this support article on sharing interfaces.

What happens if more than one collaborator is editing an interface at the same time?

Interface Designer will always save the most recent changes to an interface. So, if more than one collaborator is editing the same interface, Interface Designer will reflect the last changes to both collaborators.

Can I duplicate an interface?

Yes, you can! Check out this support article for more details.

Can I print an interface?

At this time we do not support printing or exporting interfaces. 

Can an interface be connected to a shared view?

Yes, but maybe not in the way you might first think. You can add a Grid element to your interface and copy the view configuration of the shared view you are looking to showcase from the base where the interface is being built. If the shared view resides in another Airtable base, then you would need to create a synced table from that shared view and then add a Grid element to your interface connected to that synced table.


Was this article helpful?