menu

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
# All channels
view-forward
# General
view-forward
# Start Here
view-forward
# Announcements
view-forward
# Design Systems
view-forward
# Plugins & API
view-forward
# Made with Figma
view-forward
# Prototyping
view-forward
Team

🎉 Design Challenge For Figma Community🎉

July 12, 2020 at 11:36am

🎉 Design Challenge For Figma Community🎉

July 12, 2020 at 11:36am (Edited 4 days ago)
Let's do something interesting! Today I want to challenge you to make some profound breakthroughs to your design capabilities.
Below I have prepared 3 challenges for you, each has certain criteria you need to meet to succeed.
Respond with a video recording or Figma link to your best efforts, you can pick any 1 or all 3 of them as you like, the aim of this challenge is so we can learn from each other and grow as a community.

🏆 Winners:

Congrats! We have two clear winners here: and , both of them have in time completed all 3 challenges with critical success, and on top of that, have also scored a legendary success for the second challenge that was outright insane. Combining curiosity and dedication, they have each brought unique and inspirational solutions, and have made possible the impossible.
There are a few other participants who messaged me via a private link with partial completion, you did a good job. Thank you all who have participated in this challenge!

Challenge #1

Let's start with something simple: An auto-layout enabled free-form button instance that responds to its content's length:

Success:

  • Button must have a customizable text element.
  • Button background is more feature-rich than a simple corner radius on a rectangle.
  • Background decorations should not fall out of shape on width change.
  • No use of plugins.

Exceed Expectations(Critical Success):

  • Button have symmetrical padding (top padding = bottom padding, left padding = right padding)
  • Button can have icons that accompany the text.
  • Button decorations are customizable on an instance level.

Challenge #2

A percentage customizable doughnut that resizes on its shorter dimension and never turns into an oval.

Success:

  • Percentage of each arc is customizable on instance level.
  • The Doughnut responds to the shorter dimension of its parent when resizing.
  • No use of plugins.

Exceed Expectations(Critical Success):

  • A multiline text element in the center, and always stays in the center when changing text or resizing.
  • Each segment can have borders or negative spacing around them.

Legendary Masterpiece:

  • Displays individual numerical value that follows the arc and always stays in the center of arc on percentage change.
  • Displays a 45° angular arm for each arc that points to its center and sticks out to the side with a numerical value attached to the end.

Challenge #3

A bidirectional Timeline that lays out perfectly on resizing and pushes its lower contents upon changing of text.

Success:

  • There must be a vertical line running in the center with dots to tell apart from each item.
  • Text descriptions can be placed on either side of the timeline and work fine.
  • The Timeline responds to width changes, wrap texts, and push its lower contents to make room when squished.
  • No use of plugins.

Exceed Expectations(Critical Success):

  • Everything works just fine as an instance and responsive to its parent frame.
  • There are symmetrical paddings around each dot that obscure the vertical line from touching it.
  • Dots can be swapped with custom icons.

July 12, 2020 at 7:19pm
This is nice 😁 I'll try to take some time tomorrow. Challenge 2 and 3, seems to be easy. First one is tricky. ✌️
Also this "challenge" idea I thought before and I believe you can share it on twitter as well 😁
like-fill
1
  • reply
  • like

July 13, 2020 at 8:30am
大佬,这个活动太6了
like-fill
1
  • reply
  • like

July 14, 2020 at 3:24pm
I underestimated the second challenge 🤣
Do I need to make all of these bullets into a single component? (especially the aspect ratio lock and the percentage of that donut piece?)
  • reply
  • like
Also here is a link with the progress. I'll finish all of them. 😁
Edited
like-fill
1
  • reply
  • like
lol nice try Andrei, although bullets will be accompanying a doughnut in a real scenario, but the doughnut is the main focus here in the second challenge. I like how you are sharing the file in a way so other people can't peek into your layer list, I like your choice of color, but I think if I drag on a dimension handle on any of your doughnuts at this point they will fall out of shape XD ton of fun sorting this out.
Percentage text of each arc is a mystery, you can come back for this one at the very end, I failed to make them stay with the arc as well, so haha, I do hope someone somehow will come across and shine us a light but until then, you can leave that part out of the equation.
Edited
  • reply
  • like
lol nice try Andrei, although bullets will be accompanying a doughnut in a real scenario, but the doughnut is the main focus here in the second challenge. I like how you are sharing the file in a way so other people can't peek into your layer list, I like your choice of color, but I think if I drag on a dimension handle on any of your doughnuts at this point they will fall out of shape XD ton of fun sorting this out.
Percentage text of each arc is a mystery, you can come back for this one at the very end, I failed to make them stay with the arc as well, so haha, I do hope someone somehow will come across and shine us a light but until then, you can leave that part out of the equation.
Actually, I didn't share intentionally 😅
If you want, I can change the permissions to invite only and let only the embed version, but this way you cannot check the behaviour. 😁
I'll post on twitter as well, the videos with the behaviours. ✌️
Edited
like-fill
1
  • reply
  • like
Also, i'm not here for rewards. I'm here for the fun 😁🌟
like-fill
1
  • reply
  • like

July 15, 2020 at 1:31am
like-fill
1
  • reply
  • like

July 15, 2020 at 9:29am
Did you manage to fix the problem with numeric value not staying in the center of an arc? I don't think this is possible.
  • reply
  • like
No, I haven't figure out a solution yet Alex, I was thinking about having a horizontal center aligned vertical line intersect with a vertical center aligned horizontal line to make a point where the number would be anchored on, but can't get the layers to order that way :(
  • reply
  • like

July 16, 2020 at 8:59am
I removed the access to the file and I'm gonna make it public at the end. ✌️
  • reply
  • like

July 22, 2020 at 3:28am
I have been working on these challenges for the past few days. It was really fun trying to figure out the hacks to build something that I previously thought impossible. I managed to complete all the challenges, except the legendary masterpiece haha (I really don't think it's possible). I'll pm u the link to the file so that the fun won't be spoiled :) Thank you very much for this!
like-fill
1
  • reply
  • like
I have been working on these challenges for the past few days. It was really fun trying to figure out the hacks to build something that I previously thought impossible. I managed to complete all the challenges, except the legendary masterpiece haha (I really don't think it's possible). I'll pm u the link to the file so that the fun won't be spoiled :) Thank you very much for this!
Nicely done, I checked your file, That was brilliant! You've scored 3 critical success in one go. 🎉Congratulations Wu🎉, share the challenge with your fellow designers if you liked it :) I might do more of this in the near future, stay tuned
  • reply
  • like

July 22, 2020 at 5:26pm
I have been working on these challenges for the past few days. It was really fun trying to figure out the hacks to build something that I previously thought impossible. I managed to complete all the challenges, except the legendary masterpiece haha (I really don't think it's possible). I'll pm u the link to the file so that the fun won't be spoiled :) Thank you very much for this!
Edited
like-fill
1
  • reply
  • like

July 27, 2020 at 5:50pm
I'm testing something:
It seems that nothing was impossible. ✌️
Edited
like-fill
2
  • reply
  • like

July 29, 2020 at 2:59am
Wow!!
  • reply
  • like

August 2, 2020 at 12:26pm
Congratulations! Here's my approach to these challenges:
like-fill
1
  • reply
  • like
Hehe, it seems that we ended up using similar techniques or even exact the same in some cases. 😁
like-fill
1
  • reply
  • like

August 3, 2020 at 10:42am
I change the permission to my link as well, you should be able to open it in editor and duplicate. ✌️
like-fill
2
  • reply
  • like

August 4, 2020 at 2:48am
I didn't know that 0.01 height will become 0 before! I learned a lot through the challenge thanks a lot!
like-fill
1
  • reply
  • like