Template-Based Design: How to Create an Adaptive System to Support Your Brand

Contents:

• What is the value of an adaptive system and where do we use it?
• How we use an adaptive system in working with large brands?
• We talk about the stages of work using a fake case as an example.
• Without what you can't create a strong functional system.

Figma's adaptive system is an automated tool that significantly speeds up the mockup process. It maintains brand consistency, allowing designers to focus on the creative aspects of their work while minimizing routine tasks. Using an adaptive system promotes more efficient project management and improves the quality of final products.

Nastya Urusova, lead designer at maryco studio, shared her tools for developing effective systems. She shared her experience of using these tools in collaboration with corporate clients.

The lead designer at Maryco studio is responsible for creating unique and attractive design solutions. Their main task is to develop visual concepts that meet client requirements and modern trends. The specialist coordinates the work of the design team, ensuring high quality project execution. An important aspect of a lead designer's work is market analysis and understanding the needs of the target audience, which allows for the creation of effective and memorable designs. At Maryco Studio, lead designers also actively engage in client communication, which helps to better understand their wishes and expectations.

What is the value of an adaptive system and where do we use it?

Adaptive systems are widely used in the communication design of large companies, such as online cinemas, banks, and car-sharing services. Using such systems allows for the effective adaptation of existing advertising banners, especially when multiple size options are required or when layouts are standard. This significantly simplifies the development process and allows you to save time, improving the overall effectiveness of advertising campaigns.

The adaptive system (AS) gives the designer the opportunity to take a more structured approach to the development process. By analyzing a layout and breaking it down into its individual elements, a designer must consider the interaction of these components and their integration into a single functional mechanism. This allows for the creation of a more harmonious and effective user interface that will adapt to various devices and screens.

The development of automated systems (AS) promotes empathy and professional etiquette. When creating such systems, it is important to consider how they will be perceived and used by other designers or clients. Analyzing interactions with end users helps improve product quality and customer satisfaction.

The ability to think through design increases the value of a specialist, as they create not just a brand, but an effective workspace. This approach allows the client to reduce the time and cost of advertising adaptation, which brings significant benefits in the long term. Effective design becomes an integral part of a successful marketing strategy, contributing to business growth and increasing its competitiveness.

Adaptive design systems will undergo significant improvements in the future, and many functions will be automated using artificial intelligence. However, to effectively implement AI and quickly solve problems, it's important to begin mastering adaptive systems today. This will not only improve the quality of your designs but also increase the speed of your project work, a key aspect in today's digital world. By mastering adaptive design systems now, you can stay one step ahead, preparing for the changes that the future will bring.

How We Use a Responsive System with Major Brands

We collaborate with the Okko online cinema, creating banners for their studio and delivering the finished materials to the client. The advertising materials use a variety of key visuals, covering both films and TV series. However, thanks to the repeating brand zones present in each layout, Okko remains easily recognizable despite the diversity of content. This ensures brand consistency across all advertising platforms and helps strengthen its image in the eyes of the audience.

Automating processes using advertising systems significantly simplifies the management of daily advertising campaign launches. It not only optimizes costs but also minimizes the impact of human error on results. With the system configured correctly and clear template guidelines, the likelihood of errors is significantly reduced, allowing us to more effectively achieve our advertising goals. Using templates has significantly streamlined our workflow. Previously, assembling and editing processes were time-consuming, and completing a single task took significantly longer. By implementing the system in our support department, we've halved the time it takes to complete tasks. For example, when working with Okko, making edits such as replacing legals or CTAs took between 1 and 3 hours, depending on the complexity. Now, we can make adjustments in minutes or even seconds, significantly increasing our productivity and efficiency. Process automation allows the corporation to significantly reduce labor costs, resulting in financial savings. As a result, the company is able to reallocate its budget, which, for example, can lead to increased advertising investment. This not only contributes to increased business efficiency but also helps strengthen competitive positions in the market.

We'll describe the stages of work using a fake case as an example.

For a practical understanding of how this system works, let's consider a fictitious project that can arise in any studio.

A major carsharing brand contacted us with a request to launch a large-scale online advertising campaign. Five unique banners need to be created and adapted to 100 different sizes. The task is scheduled for completion within 2-3 business days. The client also warns that the photographs and texts have not yet been approved and are subject to change in the future.

The task is extensive and requires a prompt approach. You can begin collecting layouts manually, but this will lead to significant time expenditures on edits when text and images need to be replaced. Therefore, a more rational solution would be to develop an adaptive system for layouts in Figma. This approach will significantly speed up the editing process and ensure content is up-to-date.

The first and most important step in creating banners is a thorough review of the technical specifications. At this stage, we analyze the specific banners needed, their dimensions, and unique features. Depending on the project's requirements, we may need both standard banners and specialized options, such as branded website banners or banners with variable width and height. Understanding these requirements correctly is key to the successful implementation of graphic content.

Combining basic elements into components is an important step in simplifying the process of creating responsive designs. These components can include a logo, text blocks, including CTAs and legal notices, as well as photos or illustrations and additional graphics. This approach will significantly speed up the introduction of changes and adaptation of content in the future.

At this stage, the key point is to develop banners of various formats: vertical, horizontal and square. If necessary, narrower vertical and horizontal options should also be created. This approach will ensure convenience when working with various resize formats, providing clear guidelines for further work. Correctly designing banners of various sizes will help effectively adapt content to different platforms and improve interaction with the target audience.

The text you want to resize is missing. Please provide it, and I will help you with editing and SEO optimization.

Alignment in Figma using Auto Layout

Auto Layout in Figma is a powerful tool that allows you to effectively manage the arrangement of elements on a layout. With it, you can easily create responsive interfaces that automatically adjust to changes in content.

The Auto Layout feature allows you to set indents, alignment, and distribution of space between elements. This significantly simplifies the design process, especially when creating complex components and interfaces, as you can quickly resize and reorder elements without losing the integrity of the design.

Using Auto Layout in Figma improves designers' workflow, allowing them to focus on the creative side of a project rather than technical details. This feature allows you to easily create interactive prototypes and test different element arrangements, significantly improving the quality of the final product.

To optimize your work with Auto Layout, it's important to understand its capabilities and limitations. Proper use of this tool will help you create more intuitive and user-friendly interfaces. Auto Layout in Figma is the key to more efficient design and rapid adaptation to project changes.

Auto Layout is a powerful tool that allows you to efficiently and quickly create responsive interfaces. It allows you to easily lay out buttons, modules, and entire pages while ensuring neat placement of elements. Auto Layout uses rules that help automatically adjust the sizes and positions of elements based on their content and the size of the parent container. This significantly simplifies the development process, allowing designers and developers to focus on functionality and aesthetics instead of worrying about manual alignment and resizing. As a result, using Auto Layout helps create more flexible and responsive interfaces, which is critical in modern web design.

To simplify the resizing process, we recommend using Auto Layout. This allows you to effectively manage multiple key visual variations and quickly replace one banner with another. An important step at this stage is collecting components, which allows you to prepare elements with different image design options in advance. This significantly speeds up the process of replacing and editing content, which is especially important when working with advertising materials. Using a well-thought-out component structure facilitates the faster creation and adaptation of visual materials to different formats.

After agreeing on the layouts, we move on to creating their resizes. To improve efficiency, we first collect all the sizes for one key visual. We can format sizes with similar proportions as components, which significantly speeds up the process and minimizes time. This approach ensures consistency of visual elements and simplifies further work on the project.

In the previous step, we implemented the ability to transform one banner into another. Therefore, it makes sense to create all sizes for a single key visual. This will allow us to create a responsive system with templates, streamlining the development process and improving the visual perception of advertising materials on various devices.

Now we can quickly adapt the layout sizes to another case visual. To do this, we need to create a copy of the existing sizes. Then, using Multi-Edit, we select the desired elements and make the necessary changes. If there are any changes to the layout, they can also be made using Multi-Edit. This approach significantly simplifies the adaptation process and saves time when working with different visual concepts.

Once the work is completed, we carefully review each banner to ensure they meet all requirements. This process includes a thorough analysis of all key visuals we have prepared. After review, we hand over the finished materials to the client.

When the new brand presents its advertising campaign, you will already have a prepared system. In this case, you will only need to replace the photos and text in the master components. The master layouts and all necessary resizes will be updated automatically. In an ideal world, all you need to do is verify the layouts are correct and hand them over to the client. This will significantly simplify the work process and increase the efficiency of project implementation.

Read also:

Component libraries in Figma: purpose, advantages and principle of operation

Component libraries in Figma are an important tool for designers, allowing you to create, manage and use recurring elements in projects. These libraries streamline the design process, ensuring consistency and increasing team efficiency.

With component libraries, designers can easily use pre-built elements such as buttons, icons, fonts, and other interface elements. This significantly saves time by eliminating the need to create each element from scratch. Furthermore, any changes to the library are automatically updated across all projects, ensuring a consistent and up-to-date design.

Creating a component library in Figma starts with identifying the elements you want to reuse. These can then be saved in a separate library. Team members can then link this library to their projects, promoting collaboration and improving communication.

Using component libraries in Figma also helps maintain brand standards, as all designers have access to a single resource, helping maintain a consistent visual style. This is crucial for companies striving to create a recognizable and professional image.

In conclusion, component libraries in Figma are an indispensable tool for increasing productivity and design quality. They allow designers to focus on creative solutions rather than routine tasks, which ultimately contributes to the successful completion of projects.

Changing one button automatically updates all the others. Let's consider a key feature of Figma that is appreciated by web designers. This feature significantly simplifies the process of editing and maintaining a consistent style across a project. Using a button component, you can quickly make changes and ensure consistency across all pages of your design. This saves time and effort, and ensures a high-quality final product.

Without which you cannot create a strong, functional system

Crash testing is an important step in the system development process. Before starting a new task, it is recommended to test it to improve the user experience in the future. Create a copy of the file and imagine that you are working with it for the first time. Conduct stress testing: resize layouts and their individual components, reconfigure relationships, experiment with styles. Don't be afraid to make changes and explore elements you usually leave alone, even if this leads to failures. This approach will help identify potential problems and optimize the system for future use.

You will immediately understand what and where needs improvement: which aspects can be optimized, and which should be secured and relegated to the background.

It is not always advisable to leave key components visible, as they can be accidentally changed. Hiding or restricting access to important interface elements helps protect the integrity of the system and prevent unwanted changes. This is especially relevant in situations where stability and functionality must be maintained. Ensuring the security of components helps minimize risks and improve the overall efficiency of the system.

Creating clear instructions is an important step in the onboarding process. Detailed onboarding will help ensure a smooth transition and understanding of tasks. If you have multiple templates for different types of tasks, be sure to clarify the specifics of each. It's also important to have contingency plans in place to avoid unnecessary delays and ensure effective problem resolution. Backing up your Figma templates and keeping separate files of your original components can greatly simplify your workflow. Keeping changes private allows you to effectively manage your project and maintain its integrity. Using such backups will also prevent the loss of important data and speed up the editing process, while maintaining a high level of control over your design. Learn more about design by subscribing to our Telegram channel. Here you'll find relevant news, tips, and inspiration to help you create unique and effective design solutions. Join our community and stay up-to-date with the latest design trends. Product design resources provide valuable information for professionals in the field. They cover various aspects, including user research, prototyping, testing, and visual aesthetics. Understanding product design principles helps you create more effective and engaging solutions that meet user needs. It is important to learn about new trends and methods to stay competitive in the market. Use available resources to deepen your knowledge and improve your product design skills.

• Logical Errors in Interfaces
• Hypotheses in Product Design
• Key Marketing Concepts for Designers
• Skysmart's Lead Designer on What a Product Designer Does and How They Influence a Product