Phone and social mockups

Two elements for showing a design inside something people recognise: a phone, and a social card.

Both are drawn by Framulus out of typed props. They fetch nothing, sign in to nothing, and carry no logo or wordmark. They are mockups, not official components of any product, and nothing in them is connected to a real account.

Phones

Two shapes

An iOS proportion with a pill cutout, and a flatter Android one with a camera hole

The screen

Any project image, chosen the same four ways every other image is

Proportion

Kept, inside the element’s box. Everything outside the body is transparent

Put a picture on a phone by dropping a file straight onto it, by selecting it and pressing a tile in Assets, or from the inspector. The screen is an ordinary asset reference, so replacing it is one press of undo and removing the element leaves the file in the project.

Post and video card

A post carries a name, a handle, a verified mark, its words, a date, an optional picture, and four figures. A video card carries a thumbnail, a duration, a channel with its own picture, a title, views and an age.

The figures are written rather than counted: what a card shows is 9.1K, and deciding that is a formatting choice with a locale in it. Dates are written for the same reason, so a deck exported today says what it said yesterday.

Both take design-system colours and the document’s own type roles, so a card on a dark slide is light and one on a light slide is dark.