Figma example of demo landing page by Jacky So

Figma for product marketing: Landing pages

File under: Revisiting Old Figma Mockups

Changing shape and corners in figma UI

Back when Adobe Illustrator was the default software of choice for any design team licenses, I remember feeling the shift of something going on in the industry: a desire for people to collaborate in real-time via the browser.

Around this time, I was using Illustrator for product mockups at a health tech startup, and after I’d get the sign offs on the mockups, I would code the product updates in Ruby and Haml (like a Ruby HTML). Before that, I was using free versions of Adobe Photoshop to create book covers and crunching them out as rapidly as I could so that we would get all the approvals and edits in before the trials ended.

Around 2018-2019, my product designer friends were talking about how much they loved using Sketch. Adobe Illustrator was still this behemoth software we all used out of necessity, but Sketch definitely seemed to be the favorite for SaaS product folks who liked rapid prototyping UIs before coding anything–and being able to do it as an asynchronous team.

Now, a lot of apps have their web-based versions that work out of the box in different browsers so everyone could be collaborating on different computers, but at the time, this felt sooooo ✨ special ✨.

I feel like I barely scratched the surface of Sketch because, shortly after, I decided to take the plunge into Figma. I watched idk how many YouTube videos about the future of product design apps and collaborating tools on the market, pros/cons, reviews, etc.

Figma was this amazing browser-based app that was so approachable for experienced designers, as well as designer collaborators. We could view and work in the same files from wherever we were, and there were a plethora of tutorials and plugins to help us get started!

I figured, I should pick a design app and stick with it (kind of like programming languages), because if there’s a requirement later on to use a specific language or software, you can adapt what you know. I was excited by the low cost of learning Figma, and I was excited by the idea that it was–overall–still relatively considered recent enough that I could grow with it. I’m one of those weirdos who enjoys being an early adopter of things, and even though Figma was already out for some years, it still felt fresh and new.

I did a new website wireframe layout for a friend’s organization on Figma, and shortly after this, we found ourselves in pandemic times.

My personal mission has always been about using my skills curated over a long, non-traditional pathway to suss out what communities need and influence whatever tech I could so that the tech actually represents reality.

I was never formally trained as a SWE, and I lack the acronyms and definitions that people who received a CS degree would know, but if it’s a need and no one is available to do it, I’m always happy to dive in and figure it out!

This kind of philosophy led me to being asked to join a volunteer effort to create software that communities would need to address pandemic issues. Eventually, this volunteer group became a real company, and I joined as one of the first employees.

I remember when our small and REMOTE team started talking about Figma, and of the small handful of us, I was the only one who already had an account and had previously used it. We really enjoyed the ability to rapid create some designs, even if no one on the team was actually a full time product designer by trade!

I will admit that, at the time, I was hopeful I would be able to dive deeper into Figma and improve my Figma skills so that they would become second nature.

However, I ended up being a core team member who was client facing during the day and then data modeling and data engineering at night. I’d make prototypes of product features and new things–SOPs, training tutorials, sales engineering demos, business intelligence reports, designs, etc.–as all the requests came in. Again, this was the height of the pandemic, where we still didn’t know a lot about how it would infect others, and it still hurts to think about all of the people we lost. Instead of mocking up product designs, I went where the mission called me–which was understanding field team workflows, data engineering, front-end engineering and data science type of projects, Google Analytics tracking, and technical program management.

One day, I realized it had been a couple of years since I thought I would be working with Figma day in and day out. In that time, we were able to have some really talented Product Designers who any team would be lucky to have, and I felt personally frustrated that I couldn’t jump in and sub for them if needed, because I wasn’t where I hoped to be with Figma back when we started.

In terms of different departments, I also realized I was one of the only people who understood our product so intimately because a lot of our features exist since I made them for clients, and so I wanted to be able to help our Marketing Department with what they were missing: UX journey workflows and audience personas bridged with the technical product side.

It was amaaaazing when Figma beta’d and then launched FigJam. I made it a point to use it solo to braindump product ideas so that I would be always interacting with Figma in some capacity that could be shared to the larger Product team. As someone who would be a lone-ranger/wild west type of developer, I looooved that Figma had free plugins and features to export the code normally reserved for developer handoff.

Which brings me to something I made 2 years ago: A Demo Landing Page

I wanted an example of an industry-standard landing page for our marketing team. But I wanted to do it in Figma so that our Product team could also access and align the same ideas.

It was 2 years ago, so I wish I could remember which tutorial this was, but I remember finding it and being excited that a resource already existed to validate what I had been telling my colleagues. I wasted no time in making full use of Figma plugins to bring the landing page idea to life so that I could have a tangible proof of concept to show folks that we could use Figma for product marketing designs.

I think I made this demo landing page as a proof of concept for our product and marketing teams around 2022. Some of the plugins during this time were free, and I honestly would not be surprised if they now require some sort of license. But early Figma was a truly beautiful product for the kind of person whose only barrier was either time or their own determination in learning.

I remember wanting to emphasize having a clear call to action (CTA) and some social proofing in order to show folks we could adopt something similar. I realized that, for product marketing, I was the best positioned person to help us achieve that, and so I wanted to dive back into Figma for product marketing designs!

As I revisit my old Figma projects, I’m finding Figma for product marketing files that serve a snapshot in time during this period. I thought I would be kind of embarrassed at how some of these look, but I’m actually proud at my own growth because it shows how I was always driven to make sure I stay updated with what’s going on in the industry so I don’t fall behind. I hope this inspires and helps others!

Even though this landing page example is 2 years old, I think the layout of it still hits home:

  • Header/top of fold that communicates what people will gain from this
  • Some social proofing
  • Visual that captures your attention
  • Good CTA

In closing

I thought this was fun to share, and I hope it helps others see how you can start using Figma for free, no matter where your own product marketing or product designer journey starts!

Leave a Comment

Scroll to Top