Is it possible to create a professional eBook with a design tool?

Recently I released the book that helps designers improve their UI designs with tactics. I composed it in Figma. Let me share my journey and some key insights. If you would like to create yours in the future, you will know how to move faster.

The idea

Through years of professional work, I always wanted to gather knowledge and techniques I use and share them with others. That is why I started the blog, then created educational Instagram profile, and some YouTube videos. However, my dream was to release the book.

Why the book? Because every writing or recording presents just a piece of information. Even if you create series of articles on your blog, it is still more convenient to grab the book and read it from A to Z.

So, when I decided to prepare the book with practical tactics for UI Design, I started my research on how to prepare it well.

I collected some other eBooks from designers, studied their composition, chapters, structure, even the size of the paper. I picked the elements that looked most promising and started preparing my own set.

The design system for a book

I love to prepare design systems that save time during work. So the first thing after the initial research was the question. Is it possible to create a design system for a book?

I experimented with a few methods and created a small but very convenient one (Memberse of UX Misfit Tools Ultimate Access may grab the eBook Design System Template for Free).

The first thing was to create styles. I needed just 3 types of headings to keep the structure simple. I added three paragraph styles (regular, bold, and the one for the list), caption, and some extra style for annotation.

I set some colors but finally used mostly the neutral ones (6 tones including black & white).

The next thing was to pick the paper size. The first choice was A4, but it looked very common. I wanted something more sophisticated to create the experience of holding a real professional guide (yeah, the book is digital, but still, there is something magical in traditional paper sizes). The final choice was the one from Traditional British formats called “Imperial”. These are the proportions of my book.

When the format was chosen, I started to create components.
To enhance working with chapters, sections, and paragraphs. I wanted to make spacing consistent.

 

 

That is why I prepared the whole set of vertical and horizontal padding components (invisible frames with specific sizes). These elements are used in components designed for headings, paragraphs, and so on.

The key of the book was to present practical tips visually, so the consistent components for illustrations were also necessary. I needed repeatable image sizes in specific proportions, so I added them to the components.

Most of the components were obviously gathered in Variants.

Writing the content

To be honest, I never considered writing long content directly in Figma. This is not the purpose of this design tool. That is why I decided to use some of the tools I use for writing my blog posts.

I love using a simple app called iAWriter. It helps me to focus on the content. No distractions, delightful minimalistic design. This is the place where I created lots of content.

However, there is a lot of rumor on Notion. I already use Notion to plan my work and as the database for my projects’ roadmap. This time I also decided to try writing there and moved chapters of the book.

Notion is a wonderful tool, very convenient. The main benefit of moving the book content there was better organization. I was able to create the book Page with links to each chapter. What’s more, on top of each chapter, I added a checklist to make sure I wrote every idea I wanted to include.

 

 

The only drawbacks I noticed are the following: Notion brings more distractions, while iAWriter helps to focus more on the content, so I continue to write there all my blog posts (also this one). The second one is that I have the impression that Notion has got some performance issues from time to time, but maybe it was connected with an unstable internet connection (I wrote a book in multiple places with my MacBook).

Creating illustrations

All guides need good illustrations. Presenting tactics to improve User Interface design required to prepare hundreds of them.

I wanted to prepare entire screens or their fragments to illustrate issues and show how to fix them. Because of NDA, I was not able to present real projects, but I recreated many of them in a similar environment.

 

 

For this purpose in the book project inside Figma, I added a new design document (based on Prime Design System Kit) to prepare all User Interfaces. I crafted every illustration pixel by pixel on my own to make sure it illustrates the problem and the solution.

 

Validation

To make sure that the book will represent more than good quality of knowledge but also a good reading experience, I had to perform some validation to improve the initial content.

To enhance English grammar in my articles, I use Grammarly. The tool is perfect for quality checks of all kinds of text. That is why this was also the first choice for Book validation.

Next, it was time to ask some people to read it and gather feedback. The purpose of the UI Design Tactics was to help improve design skills even for junior designers. That is why one of my proofreaders was a person not related to design. I wanted to be sure that the language was not too technical.

In the end, I also read the book a few times to find & fix some tiny issues.

 

 

Typesetting in Figma

Composing a book with a previously prepared design system in Figma was a real pleasure.

The most important thing that allowed me to create the book in Figma is that the tool has the feature to export frames to a single pdf. Thanks to this, you may generate all kinds of eBooks, Presentations, and other digital publications.

If you want to order frames correctly to export them into a single pdf, use “Z” pattern to place them. This means that frames placed on the right side to each other will be generated as the following pages in pdf. Then Figma will continue to attach the frames below and so on.

 

 

What is worth noticing, Figma export only the frames from a single page. It also does not export components, only frames.

 

What might be improved in Figma

While preparing the book is fast and convenient in the design tool. There are some drawbacks of using Figma.

The first is that I could not find a way to add page numbers automatically. I want to update the book with the next portion of tips in the future, so adding numbers manually may be frustrating.

Next, the size of the file. While I have seen many books that’s size is over 100 MB. I wanted my book to be below that number. I did not find any settings to optimize pdf in Figma, but the final book is around 70MB, so it was acceptable.

Finally, links inside the page. While you may add links to external sources like webpages in Figma. The book cannot link to the internal pages. I think this could be possible to add this feature right in Figma, but… for now, it has to be done with some external tools.

 

Summing up – Is it worth building a book in Figma?

TL;DR Yes. The right approach, the creation of a design system with necessary components, allows you to move forward fast without discovering and mastering various different tools. The final result feels high-quality (opinion of proofreaders). The book is convenient to read and well designed (opinion of proofreader and first readers).

The design system for the book I mentioned in the article is available for members of UX Misfit Tools Ultimate Access as one of the exclusive resources.

If you plan to create presentations or books in Figma, I hope you found some valuable tips here.

 

Thanks for reading.
Good luck!

 

By the way…

If you start a new project or would like to organize your UI Library in Figma — do not waste your time creating everything from scratch. Feel free to use the Prime — Design System Kit. It helps you design UI with the best Figma techniques — Component Properties, Variants, Auto Layout and more.
See Prime in action.

To make it easier there is a gift 🎁 - Use UXMISFIT10 offer code to get 10% Off.

 
You can also Create User Flows faster in Figma & Sketch — With SQUID you can create User Flows directly in your favorite design tool. You may style them to your project brand within a couple of clicks. Prepare all kind of diagrams in minutes. See how it works.