How to Create Isometric Mockups in Figma

Ruslan Galba
@hellotegra
Published in
2 min readMar 13, 2020

How to Create Isometric Mockups in Figma 🧐

Courtesy of @alexunderhess.design
β €
Hey friends,
β €
Today you will learn how to create isometric mockups πŸ”
β €
This time in Figma.
β €
I tried other tools, but couldn’t do it as easy as in Figma.
β €
However, I will show you other techniques for Adobe XD, Sketch and Studio as well in future posts.
β €
It looks simple but can be hard for the first time 😯
β €
Stay tuned.

TODAY YOU WILL LEARN HOW TO CREATE THESE MOCKUPS

AND THESE

CREATE A SIMPLE MOCKUP

ADD YOUR DESIGN

YOU CAN CREATE MOCKUP FOR DESKTOP AND ADD YOUR WEB DESIGN

GROUP & ROTATE BY 45

GROUP AGAIN

SET HEIGHT TO 57.73%

PLAY WITH INNER
Blur 30
X -5
Y -20
Opacity 20%
Color 3754M

AND DROP SHADOW
Blur 80
X 0
Y 200
Opacity 15%
Color 3754AA

TRY WITH OTHER SHAPES

Get 50+ Marketing Tools we use in Tegra 🀘

Follow the link πŸ‘‰ https://tegra.co/tools to get a list of πŸ“πŸŽ+ 𝐟𝐫𝐞𝐞 (𝐨𝐫 𝐜𝐑𝐞𝐚𝐩) 𝐠𝐫𝐨𝐰𝐭𝐑 𝐦𝐚𝐫𝐀𝐞𝐭𝐒𝐧𝐠 𝐭𝐨𝐨π₯𝐬 that we and other growth agencies use to scale businesses like yours + growth hacking insights.

--

--

Ruslan Galba
@hellotegra

Increasing revenue for DTC brands via Facebook / Google ads πŸš€Growth Strategist 🀘 Founder @hellotegra growth team πŸ€– $5M+ profitable ad spend in 2020