Take a moment and fast-forward into the future.
You’ve landed a position at one of your dream jobs. There are smart people to collaborate with and more than enough talent to push the entire group forward. The company is established, so most of the everyday workflows are solved, yet there is still flexibility for creative solutions to shine through.
It sounds like a great place to work, right?
Honestly, the description above could belong to many companies that my students now work at. Whether designing for a tech company, a media empire, or a financial institution, they all had to master the same skill to thrive in their new environment.
Each had to adapt to design tools and styles that they did not choose.
When you take a job at Disney or Microsoft, you’re going to be tasked with creating solutions within an existing framework. Most established companies have established design guidelines or full-blown design systems for designers to work within. This is an excellent service to you as a designer because it allows you to focus on solving the unforeseen, significant problems that come along over time.
What could be more critical than selecting fonts or colors? Try designing a transparent way to update security settings or cancel a subscription. That’s just the tippy top of the essential design problems iceberg.
Let’s put aside our solo designer hats for a moment and approach this exercise with collaboration and cooperation in mind. The styles and components included below should aid you in your attempt to solve the problems presented.
Resources for review
| Article | Source/Author |
|---|---|
| Creating Styles with Figma | New Pragmatic |
| Creating Components with Figma | New Pragmatic |
| Prototyping with Figma | New Pragmatic |
| A pathway to components | New Pragmatic |
Exercise
The goal of this exercise is to create an interface with appropriate feedback using as few custom components as possible. This is possible through the utilization of an existing component library.
To complete the exercise, use this Figma file, which includes a variety of prebuilt components (accessible via the assets panel.) You’ll also need to create or modify some components along the way, the goal is to minimize the number of components you build.
You’ll also be creating a simple prototype, which means this exercise will require the creation of multiple pages as a user should be able to click through the content displayed.
Recipe search results
This interface will display the results of a search query for the word ‘chicken.’ The client’s goal is to display the information in a manner that encourages discovery via image display.
While you do not need to use all the information provided at the same time, you should use all the information for the item that is being featured. A collection of content has been gathered for this exercise and is linked below.
Use the content and images in this spreadsheet for the content of your prototype.
///
Once complete, update your Program Journal with links the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.