Creating a downloadable numerology report PDF as an excuse to master Figma components and variants.
Over the past 20 years, I’ve had to migrate—more than a few times—to new design tools to stay relevant in my industry.
What I love about design today is that it no longer involves lugging around heavy, vinyl sticker-plastered tackle boxes and portfolio bags bursting with T-squares and inking-edge rulers, French curve sets and circle templates, Micron pens and Prismacolor markers, DoubleTack and Strathmore Bristol paper pads.
I no longer have to plan weekend getaways to dimly-lit computer labs to cozy up with QuarkXPress 5 or burn through my retail paycheck, splurging on the $300 Illustrator 3 and $500 Photoshop 8 CD ROMs I had been eyeing all semester.
A huge benefit of design today is that you don’t need much to create something that feels professional. Modern design tools have made it easier—and cheaper than ever—to hone your skills and build the confidence you need to ensure your ideas don’t get stalled in the traffic jam of technical challenges that lack of experience may not permit you to easily overtake.
That said, I’m now going to take you on a journey through a project I created when I just started learning product design, was new to Figma, and needed to know how to build a components-based design system quickly and effectively.
Idea Conception, Brand Design & Development, Copywriting, Book Design, Design Systems Thinking
2023
A few years ago, I was studying numerology and the hidden meaning of numbers. Some friends asked me to do numerological readings for them. Before I knew it, my fun and cool hobby was transformed into tedious hours of free time spent with a notebook and calculator, compiling name and birthday data, and composing my findings into wordy emails and Google Docs.
My head still hurts thinking about those early report-making days
The designer in me yearned to find ways to make the process easier and less time consuming. Instead of sending out boring emails, I imagined impressing my friends—who were also creatives—with a slick and totally branded numerology report design of my very own.
When I started learning Figma, I revisited this idea and spent a few days creating the numerology report design of my then dreams.
Looking back, was it a numerology report or a perfume advertisement? 🤷♀️
Now I have something better looking but it still takes a few hours to populate this template. Not ideal. Wanting to save time—while still ensuring accuracy—and ease the pain of repetition, I further streamlined the report’s visual design and made a new template.
The report formally known as FeelGood.
The red book is a simple numerology report that shares your core numbers and provides you with a basic Pythagorean Square reading.
The Partner Chart
The pink book—The Partner Chart—is comprised of two separate Pythagorean Square readings, one for you and one for your person. There’s also a third reading that combines both Pythagorean Squares to help you discover your strengths and weaknesses as a couple.
Looking at this, sometimes I feel like a genius. Other times, I feel like a madwoman.
In this new iteration, I introduced components and variants with the goal of minimizing the amount of instances I have to touch the working file to get a finished product.
Ok, enough lore. Let’s build a book together. I’ll show you how—with a day of front-loaded effort—I reduced subsequent production times down from a few hours to just 30ish minutes and made the whole process 1000x more enjoyable.
1. Get User Data
We need some data to start. I use random person and middle name generators to test template iterations and production speeds. These resources remove the burden of content creation and simulate someone asking me to generate a report for them.
Dang… Lois and Joseph look amazing for a couple in their 50s!
In this scenario, Lois has asked me to create a single numerology report for herself and a Partner Chart for her and her person, Joseph.
With this new template, both books share a common components page. All we need to do is enter Lois and Joseph’s information once…
I’m now in a designer’s paradise.
…and Lois and Joseph’s information populates throughout both book templates in pre-determined locations and text stylings. 😎
2. Table of Contents & Core Numbers
Now that we have the names in, we can build the beginning of Lois’ numerology report. At some point, I ditched the digital calculator and found an online resource that gets me core numbers without having to calculate them myself.
This pivot was a huge relief because it freed up a lot of the time I previously spent nervously triple checking my math, scared I had made some kind of error.
This isn’t cheating, right? RIGHT?!
I asked Grammarly to help me edit and refine content into shorter, more consumable blocks of copy with descriptive titles. Then, I created components and variants for each core number.
They look like a fleet of CVS receipts.
The core numbers section is completed within a few minutes. 😮💨
What a relief!
Now, all that is required to populate the core number section is selecting a placeholder copy block and choosing the appropriate replacement item from a dropdown menu.
3. Making Pythagorean Squares
Now to my favorite part: making Pythagorean Squares. I take the birthdays and copy/paste them to a new copy block. This block’s colors correspond to the colors used in The Partner Chart [ pink = the person I’m billing, blue = their partner ]. That way, I always know—at a glance—which set of numbers belongs to which party.
Note: 2 is the minimum number of people needed to generate a Partner Chart. Additionally, the connections do not need to be amorous. This project is not a socio-political commentary.
I carefully rearrange each birthday’s numbers into ascending order so it is easier to count individual number quantities. [ Although, as I’m proofreading this, I realize there might be a plugin for this step. ] The grid’s numbers are also connected to a dropdown menu.
After filling in the numbers, a square may signal an instance of an arrow or circle. I mouse over the arrows and circles section in the layers panel and let Figma’s purple element guide tell me the correct item to show without having to refer to an external reference.
I love Figma! 😭
Like I mentioned before, the Partner Pythagorean Square is a blend of both single Pythagorean Squares. Additionally, every element is a component. So, as arrows and circles for each single Pythagorean Square are completed, the Partner Pythagorean Square is simultaneously populated.
I use a dropdown menu to fill in the Partner Square’s numbers and the same Figma layer guide trick to show, in purple, any new arrows that might have been created. I also remove any previous circles that have been invalided in the merge. On the front end, template pages are automatically populated with their respective squares without me needing to leave the components area.
I made copies of the pages so you can see them all together.
4. Populating Pythagorean Evaluation Pages
For single readings, there is a section after the Pythagorean Square that goes into more granular detail about each number. I’m sure by now you know the drill…
Click a placeholder copy block and select the correct item from the dropdown menu. Done. Sometimes, I have to add a page or two to the template. I’ll show you how I deal with these changes later.
In the backend, this CVS receipt holds all the info I need.
On the frontend, we need to change the page from it’s default “absence of” placeholder to the correct item.
The page is quickly made accurate thanks to another handy dropdown menu.
There is also a section that goes into more granular detail about each arrow or circle. The process is pretty much the same. I’ll refer to the layers panel first, see what arrows or circles have been shown, and select the corresponding item from the dropdown menu.
Arrows and circles CVS receipt, I choose you.
Checking the lit up layers on the left, selecting the correct item from the dropdown menu on the right.
The Pythagorean Square section is now complete.
5. Partner Chart Evaluation Pages
The Partner Chart evaluation pages are similar to their single Pythagorean Square counterparts but they have something special added. Each page in this section contains a ratio bar that visually illustrates the strength of each individual’s contribution to the collective energy of a particular number.
For example: Lois and Joseph’s Partner Chart indicate a ‘presence of 3’. However, that ‘3’ energy is being contributed to the partnership by Joseph alone. Lois can read what ‘presence of 3’ means and gain some insights about Joseph. If desired, Lois may consider ways to match Joseph’s ‘3’ energy.
Perhaps Lois and Joseph plan a date to go to a museum art talk and visit a restaurant afterwards. They learn about some great art, eat some great food, and fill the evening with lively conversation.
Lois steps out of her comfort zone for a night and gets to explore the more fun, talkative aspect of her personality while Joseph gets to fulfill his natural need for deep, meaningful discourse. Make sense?
Points are awarded according to the quantity of a particular number. One number = half a square.
Lois and Joseph each contribute one ‘7’ to their Partner Chart. I would consider this equally matched energy. They can now decide if they want to work on increasing their ‘7’ energy as a couple.
Suggestion: Maybe Lois and Joseph start a book club and commit to reading one book a month together, sign up for a couples meditation retreat, or watch one title a week from The Criterion Collection.
The ratio bars make it possible to visualize each individual’s contribution to the collective strength of a particular number. I also think it makes the page much more useful, imho.
6. Finishing Touches & Exporting To PDF
We’ve completed populating Lois’ books. 🥳 Now, we just have a few finishing touches. One of the last steps is addressing page count. In this example, a few pages were added to the template to accommodate for more arrows and circles.
To make sure the final Table of Contents is correct, I rename all frames using an amazing plugin from the Figma community.
One mistake can compromise the integrity of the entire report. It’s nice to have a plugin that almost eliminates the risk of human error.
Now, I can simply scan the finished document and quickly edit the Table of Contents to ensure book navigation is accurate again.
There’s no dropdown menu for this… yet. I just key in the number when needed. It’s rare that I have to change it.
The next thing I do is add page numbers. The blank template doesn’t include them. This is to avoid more human error. I’ll use another amazing community plugin to add them.
The best part about this plugin is that the page numbers stay selected after they are generated. This allows for bulk element editing. I easily adjust the x/y axes to pre-determined values and change the new page number’s font to match the book’s branding.
A chorus line of page numbers. 👯♀️👯👯♂️
The final step is exporting to PDF. I love that you can export books straight to PDF from Figma. As long as the frames are lined up in a row and have sequential numbering, I can seamlessly rip it to PDF and send a finished book to the recipient without missing a beat.
Safe travels, little book! 🚀
Final Thoughts
At some point, I’d love to learn how to code my own core numbers calculator and maybe create a self-serve app or website version of this project.
Until then, you can download a copy of Lois and Joseph’s books by clicking the button below or by clicking the button at the top of this page. Thank you so much for your time and I hope you enjoyed our journey.
