Lately I’ve been sharing my prototypes on Twitter (x, whatever) and enjoying it more than I expected. The feedback has been encouraging, and a lot of people have asked how I make the videos. I’m not a video professional, but I’ve worked out how to put these together with very little time or equipment.

Script

The script is the most crucial part. Start there, because it shapes your prototype and every other decision you’ll make.

Think about who’s watching and what they already know. Then work out the smallest story that gets your idea across.

Keep everything as straightforward as possible. You might change your mind during filming, and that’s fine. It’s happened to me plenty of times: something I was sure would look great fell apart on camera.

Before you start, watch as much as you can. I admire how Notion and Arc promote their features. Their teams are doing a fantastic job. Look at video ads on YouTube, Instagram Reels, and TikTok, and think about what makes them catchy. Content creators put a lot of thought into what holds attention, so there’s plenty to learn there. When you watch films, try to work out what moved you and why. What part of the plot made you cry or laugh?

If your script is good, prototyping and production won’t take much effort.

Look at this example from Notion, showing image cropping. Production was simple, but the story is elegant. Sometimes a good narrative is all you need, with no complicated production behind it.

At this stage I use Craft (where I work) to keep a short document with everything I need for the video. If there’s anything I have to remember while recording, I write it out and read it until it sticks.

Before moving on to prototyping and production, it helps to answer a few questions:

1. What feature or product am I promoting?
2. Do I need a Figma prototype, the real product, or something built in code?
3. Will I use a device recording or a screen recording?
4. Will I film this in one take, or stitch several clips together?
5. How long should it be? Somewhere around 15 to 25 seconds usually works.
6. What should be in the background?
7. Where will I film: at home or somewhere else?
8. Is there a reference or mood board I want to follow?

Answering these sets realistic expectations for the shoot, and it will change your prototype too.

Prototype

Make your prototype slightly exaggerated. Bump up the font size or weight on key elements. When you record on an iPhone or a MacBook, everything ends up looking smaller on camera than it does on the screen, so exaggerating keeps it readable.

When recording a MacBook, clean up the screen by hiding the menu bar and the dock, unless they’re part of the demo. It makes for a more focused shot.

Keep the flow simple and pointed at your story. The fewer steps the viewer has to follow, the longer they stay with you.

Think about how your colours sit in the context of the product. I usually prefer light mode because it stands out, but your idea might call for dark mode instead. And don’t hesitate to change the iPhone’s wallpaper to suit the prototype.

Finally, pay close attention to the text and content inside the prototype. Make sure it’s accurate, relevant, and aligned with the message you’re trying to land.

For this step I use Figma prototypes with Smart Animate for simple transitions, or Play when the animation gets more complex. Sometimes I use the real app, or a prototype in code, to show off a specific feature.

Production

This is my favourite part of the process. Almost any camera will give you a good-quality video, so use what suits your style, though I do have strong preferences of my own.

My setup is a Fujifilm X-T200 with a TTArtisan 35mm F/1.4 lens, on a Velbon CX-888 tripod. The tripod is cheap and still does everything I need.

That lens gives a look I haven’t found elsewhere, and the background blur is the reason I keep using it. I shoot on manual focus, which sounds fussy, but it’s the easiest way to control exactly what’s sharp.

I almost always shoot at home. My area is already set up, so I don’t have to think about the background, and I like adding small details that reinforce the idea. For a promo about reminders in Craft, I put a small clock in the background.

I’d suggest shooting indoors rather than out. Outdoor light is usually too bright for a phone or laptop screen to read on camera.

The promo video from Arc is an example. As much as I admire their work, the interface was barely visible against the bright background. Building the story around New York makes sense, but not at the cost of being able to see the screen. If I were filming a promo in London, I’d shoot from indoors with Tower Bridge through the window, so you get the landmark and the interface at once.

There are exceptions. Daylight shot a tablet outdoors and it worked beautifully, but their whole product is a screen you can read in sunlight, so the setting was the point.

A few notes on composition. The common mistake is trying to show everything and ending up focused on nothing. Remember, you’re not promoting the iPhone. You’re showing your app, so give it the frame. If the action happens at the bottom of the screen, keep your focus there and crop out the rest.

Keep it short. There’s no rule, but 15 to 25 seconds is usually about right. Adjust to fit the idea.

One more thing: find a hand position that looks natural. Awkward hands are very obvious on camera.

Editing

It might sound unbelievable, but I’m too lazy to edit my videos. I make small adjustments to composition and exposure, and that’s it. I find it easier to re-record until I get the shot than to spend hours editing one take. Get the moment right while filming and there’s not much left to fix afterwards.

These are just my notes on how I make my small videos. If you have tips of your own I’d love to hear them, and if you try any of this, please share what you get. Thank you!

You can reach out to me at muntyan.dana@gmail.com or on Twitter, and you can find the rest of me at danielamuntyan.com.

How to film an aesthetic demo of your prototype was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

This question matters to me because I work as a product designer at Craft Docs, an app for writing documents, keeping daily notes, and staying on top of tasks.

I have always considered the traditional notepad to be the main competitor of any document app. Despite everything software can do now, plenty of people still reach for paper. You may even have a notepad next to your laptop right now, whether it’s full of doodles or neatly organised notes you actually go back to.

So why are people still using notepads, and why might writing by hand be good for you?

Cognitive offloading

Reaching for a device is slower than it looks, especially when you just want to get something down. You unlock it, check the battery, find the app, create a new note, type, and save. If you need the information again, you go through most of that a second time.

A notepad has none of that. You open it and start writing. No Wi-Fi, no charging, no unlocking, no subscription. It’s a reliable, always-available place to put things, which is exactly what offloading a thought from your brain requires.

For anyone designing a notes app, that’s the bar. The platform’s native features are the way to get close to it: home screen and lock screen widgets cut the distance between having a thought and writing it down, and every step you remove from creating a new note makes the app more likely to be the thing someone reaches for.

Processing and conceptual learning

Imagine you start a note in your notepad. There are no restrictions. You can draw, write, or combine the two in any way you like. The only limit is your imagination, which is why writing in a notepad can be so enjoyable. No one tells you which font to use or where on the page to start.

Learning researchers suggest that writing by hand leads to better retention and understanding than typing does. Writing forces you to slow down and process what you’re hearing, which is what makes it stick. Typing lets the information run straight from your ears to your fingers without much thought in between.

Software can get closer to this than it used to. The new Apple Pencil lets you think and explore ideas in a way that feels closer to a pen than a keyboard, and digital whiteboards offer a blank canvas with fewer constraints than a structured document. When developers build tools like these into their platforms, people get some of the cognitive benefits of handwriting without giving up the convenience of software.

Conclusion

We haven’t reached the point where a paper notepad is obsolete, and as someone who builds the alternative, I think that’s worth sitting with rather than explaining away. Our software still isn’t as fast to reach or as free to write in as a blank page. Until it is, the notepad next to your laptop isn’t a holdover. It’s feedback.

References

• The Pen Is Mightier Than the Keyboard, Mueller & Oppenheimer
• Note-Taking: Low-Tech Is Often Best, Harvard Graduate School of Education
• Is Note-Taking More Effective with a Keyboard or a Pen?
• A cognitive offloading perspective on the modality effect

You can reach out to me at muntyan.dana@gmail.com or on Twitter, and you can find the rest of me at danielamuntyan.com.

Why do people still use notepads? was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

What are design tokens?

Design tokens store style values, such as colors and fonts, allowing them to be applied consistently across designs, code, tools, and platforms.

A token is a piece of UI information. You set visual parameters for a specific interface element by naming a token. For example, you can create a token for titles: set the necessary style parameters, and every title will look the same throughout the product.

Designers used to name styles according to the Material guide: Primary100. But a name like that only tells you what kind of color it is and how dark it is. By contrast, a design token’s name reflects the component or situation where the color is applied: control-button-regular.

You may ask: why bother with naming? The trouble starts when you need to create a new color theme. The GR8 Tech brand yellow works great in dark mode, but in light mode it needs to be replaced with a darker shade, or even solid black. Without tokens, that’s a long and inconvenient process, because every change has to be hardcoded.

We quickly realized that a system like that couldn’t be scaled or maintained. So we found a solution: design tokens.

Why are design tokens useful?

Design tokens solve several problems at once:

• Support for as many color themes as you want
• Rapid design change
• Product consistency

Design tokens are the only convenient solution if your product supports light and dark modes. You create one design and get two results: dark mode can be recolored to light mode with one click. Tokens can also replace fonts across a product, which helps especially if you use different font pairs on iOS and Android.

Tokens help you change the style of a product quickly. If you decide to use a different button shape, or recolor the entire product in new brand colors, tokens let you do it in a couple of clicks and save time for designers and developers.

Tokens work like a ready-made library of solutions. Designers don’t need to think about which shade of gray to use for regular text and which one for hints every time. Tokens already have all the answers in their names. This automates the design process and prevents mistakes.

Another significant advantage of tokens is consistency between design and code. Recoloring works the same way for designers and developers.

How we work with tokens at GR8 Tech

For all their advantages, design tokens have downsides too. At some point we ended up with too many tokens, and a system that large is hard to work with and maintain. We’re also constantly improving tokens and creating new ones. So how does the frontend know which ones have been updated?

The answer is automation. We use CI (Continuous Integration), a continuous release cycle. The CI tool checks the styles in Figma and translates them into code, so everything a designer does with styles reaches the developer in real time.

Without automatic delivery, there’s no point in using tokens, so designers shouldn’t skip this step. When you’re building a design system, the design has to match what’s happening in the code. Constantly checking tokens is what keeps the two in sync.

There are various third-party solutions for design implementation. Ours works like this:

1. The developer gives the Figma file link to a script that runs on CI.
2. The script downloads the file and extracts its contents: tokens and images.
3. CI builds packages for web, iOS, and Android, then uploads them to their respective repositories. At that point the tokens are ready to use in code.

We also have a Slack channel where notifications land whenever tokens change.

Other setups don’t work equally well across all three platforms. They require a massive Figma add-on that’s hard to maintain, and if a plugin crashes, the product can go down with it. That would cost us dearly.

So we use native methods instead. All our styles live in Figma. If a plugin crashes, nothing falls apart, the system just won’t be as convenient to use. And if Figma ships its own native solution, we can move to it quickly.

How we name design tokens

In Modulor, GR8 Tech’s design system, token names have three hierarchical levels.

1. Global color mode. Light mode, dark mode, or any other color mode.
2. Component group. At this level we group components. A group of backgrounds, for instance, includes every background we use throughout the product. There are also groups for controls, text styles, icons, text fields, dividers, and dynamic colors (color blocks and content).
3. State or unique style property (primary, hover, disabled).

This structure makes the design system easy to navigate and scale. For developers, the token name doubles as instructions: a color called “Title” obviously belongs on a heading.

Token Master: why we built our own token management plugin

Tokens answer a lot of questions, but they raise new ones. Say you have a yellow button. That yellow isn’t only used in buttons, it also shows up in icons, switchers, and text. Remember our naming approach: a token is created for each element, but they’re all the same color.

Color duplicates are fine as long as there aren’t too many. Imagine your brand color is green. If you rebrand tomorrow and switch to red, you’ll have to find and edit 45 green tokens by hand. Or take the VK design system, with its 150–200 styles. We knew we’d end up there soon too, so we solved the problem in advance.

That’s how Token Master was born: our Figma plugin for automating color tokens. It groups tokens that share the same HEX value. Need to recolor 45 green tokens to red? The plugin finds and recolors them in a couple of clicks.

Essentially, Token Master is a global token. In web development you can create a dependency between tokens: change the color in the global token, and it changes in every token that references it. Figma simply has no such function, so we “added” it ourselves.

Token Master is an incredible time-saver. You can create a new color theme in ten minutes. Without the plugin, that would take two days.

How we’ll develop Token Master further

We didn’t stop at color management. New features coming to Token Master soon:

• Switching between light and dark modes right in the plugin, so you don’t need to create separate designs for different color modes. Plugins with this feature already exist, but they require full edit access to all files. That doesn’t suit us: we can’t give every designer on the team style-editing access.
• Font and shadow management, which will work the same way as color management.

Team
Daniela Muntyan, Design Director
Vladislav Kozulya, Lead Software Engineer
Oleksandr Kharchuk, Frontend Developer

Design tokens: how we use and automate them at GR8 Tech was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

My career began in graphic design. I dreamed of designing books and typefaces. Before transitioning into product design, I worked at Hooga, where I was part of a project that won a Red Dot award (“Corruption Park”).

Eventually, I realized I could create more value for both businesses and users by working in product design.

When creating a book or a visual identity, designers usually aren’t measured by business metrics. They rarely ask themselves: how will their work affect the product’s profitability? Will this design improve the reader’s experience? That frustrated me.

I spent a year and a half preparing to transition into product design. During this time, I made my first simple websites on Tilda and Readymag and later began studying Webflow. I immersed myself in learning how websites are designed and built. I also read plenty of guides and articles to understand how a product designer works. Finally, after self-study, I decided to take courses to structure my knowledge.

I got my first job as a product designer at GR8 Tech. Later, I joined Genesis, where we developed mobile apps, games, and web projects. My responsibilities included:

• Conducting user research
• Designing and improving digital products
• Building and maintaining design systems
• Mentoring junior designers

What graphic design skills will come in handy?

Many of the skills you’ve already developed as a graphic designer will transfer directly to product design, such as:

• Drawing icons. You can create custom icons for apps and websites. Yes, you can always ask an illustrator or graphic designer for help, but it saves time if the product designer creates icons themselves.
• Creating a visual identity. You’ll need this experience to appeal to your audience when shaping the product’s visual style. I still create mood boards with a general style to find the right visual language.
• Book design. A solid grasp of layout helps you see how interfaces are structured.
• Animation. You’ll often design transitions between screens, icons, and components.

What skills do you need to acquire?

Don’t focus solely on how an interface looks. Focus on creating an experience that solves users’ problems. A product designer’s goal is to create experiences that benefit both users and the business. This is what product designers and movie directors have in common: they can create anything as long as it fits within the budget and delivers results. A movie needs to succeed at the box office.

You’ll need a core set of product design skills, no matter where you work.

Core hard skills include:

Understanding how to design products for iOS, Android, macOS, and the web, including each platform’s design conventions and technical constraints. Often, designers focus on a single platform, such as iOS or Android. However, it’s worth studying how all of them work because some interaction patterns can be unexpectedly helpful. For example, patterns from macOS may inspire solutions when designing iOS apps, and vice versa. This broader perspective often leads to better interface solutions.

Creating a product’s visual language, which means defining its style, applying it consistently, and scaling it as the product grows.

Testing your design solutions. To do this, you should know how to conduct user interviews, create basic prototypes in Figma, and work with qualitative research data. Only practice will help here. You can improve your skills by testing and analyzing existing apps.

Forming hypotheses based on user research and analytics. Research is often conducted by product managers or UX researchers. However, product designers should also be able to work with both qualitative and quantitative research data. It’s best to conduct user interviews yourself and develop hypotheses together with the team. You’ll learn this naturally on the job.

Working with Figma, Sketch, Adobe tools, and other design software, which requires a solid understanding of their core features. You can learn them through YouTube and other online resources. I’d recommend focusing on Figma because most companies have already switched to it or are in the process of doing so. Keep improving your skills, and don’t forget to explore new features and tutorials as they’re released.

Animating and building prototypes. The main tools are After Effects and Principle. It’s also important to understand how JSON animations work and how to prepare animations for development.

Managing design work, which means running projects and improving design processes within the team. This skill becomes especially important when working with multiple designers on large products.

Speaking English at an Intermediate level or above. Most professional articles, tutorials, and free courses are available in English, and many clients are English-speaking. Besides, if you’ve made it this far, you’re probably doing just fine with this skill.

Your responsibilities will vary depending on where you work, so it’s important to keep learning new skills and adapting to the needs of each project.

Courses, practice, and communication with developers and other designers will help you along the way. I recommend taking courses (Projector, Apollo, and KAMA are excellent Ukrainian schools) and reading articles from the Nielsen Norman Group. You’ll pick up many of these skills naturally through real-world experience.

Soft skills are just as important:

• Following the principles of nonviolent communication.
• Being open to learning from colleagues, understanding how analysts, product managers, and developers work, and valuing their expertise. Product designers collaborate with many different people throughout a project.
• Pitching and selling your ideas.
• Learning quickly.

How do you create your career development plan?

1. Start by reading as much as you can.

Don’t try to design anything at first. Spend a few weeks reading Medium, studying the Human Interface Guidelines and Material Design, and exploring articles by the Nielsen Norman Group. I’ve added links to some of my favorite resources at the end of this article.

It will be challenging at first, but the knowledge is worth it. Don’t worry if you don’t understand or remember everything. What matters is knowing where to find the information when you need it. I still revisit the Material Design guidelines from time to time to refresh my memory about specific features and patterns.

2. Once the guidelines start to make sense, move on to real interfaces.

Choose an app or website you like, take screenshots, and map out the user flow. This will show you how real products guide people from one screen to the next.

3. Next, recreate existing designs.

The more you practice, the better you’ll become. You don’t need to make an exact copy. Add your own ideas and improvements. Then, try creating the information architecture for your own project and designing wireframes.

4. Test your ideas with colleagues and friends.

This is one of the easiest ways to understand whether your design solution works or needs further refinement.

5. Explore multiple solutions.

On some projects, I created more than 200 variations of a single screen. There is rarely one perfect solution, and there’s almost always room for improvement.

6. Keep your files organized and follow the 8-pixel grid.

Developers will thank you later.

Where can you study?

Here are some Russian- and Ukrainian-language courses that I recommend.

UX Design at KAMA. I took this course myself, and I highly recommend it for beginners. You’ll learn the core skills needed to start your career as a product designer. While studying at KAMA, I landed my first job at one of the leading technology companies. I’m especially grateful to my curator, Aleksey Stiques, who believed in me from the very beginning.

Product Interface Design Professium at Projector. This course is designed for designers who already have some experience. It will help you structure your knowledge and gain a deeper understanding of the product design process.

UX / UI: user interface design by bangbangeducation. This is a comprehensive course that will help you organize and strengthen your existing knowledge. I recommend it for designers with some prior experience.

You can explore even more courses in my Design Library.

I also believe having a mentor is incredibly valuable. While it’s possible to learn everything on your own, a mentor can help you identify your strengths and weaknesses, provide feedback, and accelerate your growth.

What if you can’t take a course?

If taking a course isn’t an option, don’t worry. Reach out to other designers for advice. You can message me or any designer whose work you admire. Most designers are open to sharing their experience and are happy to give feedback.

I often reach out to designers from WeTransfer, Dropbox, and other product companies on Twitter. There are also many Ukrainian design communities on Telegram, such as R9 Research Community, kyivux, and Figma Chat, where you can ask questions and get advice.

How do you create your first portfolio?

There are many opinions on what makes a good portfolio, from writing detailed case studies to winning awards on Behance. However, over time, I’ve come to think that none of these things matter as much as people believe.

In my opinion, one of the best ways to showcase your work is by creating a profile on Figma Community and publishing your designs there. It gives potential employers a chance to explore your work and evaluate your skills.

You can also create a portfolio website with detailed case studies. Describing your projects thoroughly is important because it demonstrates your design thinking, not just the final visual outcome.

Your first portfolio project can be a redesign of an existing product. Find a real problem in a product you use and propose a better solution. Alternatively, you can offer your design services to charities or volunteer organizations on a pro bono basis.

How do you prepare for your first interview?

Save your CV as a PDF. Many companies still print resumes, so check that it looks good on an A4 page.

Don’t rate your Figma skills as a percentage. Instead, be honest about your experience, where you’ve worked, and what you can do. When I interviewed designers, I paid close attention to how candidates approached design problems, why they made certain decisions, and how many solutions they explored.

If you’re applying for a junior position, your soft skills play a key role. Employers pay close attention to whether you’re open to feedback and can clearly explain your design decisions. Some product companies use whiteboard interviews instead of take-home assignments. During a whiteboard interview, you’ll be given a UX design challenge and asked to come up with a solution on the spot while explaining your thinking. The goal isn’t to arrive at the perfect solution, but to demonstrate your design process and problem-solving skills.

Once you land your first job at a product company, ask plenty of questions and learn as much as you can from your teammates. Get to know the people you work with and understand each person’s role and responsibilities. Pay close attention to the requirements behind every task. Don’t just complete a Jira ticket; try to understand the user’s problem and solve it. Stay curious, be proactive, and pay attention to the small details.

Useful links

• Apple’s Human Interface Guidelines explain the design principles for iOS and macOS.
• Google’s Material Design guide covers the basic rules of design and is especially useful for Android.
• Nngroup publishes research on interface design patterns.
• Webframe.xyz is a collection of interface references and design patterns.
• My design checklist.

I also recommend using apps that will help you grow professionally. Adaptivity (iOS) and MaterialX — Android Material Design UI (Android) are apps for designers and developers to better understand interaction patterns.

Books

• Misbehaving: The Making of Behavioral Economics by Richard Thaler provides valuable insights into human decision-making.
• Ptolemy’s Map (Russian) by Herz Frank helps you understand how to evoke certain emotions in users.
• Design for the Real World: Human Ecology and Social Change by Victor Papanek explains complicated ideas in a way beginners can follow.
• Living with Complexity by Donald Norman explains why interfaces are complex and when this complexity can be useful.

You can reach out to me at muntyan.dana@gmail.com or on Twitter, and you can also find more of my work at danielamuntyan.com.

How I Became a Product Designer: My Transition from Graphic Design was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.