Drawing a stunning landscape in Figma

Figma is my tool of choice for designing user interfaces. Extremely simple to use, the learning curve is a fraction of what’s required for any given Adobe Creative Cloud software. But, that simplicity comes at a price: Figma’s primary focus is not illustration or graphic design, and many designers still switch to Adobe Illustrator for those workstreams. For a while now, I’ve tried to avoid doing the same, since the immediate inundation with buttons, icons and collapsable drawers always makes my head spin.

Source of Adobe infographic (left). Source of Figma infographic (right).

Last year, in furtherance of that effort, I tested Figma’s ability to employ simple tools for rendering complex imagery. My landscape (depicted above) received widespread positive feedback, and many people asked that I share my process.

It took some time to motivate myself to create an actual tutorial, but, after about 12 months, I’ve finally completed it. Here are my 10 shockingly simple steps for drawing this stunning landscape in Figma.

Have questions as you go? Ask me in the comments

Step 1—Draw the Sky and Pond

Create a wide frame (mine is 2728x1535), and add two rectangles to it: one that covers the top 45% (i.e., the sky) and one that covers the bottom 55% (i.e., the pond). Then apply the following gradients to each:

Gradient 1 (overall opacity: 85%)

1. rgb(5,11,9,75%)
2. rgb(20,43,93,100%)
3. rgb(62,97,113,100%)
4. rgb(217,135,60,90%)
5. rgb(251,196,47,100%)

Gradient 2 (overall opacity: 100%)

1. rgb(8,25,45,100%)
2. rgb(45,83,112,100%)
3. rgb(7,38,104,100%)

Notice that the angle of the gradient across the pond is offset by about 10°.

Step 2—Draw Rolling Hills