👋 Welcome to Biscuit Design Challenge Season #2!

It has been some time since the release of Auto-layout version 3, and I am sure you all are pretty familiar with it and want to try out its limits.

Well, today, I have four practical scenarios for you to tackle. All of which are frequent use cases from my personal experience. Each challenge has specific criteria you need to meet to succeed. Beyond that, you can design them however you want. There is also a video example for each challenge showcasing my best implementation for them so far, but yours can be utterly different as long as it solves the same problem.

These challenges are meant to improve your Figma skills, learn from other lovely Figmates and grow together as a community. No code or plugin, or external software is required for any of these challenges.

How to participate?

Please respond with a video recording of your best practices to each challenge; they can be incremental as you will get more inspiration the more you try, which results in better implementation.

Give it your best shot and see what happens, and above all, let’s get our hands dirty and have fun. 🥰

This challenge will result at the end of March, and hopefully, by then, the top 5 participants will be announced here, and the best implementation for each challenge will be forever memorialized.

Challenge #1: Carousel Infinito

Let’s start with something simple: An infinitely looping carousel, typically used as banner imagery on websites and mobile.

Success:

• Never runs out of items to display (bidirectional infinite loop)


• Users can flip through each item with a swipe gesture or click


• Editable images and text contents


• Aesthetically pleasing.

Exceed Expectations(Critical Success):

• Has clickable slick dots along with swipe gestures.


• Adjustable width and height.


• Portable and extendible, and can be used anywhere (easy to use for other designers)

Challenge #2: Inline Tags

A block of text with inline trailing tags.

Success:

• Tags always follows the last line of text.


• Users can edit the text and tags reposition themselves accordingly on the fly.

Exceed Expectations(Critical Success):

• Adjustable width and height.


• Portable and extendible, and can be used anywhere (easy to use for other designers)


• Controlled complexity, the interface won’t become sluggish and unbearable while making changes to its contents.

Legendary Masterpiece:

• Mild layer complexity.


• Tags auto wraps to the next line before hitting the right side of the text box


• Works on a single line as well

↓Scroll down for Challenge #3 and #4