We often dive deep into design theory and spend hours on tutorials learning new skills. But I don’t think we focus enough on practical techniques that actually help us achieve the best results.

You can have all that design knowledge, but you still need a process that helps you stay creative, make those little decisions at every step, and find the best solution.

When I first started designing, I’d often stare at a blank page, unsure of where to begin. My usual approach was gradually building out the layout, adding detail after detail until I felt satisfied.

The problem? I wasted so much time chasing that “perfect” look, trying to make everything work right on the first attempt.

But great design doesn’t happen that way.

I discovered a different approach that transformed my process: designing fast and creating as many iterations as possible. It’s a simple technique but incredibly effective.

Here’s how it works…

Instead of obsessing over perfection from the start, I focus on moving quickly and creating multiple versions of a single element or section.

When you work fast, you tap into your intuition, letting your creativity flow. The goal isn’t to perfect each version, but to generate many options to explore.

Once you have several iterations in front of you, it’s much easier to compare and see what feels right.

Zoom out to get the bigger picture, then zoom in on the version that speaks to you. That’s the one you can refine and perfect.

This technique encourages experimentation and takes the pressure off. The more versions you create, the more ideas you generate, and the quicker you find that “just right” design.

I call it “speed designing.” If you want to give it a try, here are a couple of quick tips:

1. Master your tools: Be fast with your design software. You don’t need to know every feature, but get comfortable with shortcuts and ways to streamline your process.
2. Let go of perfection: At this stage, don’t worry about being perfect. Focus on quick mockups and fast decisions. Push yourself to try something new. In each iteration, find one problem in the current design and make sure the next version solves it.
3. Don’t overdo it: While it’s important to iterate, avoid going down the rabbit hole. Create just enough versions until something feels right. And sometimes, you might find that your first version was actually the best. That’s okay too.

So, next time you’re stuck staring at a blank screen, try working faster and see where your intuition leads you.

The post Design Through Fast Iterations appeared first on Rafal Tomal.

On one side, you’ve got designers who say skipping auto layout makes their work faster—they don’t have to get bogged down in the details, and it speeds up their process. On the other hand, some argue that auto layout is essential for efficiency, helping to maintain consistent spacing, reposition elements easily, and ensure everything is pixel-perfect.

Personally, I’ve found myself somewhere in the middle, and I wanted to share my thoughts on when it makes sense to use auto layout and when it might be better to skip it.

It really depends on a few key factors:

Size and Type of Project

Is it a small landing page or a comprehensive web app UI/UX? For complex projects like a web app, I can’t imagine working without auto layout. These screens can get intricate, and auto layout becomes crucial for both speed and maintenance.

But for a smaller project or a quick landing page, using auto layout might be overkill. You don’t need to put everything into auto layout—just use it where it makes sense. For example, you might use it for the main container to easily move sections around, but leave the internal content free so you can design faster.

Phase of the Project

When I’m in the concept phase, I skip auto layout entirely. Speed and iteration are more important at this stage than precision.

Once the concept is finalized and I’ve picked the best version, that’s when I go back and make it pixel-perfect, applying auto layout where necessary.

Client Requirements

If your client cares about the technical aspects, check whether they require pixel-perfect designs with auto layout, or if they prioritize speed and multiple iterations.

The key is to provide the most value to the client. If spending extra time on auto layout doesn’t add value, then it’s probably not worth it.

Collaboration Needs

Are you working with other designers or handing the project off to a team?

If there’s a development team that could benefit from your designs being in auto layout, it might be worth the extra effort.

Your Personal Workflow

Some designers, myself included, work faster with auto layout. I have a lot of starting layout templates already pre-designed, like those in DesignKit, which makes it easier to start with an auto layout structure in place and then build from there.

But if you find that auto layout slows you down, it’s okay to skip it, especially in the early stages.

Ultimately, it comes down to what works best for you and your project. I’ve found that striking a balance is key, and what’s right for one project might not be right for another.

I hope these thoughts help you make your own decision. At the end of the day, it’s all about finding what makes your workflow smoother and more enjoyable.

The post Auto Layout in Figma: to use or not to use? appeared first on Rafal Tomal.

That switch marked the beginning of an exciting career path for me, designing websites and themes that would later lead me to collaborate with ​Brian Gardner​ and the talented StudioPress team.

Together, we crafted some of the most beloved WordPress themes and contributed to the Genesis Framework, a cornerstone for developers relying on classic themes to this day.

As the WordPress theme market expanded, it began to feel overcrowded and complex. Themes overloaded with niche functionalities made it daunting to switch without losing significant parts of your site’s content or design.

The wave of page builders introduced a new level of complexity, distancing the user experience further from the core WordPress interface.

This shift towards overly complicated tools led me to seek simplicity elsewhere.

Exploring beyond WordPress

While many solutions like Webflow or Squarespace initially seemed promising, my excitement quickly turned to disappointment. Those who have worked with these tools will understand the challenges they present.

I began using Webflow for smaller websites and single landing pages, only to discover that it’s not as user-friendly as it appears.

Webflow operates in two modes: Editor and Designer. The Designer mode allows for extensive capabilities, but its complex interface is daunting, suited mainly for seasoned designers and developers.

This complexity makes it difficult for clients to manage their sites independently, often leading them to seek support for simple tasks despite having documentation and training.

On the other hand, the Editor mode simplifies things, reducing the interface complexity but limiting users to only editing text and images.

This restriction becomes a bottleneck for more substantial website updates. Unfortunately, Webflow (and many similar tools) lacks a balanced mode that combines flexibility in content management with user-friendly design options.

Then, I discovered the concept of full site editing in WordPress…

When I first encountered the new block editor in WordPress, like many, I found it buggy, limited, and not particularly intuitive.

However, as time passed, my perspective shifted dramatically. Improvements to the editor refreshed my love for WordPress, showcasing the editor’s potential if it continued to evolve positively.

While the editor isn’t flawless and bugs remain, the overall direction and enhancements to the interface have been encouraging.

Full Site Editing struck a perfect balance, offering both design control and the flexibility necessary for building websites, crafting new pages, and modifying content.

Initially, the block editor’s shortcomings tarnished its reputation, leading to skepticism among many users, who found adapting challenging. Yet, the strength of WordPress lies in its robust community, which I am proud to support and be a part of.

Despite it still being early days for Full Site Editing, I’m optimistic that more designers and developers will recognize its potential. In this spirit, ​Chris Hufnagel​ and I launched ​Rockbase​, our first block-based WordPress theme.

Our friends, ​Mike McAlister​ and ​Brian Gardner​, have long supported the WordPress block editor, contributing their themes to the community.

The emergence of competition doesn’t concern me; rather, I believe that increasing participation from designers will drive the WordPress ecosystem forward.

I’m also excited about ​Rich Tabor​ joining the Automattic team. His clear vision for enhancing the WordPress editor fills me with confidence that his influence will lead to significant improvements.

As website design has advanced, WordPress has also needed to evolve…

If you’ve been hesitant about the new block editor in WordPress, perhaps your last look was a few years back. I’d encourage you to revisit it and see the changes for yourself.

The full site editor aligns with the contemporary approach to web design, moving away from viewing websites as static, brochure-like pages.

Instead, websites are envisioned as dynamic design systems, and the modern WordPress theme embodies this system.

With the use of modules and blocks, you can construct any section you need, offering the ability to reuse, save, and even effortlessly transfer structures from one website to another.

This level of flexibility is unique to WordPress. The theme plays a crucial role in unifying these elements, ensuring consistent style control across your website, and providing a complete set of unique design patterns.

Got any questions or interested in seeing how it all works?

We’re hosting ​live office hours​ this Thursday, March 28, at 12PM ET. It’s the perfect opportunity to ask anything you want about the full site editor in WordPress or our Rockbase theme.

Want to give it a try?

And if you’re thinking about trying ​Rockbase​, there’s no better time than now!

We’re running a launch promotion only until March 31st. Buy Rockbase now and save 34%.

Learn More About Rockbase

The post Why I’m Excited About WordPress Again appeared first on Rafal Tomal.

But good news – the wait is over. I’m thrilled to introduce Rockbase to you!

Let me take you on a tour of what we’ve packed into this theme, and why I think you’re going to love it as much as we do.

Who is Rockbase For?

Our focus is on digital creators. Whether you’re writing a blog, hosting podcasts, running courses, sending out newsletters, or selling a single product, Rockbase is designed with you in mind.

​Rockbase is also perfect for all the service providers out there – designers, copywriters, coaches, and freelancers of all stripes. Our goal is to empower your creative process and help you showcase your services in the best light.

Plus, we haven’t forgotten about studios and agencies. Rockbase comes packed with tools like Figma files and templates for quick prototyping, testing different styles, and design tweaks. Everything you need in your client project workflow.

Why Rockbase and Why WordPress?

We’re big fans of where WordPress is headed with its full-site editing and block-based system. It’s the future of modern website building – modular, straightforward, and flexible.

With Rockbase, you start with our pre-designed patterns and then tweak them to fit your style. It’s easy to use, maintain, and fully customizable to make your site truly your own.

What’s included

1. WordPress Theme

​Rockbase is all about simplicity and speed. It’s a fast, lightweight theme that comes ready with pre-designed patterns for key sections like CTAs, social proof, pricing tables, heroes, features, and content.

We offer a variety of styles, each with its own color scheme and typography. Pick the one you like and customize it to make it uniquely yours.

Our aim is to utilize core WordPress blocks and functionality, making it super easy for you to switch from Rockbase to any other theme if needed.

2. Design files

The Figma design kit (see preview) includes all the patterns you’ll find in Rockbase, set up as components for easy use. With text and color styles, plus variables, you’re all set for advanced customizations and creating unique designs.

Also in Figma, templates that are perfect for crafting your own blog post images, product covers, and more, ensuring everything fits perfectly with your site’s look.

We’re also planning of expanding our collection of design assets, which you’ll be able to use freely on your website. Among these, a hand-drawn icon pack is already available.

3. Playbooks

Think of playbooks as mini-sites ready to go out of the box. They come complete with all pages and placeholder content, so you don’t have to start from scratch.

Just import a playbook content into WordPress and tweak it to suit your style. It’s a real time-saver, cutting down hours of work you’d spend doing it all yourself.

4. Community

We’ve set up everything on Circle, creating a small community space for you. Here, you’ll have direct access to ask questions, engage in discussions, see other people’s projects, and share your own. It’s a great way to get inspired, find support, and connect with fellow creators.

We’re just getting started

We’re just kicking things off! Our main goal was to get Rockbase into your hands as soon as possible, so you can start exploring and creating with it, but we’re far from done. We’re already working on new patterns, design assets, email templates, and more exciting updates to keep enhancing Rockbase.

Your early feedback is incredibly valuable to us. It helps us understand what you need, which directions to take Rockbase in, and what playbooks and features to develop next.

Want to give it a try?

We are offering a launch promotion now through March 31, 2024. You can save 34% if you join now.

The post Introducing Rockbase appeared first on Rafal Tomal.

In my best month, I soared high with earnings hitting over $95k. The next month, it’s a plunge into a $15k loss. Yeah, it’s a wild ride.

And here’s the thing – it’s completely normal. There are going to be amazing days and some not-so-great ones. You might even hit a rough patch that lasts weeks, months, or, brace yourself, an entire year.

But here’s what I learned: it’s crucial to zoom out and look at the bigger picture. Those down times? They’re not the end of your story. They’re just part of the journey. Often, there’s something incredible just around the corner, waiting for you.

All you need is the resilience to ride out the storm and the vision to see beyond the immediate hurdles.

So, let’s dive in and explore how to navigate these ups and downs, and most importantly, how to keep your eye on the big picture.

Don’t let a few bad clients discourage you

The beginnings of running a service business are, without a doubt, the most challenging part of the journey

In those early days, you’re likely to encounter more than your fair share of difficult clients, but they’re crucial for learning and growth.

But here’s the good news: it changes over time. As you grow, as your brand gets stronger, you start attracting better clients. The kind that align with your values and appreciate your work.

If you’re a designer just starting out, you might find yourself feeling discouraged after a few rough projects. It’s natural. Those initial gigs can be a real test – dealing with demanding clients, scope creep, maybe even payment issues.

But remember, these experiences don’t define your entire journey.

Don’t judge the entire experience of working with clients based on few bad projects. They are not always reflective of how things will be in the long run. Each client, each project is a learning opportunity, a step towards better clients and more rewarding projects.

So, hang in there. The beginning might be hard, but it’s setting the foundation for a more fulfilling path ahead.

My stoic approach

Think like a stoic: don’t get overly excited during the highs, and don’t plummet into despair during the lows. Being too swayed by either can throw you off your game.

Focus on what you have control over and how you react and the actions you take. It’s all about responding thoughtfully to whatever situation you’re in.

When times get tough, that’s your cue to double down on your efforts. Sometimes, you may even need to ramp it up tenfold. It’s all about perseverance and a willingness to push through the challenges.

But it’s not just about charging ahead blindly. It’s also about being flexible and open to change. If something isn’t working, don’t be afraid to pivot. This could mean tweaking your offerings, introducing a new service or product, or even adjusting your prices.

Staying stoic doesn’t mean being emotionless. It means maintaining a steady course despite the ups and downs, focusing on what you can control, making calculated decisions, and being ready to adapt when necessary.

Play the long game

This isn’t a sprint; it’s a marathon, one where patience and persistence pay off.

1. Building relationships: The core of any service business is the relationships you build. It’s not just about the current project or the immediate transaction. It’s about forging connections, partnerships, and networks that can last years. These relationships often become the backbone of your business, leading to repeat clients, referrals, and a solid reputation.
2. Being helpful and proactive: Always look for ways to be helpful to your clients, beyond what they’ve asked for. It’s about adding value wherever you can. Offer insights, suggest improvements, and be a problem solver. Being proactive in your approach shows clients that you’re invested in their success, not just in completing a task.

Remember, in a service business, every interaction, every project, every client relationship is an investment in the future of your business.

It’s about laying the groundwork for sustained growth, not just quick wins. So, keep your eyes on the horizon, build those relationships, be helpful, and stay proactive. The rewards of these efforts might not be immediate, but they are enduring.

Consider monthly retainers for income stability

If the unpredictable nature of your income feels like a never-ending rollercoaster, it might be time to consider offering monthly retainers.

Retainers can provide a more stable and predictable flow of income, smoothing out those financial peaks and valleys.

1. Stability over high rates: With retainers, you might offer a slightly lower hourly rate compared to one-off projects. However, the trade-off is worth it for the stability and consistency in income. It’s about ensuring a steady stream of work and payment, which can be a game-changer for your financial planning.
2. Diverse retainer services: Think about what services you can offer on a retainer basis. This could include design direction and support, marketing design, website optimization and maintenance, WordPress support, and more. The key is to find services that clients need on an ongoing basis.
3. Start small and adapt: Begin with lower retainer fees as you test the waters to see what works best for both you and your clients. Gradually, you can adjust your fees as you understand the value you provide and the market demand.
4. Plan for time off: One important aspect of retainers is managing client expectations, especially when you plan to take time off. Be transparent with your clients about your availability and ensure you have a plan in place for any work that might need attention during your absence.

Offering monthly retainers is about creating a win-win situation – your clients get the ongoing support they need, and you get a more predictable income. It’s a strategic move to buffer against the financial uncertainties that often come with running a service business.

Personal projects

Having a personal project on the side can be a game-changer, especially during those quieter periods between client work.

It’s about using your downtime productively, channeling your creativity into something uniquely yours.

Client work is great, but having a personal project gives you a sense of ownership and creative freedom. It’s an opportunity to build something from the ground up, on your terms. This could be anything that resonates with your passion and skills.

Personal projects aren’t just for fun; they can also become an additional revenue stream. Think about creating something that you can actively develop and sell. This could be a digital product, a tool, a course – anything that fills a gap in the market.

To give you an example, this approach led me to develop my own design tools. I started with DesignKit.us and QuickFrames.io, which is gradually evolving now into its own brand, UIshop.com.

These projects began as side ventures but have now become substantial parts of my business.

But now, I’m curious about your story. How do you handle the ups and downs in your service business?

What strategies have you found effective? Comment and share your experiences.

Looking forward to hearing your stories!

The post Balancing the Ups and Downs of Running a Service Business appeared first on Rafal Tomal.

Think of this file as your design springboard. You can use it as a starting point for your own creations. Adjust the colors, play around with typography, add more UI elements, or expand the color palette to suit your needs.

It’s designed to be flexible and adaptable to your unique style.

Why Use a Web Style Guide?

Let’s talk about why a web style guide is essential for any design project:

1. Reference for Developers: It acts as a fantastic reference point for developers, making the handoff smoother and clearer.
2. Coding Mindset: It encourages you to think more like a coder – the site is built on a stylesheet, where every text and color is linked to a specific style.
3. Unified Design: Following your style guide ensures that your design feels unified and cohesive.
4. UI Element States: It’s a great way to list all different states of UI elements for quick reference.
5. Experimentation: Test different color schemes and typography quickly and see what works best with the preview feature.

How It Works

Check out this quick video tutorial on how to edit the file and adjust your text and color styles. It’s super simple and I walk you through each step.

What’s Next

Once you get the hang of it, use this free web style guide to customize and adapt it to your own projects. And if you find yourself needing a more comprehensive web design system, don’t forget to visit DesignKit.us. It’s packed with resources to speed up your entire web design process.

The post FREE Figma Web Style Guide and Starter Templates appeared first on Rafal Tomal.

When I embarked on this journey, I made a conscious decision to measure success differently. For me, it’s not just about the numbers in the bank account. It’s more about how this venture fits into my life. Does it make me happy? Does it give me time to breathe and live a life outside of work? These were my benchmarks.

But, I won’t deny that there’s this niggling thought at the back of my mind – the potential for growth is massive. Yet, I’ve held back. I haven’t gone all out in hunting for clients, my marketing efforts have been, let’s say, ‘relaxed’, and our portfolio could do with more regular updates. There’s definitely room for improvement.

The biggest puzzle for me has been finding that sweet spot between simplicity and customization. In a business where each project is as unique as the client behind it, automation isn’t straightforward. Yet, it’s these creative, one-of-a-kind projects that fuel my passion. So, I’m trying to find the right mix of efficiency and creativity.

In this article, I will guide you through some of the key aspects of how I have run my design studio for the past 4 years. Although I only added more people to my team about 1.5 years ago, nothing has really changed in the way I operate it.

So, you may find some ideas here on how to apply it to your own solo business, as well as a small studio with employees or contractors. Please note that my business is constantly evolving and changing. I will delve deeper into each aspect in the future and share what I have learned as we progress.

Project Management

Let’s begin with project management. It’s relatively straightforward since we don’t have a large number of people and projects to oversee.

We run our entire project management using Notion, and I’ve tailored a system that’s just right for us. It’s still a work in progress, but I’m pretty proud of it. I’m even thinking of packaging this Notion template into a product so that you can use it too.

Here’s a peek into how it works:

Notion: We operate with two main databases in Notion. The first is for projects and the second for contacts. This contact database is like our mini CRM – it’s got everything from client details, email addresses, testimonials, to notes from past projects. It’s super handy for quick lookups or when I want to reconnect with past clients. Check out this free simple Notion template that I created a while ago as my starting point.

Projects and Client Dashboards: The project database links to our contacts. It’s split into two parts: one for our internal tasks and the other for client interactions. We keep our internal discussions separate from what the client sees. This way, our team can freely communicate and brainstorm, while the client dashboard focuses on main tasks and milestones, keeping client updates streamlined and focused.

Client Communication: Despite our well-laid client dashboard in Notion, many clients prefer good old email communication. When this happens, we adapt. We carry on the conversation over email and make sure to log key updates in Notion. This way, we maintain a clear track of project progress.

Weekly Updates Rule: We’ve established a rhythm of sending weekly updates to clients. Sure, I’m always quick to respond to any immediate queries or comments, but for bigger project updates, we stick to a weekly schedule. It helps in setting the right expectations and keeps everyone on the same page. We send project updates either through a short video walkthrough or a written message (email or Notion update). The video provides a visual overview of the update, while the text provides a detailed explanation of the update and outlines our upcoming tasks.

Finance Management

Now, let’s talk about how I handle finance management.

Google Sheet FTW: Our entire financial management revolves around a single Google sheet. It’s my big-picture tool for the business – tracking everything from expenses to cash flow. I’ve made this sheet available for you to download. You can read more about how it works and grab your copy here: Free Finance Template.

Yearly Budgeting: At the start of each year, I sit down to budget out all predictable expenses, including salaries for myself and my team. This gives us a clear target for our minimum yearly earnings. I also ensure there’s enough cushion in our bank account to cover lean periods.

Expenses: I use a single credit card for business-related expenses. It’s a lifesaver, especially when it comes to year-end reports. With American Express, categorizing expenses for tax purposes is a breeze.

Invoicing with Harvest: Harvest is our go-to tool for invoicing. Each invoice gets linked back to the respective item in our Google sheet. Yes, there’s a bit of manual work involved – creating invoices, tracking payments, updating the sheet – but it’s manageable. With our volume of projects, this takes me less than an hour a month.

Monthly Retainers: For our monthly retainers, invoices are automatically generated and sent. This means less manual work for us. Looking ahead, I’m excited about moving more towards productized services. This shift should help us automate our processes even further.

Services

We essentially offer two main types of services to our clients: custom projects and monthly retainers. Each has its unique structure and benefits.

Custom Projects: This is where we dive into fixed-cost, custom work. Our offerings range from branding and UI/UX design to development in Webflow and WordPress. The process typically starts with me working closely with the client to define the project scope, followed by sending a proposal and scheduling the project. For payment, we usually go with a 50% upfront model for smaller projects. For larger ones, we break it down into three or four payments. It’s a straightforward and clear approach both for us and the client.

Monthly Retainers: These are perfect for ongoing work without a specific project scope. Think along the lines of regular marketing design needs or landing page optimization. Retainers are often based on a set number of hours. However, with long-term clients, it becomes more about a mutual understanding and setting clear expectations rather than counting every hour. It’s a trust-based relationship where our focus is on delivering value.

Experimenting with Pricing Models: In the past, I’ve dabbled with value-based pricing, but we’ve found that fixed project costs are generally easier for both us and the clients to handle. Monthly retainers, while great for income predictability, can sometimes involve more routine, less creative tasks, which can be a bit mundane for the team and me.

Productized Services – The Next Experiment: This year, I’m planning to experiment more with productized services. The idea is to reduce time spent on project scoping, communication, proposal writing, and invoicing. With productized services, we’ll have a set scope and fixed price, which I believe could strike the perfect balance between maintaining our creativity and reducing administrative workload.

My role

My journey at 8px.studio has been an evolving one, especially in terms of my role within the team.

The Early Days – A One-Man Show: For the first three years, it was mostly just me. I was the designer, project manager, proposal writer, and the one sending out invoices. It was a lot, but it was also a period of immense learning and growth.

Streamlining Processes: Initially, the amount of administration was overwhelming, even for a one-person operation. Over time, I developed efficient processes, created a repository of snippets and templates, and streamlined my workflow. This helped reduce the time spent on repetitive tasks, allowing me to focus more on the creative aspects.

Optimization Over Outsourcing: Rather than outsourcing administrative tasks or hiring a manager, I chose to optimize processes to the max. This approach not only saved time but also kept me in full control of every aspect of the business. I enjoy this hands-on approach and the clarity it brings.

My Role Today – Designer and Creative Director: Nowadays, my role is a blend of being a designer for some projects and a creative director for others. I like to initiate the first 10% of a project, oversee and guide my team through the middle 80%, and then add my final touch in the last 10%. This final touch usually involves providing feedback and ensuring that we always deliver a polished product to the client.

Looking Ahead: What does the future hold for my role? I love designing and can’t imagine stepping away from it completely. However, I am increasingly comfortable delegating tasks and trusting my team. This delegation not only helps prevent burnout but also allows me to choose projects that I’m more passionate about and want to be deeply involved in.

Wrapping up

As we wrap up this deep dive into how 8px.studio operates, here’s the gist of our business model:

Focus on Great Service and Relationships: At the heart of our studio is a commitment to providing top-notch services and maintaining strong client relationships. We believe in having fun while being creative and, of course, ensuring the bills are paid.

Starting Simple is Key: For those pondering over starting their own design business, remember, it doesn’t have to be overly complex or groundbreaking to succeed. Begin with a straightforward approach, then optimize and experiment. I’ve tried various methods with our services and products, often finding that the best results come from the basics – fixed-cost projects and effective client communication.

Build a Model That Works for You: It’s crucial to remember that a model that works wonders for one might not suit another. The key is to start with something you understand well and then tailor it to fit your unique style and needs. It’s not about copying someone else’s success formula; it’s about creating your own.

In summary, 8px.studio thrives on a simple yet effective business model centered around excellent service, creativity, and adaptability. It’s about finding joy in what we do, keeping our clients happy, and continuously evolving our strategies to align with our goals and values.

The post How I Run My Design Studio appeared first on Rafal Tomal.

What’s great about Figma is that it’s not just limited to professional designers. Even if you don’t have a design background, you can still use Figma to create stunning visual content.

In fact, Figma can be used for a wide range of design projects, beyond just UI/UX. You can leverage its versatility to design presentations, create simple logos for your side projects, or design quick social media graphics and banner ads. The possibilities are endless!

So, I wanted to create a super simple guide for non-designers like content creators, copywriters, marketers, and others who want to be able to create quick graphics on their own without learning all the advanced Figma features.

At the end of this guide, you’ll know how to create your own file in Figma, set up the frame (the artboard for your image) at the size you need, add some text and images, and export it to PNG or JPG.

Let’s get started!

1. File structure.

Let’s assume that you’ve already created your first Figma account as this is a pretty simple step. You have logged in to your Figma account in your browser or installed the desktop app.

Here’s the easiest explanation of the Figma file structure:

If you have a free Figma account, you’re allowed to have one team project with up to 3 files inside. It may not seem like a lot, but you can have as many pages as you want in each file.

If you want to use Figma just to control your brand and graphics for your website, your file structure could look as this:

To get started, you need to create your first Figma design file. Simply click the “New” button and choose “Design File.”

2. Interface.

Now that you have created and opened your first file, let me quickly explain the editor’s interface:

1. Tabs – you can open multiple files in separate tabs. It works just like your browser. You can click on the “home” icon to go back to your projects.
2. Layers and Pages – here you can see a list of all pages inside your project file. If you don’t see your pages, click on “Page 1” in the top right corner of this panel to unfold the list of pages. Once you start creating elements, you’ll see it as a list of all “layers” below the pages.
3. Tools – these are the basic Figma tools. It’s best to learn keyboard shortcuts, so you never even need to use it, but we’ll get there later.
4. File name – double click on the name to change it. You can also click on the small arrow next to the name to see some extra options like duplicate, export, version history, etc.
5. Sharing – here you can see who’s looking at this file at this moment. If you see only your avatar, it means you’re the only person working on the file. You can click “Share” and share a URL to this file and let other people see it, but that’s a more advanced feature we’ll not be covering in this guide.
6. Properties – here you’ll see all properties for the selected design elements. I’ll explain this in the next steps. You don’t need to worry about “Prototype” and “Inspector” options in this panel – it’s only for designers and developers.

3. Frames.

Consider frames to be your individual design files. To best understand it, imagine that every PNG or JPG you use on your website or upload to social media sites is a separate frame in Figma.

You can have as many frames in each page as you want. Let’s create your first frame for an Instagram story. You can choose the Frame tool from the toolbar or press “F.” Then choose the “Social Media” tab in the right-hand panel and click “Instagram Story,”.

Now you’ll see a new Frame set at the 1080×1920 pixels size. It should look like this:

1. Frame – click on the frame name “Instagram story -1” to select it. You can click, hold it, and move the frame around the page. You can also press “CMD + D” (or “CTRL + D” on Windows) to duplicate the frame.
2. Layers – here you can see your new frame created. You can double click on its name to change it. Rename your frame to what you want the exported file to be named. When you export the frame, it’ll be named as “Instagram story – 1.png.”
3. Frame properties – All you really need to know here is the size W and H. If you want to resize the frame a custom size, change these values to whatever you need.
4. Fill – This is your frame background. You can click “change the hex code” here or click on the little white square to pick any color you want.

Go ahead and experiment with creating different sizes of frames and position them around the page; for example:

4. Text Layers.

Now, let’s add some first text layers to one of your frames. Click on the “Type” tool in the toolbar or press “T” on your keyboard. Then click anywhere inside the frame. Now you can start typing your text. Press “Enter” when you’re done and then you can modify text properties using the right-hand sidebar panel. See below:

1. Text layer – this is your text layer placed inside the frame. You can resize it to the desired size. Keep in mind that you don’t need to adjust the height of the text box and resize only the width, because the text wraps and the text box expands automatically. Click in the middle of the selected text and drag it to move the layer around the frame. You can also move the text outside the frame, but then it won’t be included when you export the frame.
2. Text Properties – here you can edit your text properties. Change your font family, font size, line height and alignment. Play around with these settings to see how it affects your text inside the frame.
3. Fill – this is your text color. Type in your hex code or click on the little black square to use the color picker. If you want to quickly pick a color from other elements in your design, you can press Control+C (or Alt + C on Windows) to turn on the color picker.
4. Layers – notice that all the new layers you create are now visible here inside the “Instagram story – 1” frame.

Play around with creating multiple text layers, move them around the frame, or set a different size, color, or weight. Try to create your first text-only design!

5. Images & shapes.

Our last step is to add some images and shapes into our frame. As everything in Figma, it’s all incredibly simple and intuitive. Let’s start with a simple rectangular shape first.

You can click the Rectangular icon in the toolbar or press “R”. Now that you have the tool selected, click and drag the shape inside your frame.

1. Shape size – width and height of your shape in pixels. You can manually change the size and keep the proportions when the chain icon is turned on.
   
2. Border radius – type in your number to change the border radius. Click the icon next to it to choose different radius for each corner.
   
3. Fill – click the little gray square to choose a different color from the color picker or type in its hex code. You can add more color layers on top of it using “+” icon and change the transparency of the color by editing “100%” (a quick way to create a color overlay on top of the image).
   
4. Stroke – click “+” icon to add a new stroke around your shape. From there you can control the color, width, and style.

You can use the shape as is or fill it with the image. To add an image, simply, drag and drop the image from your Finder window into the shape or copy image from the browser, select the shape, and paste it. Once you have your image in Figma, there are a couple of things you can do to adjust it to fit your design:

1. Crop the image – the fastest way to crop the image is simply by holding Command (or CTRL on Windows) and draging one of the corners of the image. You can also adjust the image inside the frame by clicking the small thumbnail under the Fill settings in the sidebar. From here you can now move the image inside around the frame, resize it, etc.
   
2. Adjust colors – from the same panel you can quickly adjust colors in your photo.
   
3. Add overlay – click the plus sign to add a solid color overlay on top of the image.

6. Export & sharing.

All right! Now that you know how to create frames and place text layers inside, let’s try to export them as actual graphic files that can be used on your website or uploaded to social media.

You’re going to be amazed at how simple it is with Figma.

First, select the frame that you want to export and then click the “+” icon next to Export in the right-hand sidebar panel. Then you can simply click the “Export Instagram story – 1” button to save the file on your hard drive.

1. Selected frame – You can select the frame by clicking on its name on the page or here in the layers panel. Make sure all of the layers that should be a part of this frame are actually inside the frame.
   
2. Export properties – Here you can customize the export properties. By default, the file will be exported as PNG. You can click on “PNG” to change it to a different format like JPG, SVG, PDF, etc. You can click the “+” icon again to add @2x size for your website. When you click “Export,” it’ll save two files on your hard drive.

Also, remember that Figma is a very collaborative tool, so you can actually share your designs with other before you export any files. There are a couple of ways how you can share it:

1. Right-click on any frame or page to copy the link.
2. Use the share button to invite others or copy the link to the entire page.

That’s all I have for you in the first part of this super simple guide to Figma for non-designers. You should be able now to create your own frames, use text layers, add images, and export it to actual files that can be used on the web.

Experiment more on your own. Try to move and copy text layers from one frame to another. You can even place frames inside other frames or export individual layers as its own images.

Keep in mind that this was just a simple guide aimed for non-designers who needed to quickly find their way around Figma. We barely scratched the surface here. There is so much more you can do in Figma.

If you’re ready to dive into more advanced topics, take a look at my Design Tools for Figma.

The post A Simple Guide to Figma for Non-Designers appeared first on Rafal Tomal.

Remember that to comprehend everything in these videos fully, you must know some Figma basics. Check out the official Figma YouTube channel because they have explained all the tools and functionality really well.

In this video tutorial, we’ll cover:

• Wireframeing subpages based on your home page template.
• Using content blocks.
• Using form input field components.
• Adding annotations and arrows to present your wireframes.

Looking for a tool to help you create your website wireframes? Get started today by downloading my DesignKit for Figma.

The post Wireframing with DesignKit in Figma – Part 2 appeared first on Rafal Tomal.

Wireframing is a crucial part of the web design process. It’s like a sketch that helps present the website design concept by showing the layout and structure of a website before the visuals are added.

Many web designers use popular wireframing tools like Balsamiq. Still, I found creating wireframes directly in Figma much more efficient, as I can easily convert them later into final design mockups. It also helps me keep everything under one roof, so my project is well-organized and consistent.

In DesignKit, with a ton of modules and sections already pre-designed and ready to use, the whole wireframing process is super easy.

In this video tutorial, we’ll cover:

• Adding new wireframe sections to the page.
• Switching section and individual module variants.
• Detaching sections from master components and customizing them.
• Converting desktop wireframes into mobile view.

If you’ve ever wanted to get started with creating your website wireframes, DesignKit is the perfect tool for you. It allows designers of all skill levels and experience levels to create professional-looking websites in just a few minutes without having any design or coding experience whatsoever.

It has all the essential elements you need for creating your site, including complete page sections, modules, color and text styles, grids, UI elements, and more.

Get started today by downloading my DesignKit for Figma!

The post Wireframing with DesignKit in Figma – Part 1 appeared first on Rafal Tomal.