Editing Content

You can choose to set up different types of input fields depending on your content. For instance, a blog might have a title, a slug, and a long-form field for formatted content. These may be different for a product directory or a photo blog, where you may need to add an image field. To edit the fields each CMS item will have, click on any of the column titles. This will trigger a modal to add new fields, where you can also re-arrange the fields or modify or delete the existing ones.

Adding Content to the Canvas

After setting up the content, go back to the canvas. Your collections are accessible from the Insert menu. Open the Insert menu, navigate to the CMS Content section, and drag and drop your collection onto the canvas. This will add a special stack with layers connected to your data. From here, you can edit the visual properties on the right, just as you would do with a regular Stack.

Add a Page with Content

If you wish to add a page instead that will automatically be populated with data from the CMS, navigate to the left panel. One you are in the Pages tab, click on the + button next to the CMS section. If you add the Index page, a page will be added with a list of all of the items in your collection. If you add the Detail page, you will be presented with a page with content from your individual items.

Note: If you chose to add the sample data, a new detail page called /blog will be added to your website, and you will find the stack of content added into the page for you.

The detail page will display content pulled from the first entry of the collection by default. In order to preview other items in the collection, change the content by selecting a different item from the dropdown menu.

Reference Fields

To add Pagination, select your Collection List, click on Pagination, select one of the two options, then pick how many items to load. Pagination also works with existing Limits and Start Offsets. Both the Spinner and Button are completely customizable, and you can pick any Variant for their Loading states. The Spinner itself is just a layer with a conic gradient and a Loop Effect, so you get full control. Adding Pagination helps make your blogs and changelogs much faster to load, especially when they contain dozens of items.

• Infinite Scrolling with custom Spinner component

• Load More Button with custom Button component

• Enjoy freeform positioning of both components

• Design your own Loading and Hidden states

• Make your CMS Pages much faster to load

Filtering

We've added the ability to filter your collection lists in the CMS. This allows you to keep your content in a single collection, yet customize how that collection is presented on each of your web pages. For example, if you're creating docs for your app, you might want to filter articles per topic on your homepage. Or when creating a blog, you might want to filter your blog posts per category.

While I’m quite early along in my own user journey in the UI/UX field, a background in philosophy, a critical eye on technology, and an armchair interest in various intersections with psychology and science for the last two decades have given me plenty of time to simmer over ideas. Here’s nine things I’ve been thinking about lately thanks to wonder people sharing good work. You can go check out the sources for yourself at the bottom for added context and a broader understanding.

1. Feedback

Feedback is critical. Just like the relationships that we keep with the people we love, the institutions we operate in, we need feedback. Are we doing a good job? What’s working? What isn’t? When I hit this button, what will happen? It’s helpful sometimes to think about UI as a conversation between a user and the system and in this way, we can draw in many of the principles of effective communication from social psychology and even therapy.

It’s the job of the designer to create parity between the state of the product and the state of the user to align expectations and outcomes. This plays out in ways large and small and represents a

Of the 23 components in Google’s Material 3 Design kit for example, 8 are devoted to feedback directly, while the remainder often use states to communicate intent.

(those are badges, checkboxes, dialogs, progress indicators, radio buttons, switches, snackbars, and tooltips)

2. Personalization

I’m imagining a future where app states and entire layouts are determined by factors referencing a user’s lived experience has an effect. I’m seeing versions of this today already. Website that load differently for returning users versus new users. Spotify and YouTube and any other algorithm-driven app shows you the things you’re more likely to listen, watch, or read.

I’m talking about something a little deeper. Take what you know about how a user uses your app and modify the app itself to show them more of what they want. If someone primarily uses Spotify for audiobooks, make the home page all about audiobooks, give them features that enhance their experience. If someone logs the same breakfast in a nutrition tracking app every day, prompt them if they want to log it when they open the app in the morning, saving them time. There’s so many ways apps can take data about how the user is using your app and making the user experience better as a result. I think this will continue to take off in the latter half of the 2020’s and beyond as machine learning and AI becomes cheaper, more accessible, and more ubiquitous.

It also generates this sentiment of “damn, they’re really thinking about what I’m doing” and I think that goes a long way to building trust (more on that below)

3. Iteration

Nothing too profound here, but I find that too often I’m trying to nail something on the first try rather than realizing that every major product and app was worse than it is today in the past and will be better than it is today in the future.

Iteration is how we get there. We make a thing, we improve it. We improve it again and so on. We’re great at this as humans, and I have to stop chasing perfection quite as often while continuing to do my best work as often of the time as I can.

4. Variable, unpredictable rewards

One of the great insights behind gambling addiction, loot crates in video games, and why social media is so difficult to stop using ties directly into brain chemistry. It’s being (1) being rewarded, (2) it’s variable (sometimes high, sometimes low, sometimes nothing), and (3) it’s unpredictable (sometimes you expect a certain outcome but the reward seems unlinked or disproportionate).

These things keep you coming back. How can we use this as a force for good? Can we promote behaviors that make for healthier users more of the time by paying attention to what users are doing and responding accordingly?

5. You have to build it to understand it

This guy makes a visualization to get users to think more about the true nature of reality. The end product is great, but it’s his thought process that stood out to me. And he’s right: to understand something, you have to make it. We have to tinker, we are tinkerers. We can only theorize so much of the time before we have to do, make, break, iterate, scrap ideas and so on.

6. Sometimes good design is hard

I think about Apple a lot. I have way too many screenshots in my camera roll of specific ways they’ve designed an interaction. Some of them are standard, some of them blow me away. I think it takes courage, risk and iteration to try new things. (Plus usability testing, time, and a robust and well-functioning team, but that’s a given.)

This is just a reminder to me that standard components are great and oftentimes new designers are encouraged not to reinvent the wheel whenever possible. (You dumb pleb, haven’t you realized that other designers have already solved this problem? Pay your respects first.) I think this actually isn’t great advice. If we really do learn by doing, I think we should try new things, often. We all benefit from casting the widest possible net of ideas, so long as we have a good way of whittling down to the good ideas in the end.

I think it stifles innovation when designers are encouraged to stay safe.

Or think about it this way: how do we come to have a floating action button? Someone realized there was a need and created this entirely new thing. That could be you! Or me! We could be creating the interfaces of 2030 and 2040 that involve brand new ways of interacting with our digital spaces.

Last thing here. The scroll bar is only 40 years old. The search bar is only 30 years old. Swipe and pinch gestures have only been around for 18 years. The computer icon is only 50 years old. Let’s get creative here.

7. Trust

Basic UX here, but users need to know what is going to happen before it happens. Trust is one of those carryovers from human to human relationships to human-computer relationships. And cheers to Yves Behar in User Friendly: How the hidden rules of design are changing the way we live, work, and play for saying it succinctly, “If for any reason [the product] does something when you don’t want it to, you lose trust”

8. Selective pressures

With the AI advancements these days that seem progress at a dizzying pace, I’ve been linking some ideas together about how technological progress is made, about how we make new and better things.

In evolutionary theory, it’s often that some quality of an environment forces a species through mutation, reproduction and sheer numbers to solve a particular problem. The main problem is “don’t die”, but it’s how we have eyeballs, why tendons exist, opposable thumbs, circulatory systems, why I can never swat a fly when I want to (they react anywhere from 5 to 12.5 times faster than we do).

It’s pressure, we need pressure.

War is a pressure, making money is a pressure, limited resources is a pressure. Do we need pressure to push progress and truly innovate? That’s a question I’ve been thinking about lately. Some of the most important discoveries to ever happen to technology have come from wartime including breakthroughs in cryptography, computing, storage, interaction, AI, materials science and literally every major category of technology.

I don’t want war to be the main pressure that drives progress. So maybe it’ll leave it there.

Further reading/watching:

New This Month

This quality update brings canvas and layer panel improvements. We've updated the Component symbol throughout the app to differentiate it from Grids. Plus, we've made Primary Breakpoints and Variants more distinct in the left panel, making it easier to see if you're editing the primary or an instance. Breakpoints will now also show the ranges in the layer panel. See more updates below.

From January

Last month, we added support for automatic tinting and new layout options for components, plus a whole lot of fixes and improvements. If you give your Page a Fill color, this will now also tint browsers like Safari and will ensure you don't get plain white backgrounds when overscrolling on any mobile device. Plus, we've added support for Min Max sizing to all Smart and Code components, greatly simplifying many common layouts and patterns. See the full changelog below.

• We automatically set the body background, based on your Page's fill color

• You can now override the body background and customize per breakpoint

• We now support Min Max sizing for all Smart and Code Component

• We now consistently show the Min Max hint within the property panel

• You can now use all alignment options for layers with Position set to Fixed

• We now inform you if a parent layer height changes due to layout edits

• We improved the Radius and Padding controls, no longer resetting values

• Number inputs split in four no longer show steppers, so longer values fit

• We improved Appear Effects using Scale with Spring transitions