New UX trend: Facebook 3D post mockups for apps

Wow your app fans with Vectary’s free mockups for Facebook 3D posts

Customize the Facebook mockup

We know how important it is to constantly bring creative content for your fans. Recently, Facebook 3D posts have been introduced and a lot of brands wanted to try them out first. Vectary has been one of the first free 3D design tools that allowed easy Facebook 3D post creation.

With the latest Vectary update you are able to, not only create 3D objects, but also bring 2D images to a 3D space. This means adding your app designs to 3D devices has never been easier. You can take your mockup to the next level by adding a 3D interface or objects floating around.

How to use a Facebook 3D post mockup template:

  1. Open the basic Vectary mockup template .
  2. Replace the image.
  3. You can play with the color of the device or add more objects from the library, or import 3D and 2D files from your computer. Export Image as glb (a 3D file supported by Facebook). Keep it under 3MB.
  4. Drag and drop the 3D file to your Facebook feed - it works on pages, too!
  5. Pick a background for your Facebook 3D post.
  6. Add text to the post and share it on Facebook.

We prepared a simple Facebook 3D post UX kit for you, optimized to be used on Facebook instantly:

Adding your own UI to our mockup is very simple:

Replace the image in the Vectary Facebook 3D post mockup
Export 3D mockup as glb

How to create Facebook 3D post mockups with 3D UI?

You have more options:

  • Create 3D UI design in Vectary - drag and drop objects from the library, start creating from scratch or import your own 3D objects.
  • Import each part of UI as a separate SVG file and edit the final shape in Vectary. For our Facebook 3D post we used a plain image as a reference to adjust the size of the imported UI parts:
Creating 3D UI with SVG

FAQ

Can I change the orientation of the phone in the Facebook 3D post?

Yes. Simply select all the objects (CTRL+A) and use the 3D gizmo for moving, rotating or transforming in the 3D space. Read more about how to get better results in Vectary > 

Can I create my own 3D models?

Yes, that’s what Vectary was made for. Edit the geometry with double click or create a new object and start 3D modeling from scratch.

My glb file is not working. What should I do?

Make sure your exported GLB file is below 3 MB. Try Facebook's validator, it will tell you what’s wrong with the file. Sometimes the replaced image can be too big and causing troubles. Try to replace it for an image smaller in size.

Ready to create a cool 3D mockup for Facebook? Let us know what you created. Tag @VECTARY in your Facebook posts.