šŸ”„ Biscuit's Figma Design Challenge S02

General Discussion
1

:wave: 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. :smiling_face_with_three_hearts:

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

9 Likes
3

Challenge #3: Responsive Description Table

A description table, commonly displayed on the details page of a product. With grid-based dynamic content resizing.

Success:

  • Row Height is determined by cell content
  • Texts are always centered vertically
  • Label cell and content cell are distinguished
  • Respond to width adjustments

Exceed Expectations(Critical Success):

  • Column grid system is applied
  • Cell width is determined by column grid upon resizing

Legendary Masterpiece:

  • Utilizes column-span system, able to directly specify how many column-grids a cell should span across instead of manually dragging
  • Cell width is determined by column grid upon resizing
7 Likes
4

Challenge #4: Wrap

Time to bring the css {flex-wrap:wrap;} behavior to Figma!

Success:

  • Overflowing items wrap to new line upon resizing the container.
  • Items are editable.
  • No use of plugins or code.

Exceed Expectations(Critical Success):

  • Breakpoints are dynamic and precise.
  • Items wrap on the fly while editing.
  • Minimum layer hierarchy, easy to understand easy to maintain.
  • Works on any number of items(high extendability).

Legendary Masterpiece:

  • Containerā€™s height is determined automatically.
26 Likes
5

Is this achieved using text boxes? Can you share your figma so we can learn it?

6 Likes
6

This is a challenge to see who can create this, not a shared solution.

6 Likes
7

get it

8

This challenge is aimed to inspire people to push Figmaā€™s limitation and conquer obstacles, my solutions wonā€™t be the prettiest, because we have brilliant minds like @Gleb @chudoloo @Vitalii_Sologub @Andrei_Iancu(Winner and Champion of Biscuit Challenge Season #1 and @Chenmu_Wu(Winner and runner-up of last season).

So hopefully, by the end of this challenge, things will be distilled down to the relative best solution, and then it will be the winnerā€™s honor and privilege to decide whether they want it published to benefit the community going forward.

With that said, participants can enquire my current solution, however, doing so will disqualify their further iterations on the challenge.

7 Likes
9

Where can I go to see the previous challenges?

2 Likes
10

Firstly, really great work on the assignments for this challenge! I think the first one will become much easier once Interactive Components are released.

Secondly, I just tried to come up with something for the #2 and #4 ā€” I just canā€™t. Iā€™ll think more about it but at the moment it simply breaks my brain. I even imagined a couple of solutions but once I opened Figma I realized they wonā€™t be feasible. Very hard challenge!

6 Likes
11

I can only do part of it.The first challenge.

2 Likes
12

Hey @ziyue it looks like your file wasnā€™t uploaded properly. Could you try again?

13

Topic : Biscuit challenge Season 1

Andrei Lancu (Winner and Champion of S01) : Community file

2 Likes
14

Iā€™ll try to find some time to participate in this one as well. :grin:

Good luck and have fun! :v:

Also, good job for videos. I love them. :heart:

Edit:
I found some time and started with the first challenge.

Challenge #1

Song
CTC feat. Muse Quartet & Silviu Pașca Band - Negru (Youtube Link)

As in the first season, it seems to be easy at the first sight, but it was more challenging because of the ā€œportableā€ factor.
By portable, I understand 1 ā€œcomponent ā†’ instanceā€ which is not possible right now, then I thought about copy/paste.

Challenge #4 is scary, especially without writing a script. :grimacing:

5 Likes
15

I only finished one

1 Like
16

Congrats! @Elephant_x has just scored a :boom:Critical Success on Challenge #1
Well done :raised_hands:t2:

1 Like
17

Are we allowed to write plugins?

Iā€™ve got challenge #4 Done if so.

14 Likes
18

Awesome @Finch, Challenge #4 is the hardest among these, although usage of plugins doesnā€™t align directly with the goals of this challenge, we definitely saw the potential of this plugin you are working on, very nifty and straight to the point, huge augmentation to Figma if published.
For the above reason, Iā€™d make one exception and call it a critical success If your plugin works on radio groups, tag groups with icons and button groups, etc. And it will be a legendary success if you managed to think of a way to make it work on nested instances!(I am sick of people detaching instances as well)

After all, Inspiring people to make huge breakthroughs and solving real technical problems is what this challenge is for.
Again, incredible work @Finch high five :raised_hands:

6 Likes
19

Wow straight up magic here. =)

1 Like
20

@Gleb you can do it, we believe in you Gleb!
Š“Š°Š²Š°Š¹, ты сŠ¼Š¾Š¶ŠµŃˆŃŒ, тŠ¾Š²Š°Ń€Šøщ Š”Š°Š±ŠøрŠ·ŃŠ½Š¾Š²!

1 Like
21

Ditto. Nice work @Mr.Biscuit! I was stumped for a couple of hours and still didnā€™t get anywhere. You dropped a hint in the #4 video and it still didnā€™t help. :laughing:

1 Like