Hey Harry,

Figma announced a BUNCH of new features earlier this month. Here are the ones I started using immediately.

As a bonus, we’ll create this design step-by-step using the 5 new features 😎

[📣 Note: Learn UI Design, Learn UX Design, and Landing Page Academy are NOW OPEN for enrollments. 7 days only. Enroll your team for 30%+ off]

1/ Noise

After grabbing this accidentally baroque photo from Unsplash, I applied some subtle noise – which is now a native Figma “effect” (like shadows and blurs) 😀

You’ll need a translucent card to put the text on. By the way, Noise & Texture and Translucent Background are two of the methods in my Visual Interest Table – a giant resource of ways to spice up boring designs (comes with Landing Page Academy, since landing pages often need to look flashier 💅).

The Visual Interest Table also has (1) usage tips and (2) example screenshots!

2/ Brush strokes

Next, I added the text. Naturally, I wanted serifs. And I knew I wanted something pretty on-point.

So I popped open the Good Fonts Table, a mega resource that comes with Learn UI Design, and chose Instrument Serif and Newsreader.

But the new Figma feature here is a brush stroke underline, which I use under the header:

1. Switch to Draw mode (the squiggle icon in the bottom toolbar)
2. Press “b” for brush
3. Choose the desired brush style, thickness, and color
4. Draw on the canvas
5. Make further style edits as desired in the sidebar

This feature will be huge for handwritten annotations, which are a super easy way to spice up your designs that I call out in Landing Page Academy.

3/ Radial repeat

For a badge element, I wanted thin, delicate strokes – which tend to feel classy & match serifs (an idea from Learn UI Design's icon design lesson 😉)

Well, it’s now 100x easier to make badges with Figma’s radial repeat feature!

1. Switch to Draw mode (the squiggle icon in the bottom toolbar)
2. Click “Radial repeat” in upper-right corner of right sidebar
3. Adjustproperties as desired

​
And this ties in nicely with the next effect....

4/ Text on a path

That's right – you no longer need a plugin to add text around a curve! 😅

1. Draw a shape
2. Press “t” to add a textbox
3. Click the edge of the shape to start adding text
4. Type some stuff
5. Move the start of the text using the circular handle

5/ Dynamic stroke

To top things off,I added a textured "dynamic stroke" – a new feature which lets youadjust wiggliness (something I wish I could do for my kids, alas 🙃)

​

You can access this from Figma Draw or Figma Design. For the latter:

1. Create a stroke
2. Click “Advanced stroke settings” (the sliders icon)
3. Go to “Dynamic”
4. Set properties as desired

Put 'em together, and these new techniques can go REALLY far...

If you liked this step-by-step design tutorial, you’ll love my 3 courses, which are now open for enrollment (7 days only):

• 🎨 Learn UI Design ➡️ Learn the logic of beautiful design, from layout & typography to color & imagery.
• 💬 Learn UX Design ➡️ Confidently design usable, intuitive apps with best-practice interaction patterns and helpful heuristics.
• 🖥️ Landing Page Academy ➡️ Dive deep into the two specific goals of landing pages: to make viewers (a) go "whoa!" and then (b) take action

Each come with:

• Lifetime access to updates/additions
• A 30-day refund policy (no requirements, no questions asked)
• Access to a student community for feedback & mentorship

Any questions? I'll respond to all 😎

Cheers,
Erik D. Kennedy

PS. Enroll your team (5+ seats across any course) for 30% off AND, May and June only, 2 bonus coaching sessions. Details here.