Have you ever felt like you need more than just visual examples while creating a flow or component? Checking for visual references is one part of the pie, however, it doesn’t give you the backbone of how things should be designed. There are some excellent resources out there from design principles to checklists, design systems, and even more to elevate your understanding of certain topics before starting a new design project. These open-source websites or collections are put together by experienced product or UX designers.

I have collected some over time which I use often during my designing process. These hidden gems are well-kept and up-to-date sources that are maintained by individual efforts. You will be incredibly grateful after seeing these folks’ work of putting resources and knowledge together.

1. Checklist design

You will see how helpful a design checklist can be if you are starting to design a flow or component from scratch. It provides you with a guideline and a fundamental list that you need to consider in the design process. Just keep in mind that the lists here are not broad-scale and can not cover all use cases. Each list just gives you an understanding of which component, page, or flow needs what on a fundamental level.

The checklists for elements/components are very easy to grasp and follow. Don’t overlook the extra tips that are added to some of them. You can also find related articles or visual references from actual products attached on the right side. The coolest thing is that there are possible states visually displayed at the bottom of the page for certain components, so try not to miss that part as well! The steps of the flows are well-described with visual representations. Lastly, there are “topics” section where you can find checklists for topics ranging from responsiveness to UX writing.

Tip: This website doesn’t contain only checklists, but also interviews with experienced designers. Under the check-ins section, you can read about interesting stories and best design practices from different designers.

2.Design system checklist

What about having a checklist for the design system? Surely helpful! This is an open-source website that consists of best practices of design systems. Three experienced designers are bringing their knowledge together and pouring it into a checklist that you can follow to create a comprehensive and durable design system.

3. Design principles

I discovered this website after the design principles workshop we had at the company where I work for. I was so sad not to know about this collection beforehand. This website provides 195 examples from different companies or organizations’ design principles and values. You can be inspired by real-life examples, and bring those concepts into the discussion in your workplace. This collection enables the observation of the history and improvements of design principles. Ben Brignell who manages this website, holds also workshops for organizations or companies upon request. Because it is an open-source website, you can also contribute by adding your company’s design principles or values.

4. Heydesignsystems

If you are looking for a complete package of sources all about design systems, here is the right location. A full collection of articles about how to design, document, govern, develop, measure, and sell a design system. Additionally, you can find videos explaining design systems and real-life stories from real companies that can inspire you on your design system journey. So you don’t have to google things one by one anymore, everything related to the design system is clearly categorized and filled with the right sources.

5. Humaneby Design

Usually neglected and forgotten: designing ethically. If you feel like also you need to know more about principles for ethical design, this website is the right place to be on. The best practices and patterns are introduced under different principles, and supported with related further readings. These principles are fundamental to creating a meaningful relationship between people and technology and ensuring the humane touch on our designs.

6. Design systems

Design systems from different companies from all over the globe. From Uber to Shopify you can find over 50 design systems here listed. The coolest thing here is all design systems are linked to the documentation and to their Figma Kits. What you can do is basically, get a copy of the Figma file and start examining each component and structure. Such a great tool to learn from experienced design teams!

7. Growth design

This website has an incredibly creative way to communicate knowledge, using storytelling as a medium. Its focus is on mostly user psychology. With each case study from real-life examples, Dan and Louis explain user expectations, emotions, and reactions to certain experiences on real products. They put themselves in users’ shoes and explain how they feel while interacting with the products. They use very simple language, intentionally avoiding complex jargon to keep the focus on simply customers and their feelings.

Tip: You can subscribe for free to get their newest entertaining case studies in your inbox.

8. Component gallery

This website offers you an up-to-date repository of components based on examples from design systems. Let’s say you need to design an accordion. Instead of checking each design system from different products one by one and searching for accordion in each, you simply go to the related category on component.gallery and check the examples from there.

9. Laws of UX

This guide provides a great overview of the laws of UX. The goal is here to make complex psychology heuristics accessible to more designers. It achieves that with a clear description and representation of each law. More articles are added for further reading as well. Some posters and card decks are available on the website and are created to make all these concepts memorable for all designers.

10. Built for mars

Last but certainly not least, here is built for mars! Built for mars is actually an active design studio. But I am just focusing on the case studies part of their website. In this section, you will find analyses of real products or features and comparisons between competitors. Case studies are filled with page-to-page analysis of the real products, descriptions of referenced UX psychology concepts, and a cheat sheet as a takeaway at the end of the studies that you can take and apply to your projects.

Tip: There are a lot of case studies specifically focused on fintech. If you work in or are interested in products in finance, you will benefit from it even more.

A gratitude to all contributors and creators of these websites above.

Thank you for reading!

Check out the other lists of resources:

• Luisa Quinn’s big list of UX resources
• UI Inspiration: Patterns, Interactions and Animation Libraries
• Every UX/UI designer should know these 15 websites
• 30 UX Design Resources You Should Know About

10 excellent resources for UX designers was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to store UX/UI inspirations easily with Eagle — Volume 2

User-friendly features for organizing your design assets

Eagle is a great tool when it comes to storing and organizing your design assets. A couple of months ago I have published a story explaining the fundamental features and why it is very useful. You can find my first story about Eagle here. After then, the platform has been upgraded and I also explored more features myself. In this story, I will introduce more valuable sides of Eagle and how you can make the best of it.

Commenting on images or videos

Do you remember a time when you save design references and forget why you saved them in the first place? That happens to me a lot. Even though I file them with descriptive naming and tag them with logical keywords, still I might forget the initial idea of saving them. There is a great solution for this pain point in Eagle. You can simply use commenting feature. With this tool, you can mark an area on an image or even on a video and comment about anything.

Editing the saved references

Eagle brings speed by adding design references to your well-organized files. For instance — with the help of browser extensions — you can save a scrollable webpage with a click of a button. However, you might need to crop one specific area of a page not to distract yourself from the rest. Eagle makes it easy with a cropping feature. Additionally, the image can be rotated or flipped horizontally.

Saving videos and more assets

As I mentioned before, browser extensions are very handy and have multiple functions. With them, you can save a webpage or video bookmark into the Eagle. There you can preview the webpage or you can play the videos from Youtube or Vimeo. Furthermore, the extensions let you batch-save the images on a website.

Automate common tasks

Let’s say, you would like to label so many image assets with the same tag. However, obviously, you don’t want to select one by one and add the tag. Creating action will help you there.

Another example could be giving the same tag to the assets in one specific folder. With the auto-tagging feature, you define tags first and then Eagle labels all the assets in that folder with the same tags.

Better organization tactics

The most helpful feature that I found out later is the save-classify module. In the browser extensions, there is a “preferences” section and you can change the settings to “ask where to save when saving images”. This way you file your assets right away and don’t have to sort things out later on after the asset lands in the uncategorized folder. Before knowing this feature I was spending more time categorizing things afterward. This setting makes everything much faster!

The other thing that I explored later is the ability to place assets in multiple folders. One design reference could be related to different themes or ideas, so placing them in multiple folders is a very logical approach in some cases. However, sometimes you might avoid having duplicate items in Eagle. In this situation, there is a way to identify duplicate items automatically and delete them afterward.

Color filtering

There are various filtering options in Eagle. One of them is color. What I realized and found really useful is creating a color-filtered smart folder. A smart folder is a tool that filters every image in Eagle based on the criteria you choose, then compiles all matching images into a folder. You can set smart folders with different colors, and smart folder creates for you color-filtered galleries.

View options

There are several ways to zoom a design asset. In grid view, you can zoom in with a hover state or by clicking on the space bar. In the detailed view, you can set the view’s actual size or to different percentages of zoom.

Thank you for reading!

*Disclosure: This story contains affiliate links. If you choose to purchase Eagle after clicking a link, I may receive a commission at no extra cost to you.

✨ If you like this story, you might check my other stories about design tools:

• How to store UX/UI inspirations easily with Eagle
• Figma widgets for collaboration

As a UX designer, I am working at a remote-first company for a half year now and originated some habits which keep me motivated all along in my remote journey. After adopting them to my day-to-day work life, I saw an immediate increase in my motivation. I strongly believe that these habits are easy to integrate into your work routine and they will change your remote work for good.

Disclaimer: I am just sharing my habits according to my experiences. I am not a psychologist and don’t have any scientific proof showing the effectiveness of these habits on your motivation level. But these work for me and hopefully will work for you as well.

1. Keep your desk clean

A clean desk represents a clear mind. A neat desk will reduce the stress level. You will directly start your work focused because in a tidy, clean desk there is no distraction whatsoever. “The more clutter you can see, the more easily you’ll find yourself distracted” says Laura Vrcek from Headspace in her article. I couldn’t agree more! I make usually my desk tidy at the end of a workday to create a more attractive place for the next day. Besides, I realized how negatively affects me if I have a mess in the room where I am working. Not only my desk but also I try to keep my working room as tidy as possible.

2. Put your phone away!

This is so self-explanatory. If you use your phone for work purposes, of course, this tip is not for you. I communicate with my team through different mediums online, so I don’t need to keep my phone nearby. I realized whenever my phone is on my desk, I cannot stop myself from looking at it. Even though there is no urgent message to check. This distracts me a lot during the day. Two things that I am doing to overcome this: First I turn on focus mode on my phone, and then put it somewhere where I can not reach from my desk. This helps me a lot to stay focused during working hours.

3. Plan your day

Whenever I have a clear roadmap and detailed to-do list, I become more determined to accomplish all the tasks. That keeps me on the road, without being lost in different responsibilities. A clear plan for your day clears your mind and motivates you a lot. It does not have to be a very detailed to-do list, but at least you need a framework to follow to keep yourself motivated during the day.

4. Change your position frequently

This will not only boost your motivation but also prevents you from any back problem you might have by sitting all day long. I bought a height-adjustable desk and it was the best decision ever. Now I frequently stand up during the day. Not only do I feel active, but also feel more engaged with the work. Sitting down all day long was distracting me a lot, that’s why I had to have more breaks to keep my physical balance. Therefore if you have a proper desk to work by standing up, don’t forget to do it frequently. I especially stand up during my meetings. You can also set alarms or timeframes for sitting down and standing up not to forget. If you don’t have such a desk, then the solution would be having more breaks to grab water, coffee, etc., to create reasons to stand up.

5. Take breaks!

It does not matter, how much you love your job, you need to take breaks from it frequently to stay bound. It is so obvious how much having breaks can reduce your stress level or increase your productivity. There are times during the work that I feel stuck or less creative. In those moments my father always told me to take a break, go for a walk, and freshen my mind and when I am back, I would be filled with new fresh ideas. I benefitted from this routine very much to keep my motivation and focus on the top. Don’t feel like falling behind if you are taking multiple breaks during the day. Opposite, if you don’t take time for yourself and relax your mind, it can end up being burn-out. I believe that this habit guarantees success in the long term.

6. Change your workspace occasionally

My main working space is at home and I had to change my place for a couple of days because for a random reason. Then I realized how much my motivation increased. I was more engaged with the work and even felt more excited. I don’t know if this applies to everybody, but if you feel a little distracted or less motivated, changing your workplace might help as it helped me. So far I don’t have a planned schedule where I am working. But occasionally, whenever I feel like it, I change my workspace. However, I believe this solution is not for the long term. You can go to a cafe and work from anywhere else for a day or a couple of days. Unless you have the same comfortable set-up as you have at your main workplace, you can not work from these different places for a long time. So you should see this one as a temporary and once-in-a-while activity to bring your motivation back.

7. Stay present in the team

Working alone may kill motivation. We are social beings and we need to see people in order to feel more alive. To prevent not feeling alone, or left behind, the only solution is to be proactive in the team. Whenever you have questions or ideas to share, you shouldn’t hesitate. In order to keep yourself attached to your team, you should book frequent sessions with them. The other way to stay active is to keep yourself online in your communication channels. Being responsive to your colleagues is very valuable to stay connected with them. Additionally, meeting with colleagues in person is so helpful to break the ice. After you meet them in person, you feel more like a part of the team. If you haven’t had that chance you might consider arranging a meet-up with them.

8. Stop working when you should

Set your boundaries between your work and private life clearly. Having your workplace at home does not mean you should work as long as you can. This leads you to again very unhealthy relationship with your work and leads you to burnout in the end. You would be pulled away from the work so fast and it will not easy to gain your motivation back. Before burning the bridges, just be conscious about your working hours and don’t exceed them if you don’t have to.

9. Don’t forget to socialize

This is the most important point to keep your sanity during remote work. As a social person, after a couple of months, I was missing socializing with my colleagues so much. It started to affect my work too. To overcome this feeling, I see my friends and go out with them more often than before. I start meeting with friends at lunchtime too. Changing the scenery and the conversation helps clear your mind. After that, your motivation level is higher and ready for the next challenge at work.

10. Keep your habits

Pretty straightforward: keeping the habits is the key to long-term success. First practice and be aware of what is working for you and what is not. After determining the right habits, you need to make them part of your routine. Otherwise, you will not get ongoing success.

Final thoughts

I listed down the useful habits for motivation at remote work and explained the rationale behind them. These are what I have noticed so far and have been created organically over time. I still believe working remotely keeps our work and life balanced and truly believe the way of working will be arranged around remote possibilities in even more companies. And more people are going to start working remotely very soon. Being aware of this kind of motivation booster will bring us ahead of the game. Probably there are more tactics for working remotely to become your more successful self. Do you have any other practice or routine?

Stay motivated!

Thanks for reading!

Figma is the most collaborative interface tool I have ever used as a UX designer. It is improving this aspect in each update release. In June with the latest update, they announced the widgets which bring the collaboration to another level. Widgets are interactive tools and are visible to everyone using the file, unlike plugins. Several widgets can also be used simultaneously in the same file, adding flexibility to Figma. These widgets are built by the community and every day some new ones will be added to the widget list. I have used and tried some of them so far, and want to show how these tools can elevate collaboration in your projects.

I have categorized the Figma widgets according to various collaboration aspects in product design. I think these concepts are very fundamental to building functioning communication across teams, collecting feedback from stakeholders, and even sometimes having fun together.

Documenting well

Documenting is the key factor when it comes to communication among team members. Designers need to find an effective way to document the status of the designs to inform the rest of the team better. I listed the best available widgets that you can use for documentation.

64 statuses

This widget helps you to mark the statuses of the frames with color coding. Just two steps; selecting the frame or multiple frames that you want to set the status of and then clicking the status from the widget. However, you can not expand the status option you can choose from. You can neither edit nor add a new status. That makes the workflow a little limited. Still, these six default statuses can help you to communicate with other team members if you want to keep things basic.

One other thought is that since the 64 statuses gives color to the borders of the frame, it could interfere with the colors and styling of the UI elements. A workaround would be hiding the strokes from the properties panel when you don’t want to see the status. It is not the best option though, while you can forget to take the status back and the information could be lost.

Approved

If you want to go with a more basic approach, just show the team if the designs are approved, rejected, pending, or in revision, you can use the Approved label widget. Basically, you click on the widget until you find the right status for the designs. You need to place the widget next to the frames to inform the team better and copy as much as you need. This widget has a feature to add comments next to the status, which is very handy. There are also four size options, from small to extra large to choose from. You can mark the most important message with a bigger size to navigate the team’s attention to the necessary parts in the designs.

Sticky notes

For documenting designs, showing statuses may not be enough at times. You might need to give more detailed information to the rest of the team. Or you would like to write your design idea or decision out right next to the frames. In those times, sticky notes would be your go-to tool. I have chosen two different widgets for that.

Sticky note by Gabriele Malaspina

This widget lets you choose the color of the sticky note among ten color options. You can manually create a legend to introduce the meaning of the colors to the team and define the color coding for different purposes such as; design ideas, decisions, or discussions. In addition, there are five other size options. You can use these sizes to prioritize notes and organize the file better.

Moreover, it is very handy to be able to show the author of the notes. This way, for instance, you will understand with whom to talk about a design idea. Sticky notes can have a fixed height or hug the content. However, you can not define the fixed height by yourself, which can get a bit cumbersome. But overall it is a very useful tool that I can recommend.

Sticky note by Nitish Khagwal

This sticky note widget is pretty similar to the previous one. This one has only eight color options and no size differences. Other than that, it works exactly the same.

Combining widgets: 64 status + sticky notes

The cool thing about widgets is that you can use them in the same file at the same time. This gives us the flexibility to combine functionalities in different scenarios. What I have realized is that you can choose a similar color for your sticky notes as a status widget and you can note things related to the status change in your designs.

Table

Documentation in your workflow does not have to be necessarily in free text form, you might need table form as well. For that, there is a Table widget to build tables in Figma files. The table widget supports only text or digit inputs without math functions and calculations. An external table can be imported, or the table can be exported as CSV. To differentiate different tables in the file, colors can be applied or titles can be added. As in a usual table, you can add columns, and rows on any side you want and clear all inputs in the table with a click of a button.

Navigate

The Navigate widget, as you catch from the name, helps you navigate through the project. You create buttons with a specific title and choose the destination. After clicking a “navigate” button, it will fly you over to the aimed destination. What you need to pay attention to is placing buttons strategically. This way everyone in the team can navigate smoothly through design boards.

lil todo

It is sooooo easy!! Just add a to-do list to the Figma file. You can click the checkmark as you’re done with them, and it feels good!

Communicating in voice

Voice memo

This one helps a lot, in case you have to answer one of the colleagues’ questions with a very long text. Instead of writing, you can simply record a voice memo. You can add a title to each memo so that you can organize your ideas better.

Voting designs

As designers, we usually come up with various design ideas and want to discuss them with the team. Generally what we need is to vote on design variants with the stakeholders. What I use with my colleagues is very often commenting tool in Figma. However, because we add comments for other purposes as well, it might be confused with an idea, thought, question, or vote. So at this point, widgets are here to help.

Simple Vote

Just simply choose the frames you want to vote for. Then think about which type of voting to select. Do you want to get the votes anonymously in a fully unbiased way, or would you like to show who voted, or even do you prefer to collect votes first and reveal them when you are ready? All these ways are possible here! It is very convenient and makes voting even more fun.

Poll

If you have a question in mind to ask the team colleagues and they are very related to the designs in Figma, then create a poll right next to the frames. Get direct feedback from your team easily and make easy decisions together.

Ice breakers

If you just started working in a new environment or you are working remotely, you might need some ice-breaking moments while working in Figma together. Widgets solve this problem too and bring so much fun into the project files. Some of them are games that you can play together or some of them help you to communicate your emotions in a fun way possible. They are easy to use and very straightforward. I simply listed the most fun widgets that I liked below. Keep up the fun!

1. Emoji
2. Phone Booth
3. Giphy Stickers
4. Tic Tac Toe
5. Rock Paper Scissors

If you know other Figma widgets which improve collaboration among design teams, please write in the comments below.

Thanks for reading!

You can also check these articles from other authors who also talk about useful figma widgets:

• What are Figma widgets, and why are they useful?
• Figma just got (even) brighter — with widgets
• FigJam’s Amazing Widgets You and Your Team Will Love!

Figma widgets for collaboration was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

These days so many solutions are occurring for this kind of problem. One of them is Eagle, which I learned from a senior colleague. I would love to give some insides about Eagle for designers who are seeking a good organizer tool.

Let’s have a look at what cool things I do with Eagle, and you can, as well.

Capture ideas easily with a browser extension

Searching for inspiration online is a very fundamental activity for designers. Almost every day we need to do research for design references. One of my daily challenges was taking screenshots of the ideas individually and storing them in a local file in a structured way. Keeping these files structured is always very hard and after some point, I started to neglect them. Because this is kind of a time-consuming activity, my downloads file was a mess after all, and I needed to invest extra time to organize them afterward.

What I like about Eagle is that this tool makes everything easier, especially with browser extensions. After you find a good example and if you want this idea not to disappear, you can simply choose a capturing option from the extension. You can either capture the area of a webpage, just the visible part of the page, or even the full page. Especially capturing the full-page feature is very handy that helps you to capture all pages from the top to the bottom without using any tool to merge the parts of the page. And the coolest part of the process is that Eagle saves automatically to your Eagle library, and from there you can drag the image to any related folder.

Other capturing options

Capturing from the browser is just one option for saving reference images in Eagle. You can also take screenshots from desktop apps yourself and drag the images into Eagle to store there. Additionally, you can drag images from your local file that you have saved before to the Eagle library. This way you can store them in Eagle library too.

Categorize ideas

Categorizing the images makes everything easier on Eagle. You can simply categorize references by folders or by tags. If you choose to store things under folders, you should choose a descriptive name for your folder, and also you can select different colors or icons for each folder to recognize things much faster.

One of the coolest features here is “smart folders”. After defining a set of rules of your choice, Eagle will automate things. Whenever an image is saved, that suits to that particular set of rules of a folder, Eagle will drag the image and store it under this category automatically. This makes everything super easy and fast. The only thing you should do here is just to capture images and let Eagle handle the rest.

Find references easily by filtering options

Let’s say that you found a really good reference for your project, and then you captured it and saved it for later. Of course, after a while, you can simply forget where you saved it. Even though you label folders logically, after you have so many folders in your library, finding a proper reference can get harder and harder over time. To solve this problem, Eagle has broad filtering options. You can simply filter references even by their color palette. I generally filter things by tags, but you have plenty of options you can choose from. You can simply create a set of rules to filter them to find a very specific one.

Ratings

The references you find are not always the best ones. However, you might think that these are still worth keeping for some inspiration. Or you found a really great example for your project and you want that one particularly more prominent over the other ones in your folder. In this case, you can actually give them ratings to distinguish them from one another. This helps you filter easily and quickly.

Get inspired by the community

There is a community section where you can get inspired in Eagle. There are also free design resources, and materials ready to use. In addition, the community includes a comprehensive list of design websites to search for more design inspiration on the web. It shares tons of design tools, and websites for color, stock images, icons, mockups, and many more. If you want to inspire with your designs or let them know about a new cool website that inspires others, you can simply share with the community in Eagle. Personally, I haven’t used that section yet, but I feel that it has so much potential for getting inspired and inspiring people.

Transfer libraries between computers

Each inspiration you put into Eagle will be stored in a “library”. You can have multiple libraries and merge them anytime. The library could be saved as a local file on your PC or in a cloud to have it sync on multiple devices. One cool thing is that, even though you saved everything in a local file, you can also transfer this library to another computer and then reload it into your Eagle. That is very convenient if you don’t have cloud storage.

Conclusion

These are the features that might help you as much as it does to me. It is very helpful to capture reference images from any part of the website or app easily. It provides easy and fast organization tools, that will save your time and energy. After using a couple of months, I realized that I enjoy exploring new ideas and storing them for later more than ever. I focused more on finding the references rather than storing or organizing them.

Do you know any other cool feature of Eagle that I haven’t explored myself yet? If yes, please leave it in the comments below. And if you know other useful tools for storing inspiration and so on, as Eagle does, or even better, please recommend them as well.

Thank you for reading!

*Disclosure: This story contains affiliate links. If you choose to purchase Eagle after clicking a link, I may receive a commission at no extra cost to you.