Тёмный

Config 2024: How we redesigned Figma (KC Oh, Ryhan Hassan, & Joel Miller, Figma) | Figma 

Figma
Подписаться 591 тыс.
Просмотров 48 тыс.
50% 1

Config 2024: How we redesigned Figma (KC Oh, Ryhan Hassan, & Joel Miller, Figma)
An in-depth look at a redesigned Figma-learn more about how the Figma team approached overhauling the design of the editor, from the overarching IA, to a brand new look and feel, to a create more approachable and immersive editing experience.
Featuring: KC Oh, Product Manager, Figma & Ryhan Hassan, Product Designer, Figma & Joel Miller, Product Designer, Figma

Опубликовано:

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 94   
@hlnhd
@hlnhd 3 месяца назад
The craziest thing about a redesign is that you spend days trying to convince yourself that the most innovative and different ideas will work, only to end up realizing that the simplest idea, which is closest to what already exists, is actually the best. Congratulations on the project.
@danielmunoz2316
@danielmunoz2316 3 месяца назад
Agree. That is exactly what happened when re designing the inspector properties panel!
@cheswajda
@cheswajda 3 месяца назад
The luxury to overthink happens when your design team is overstaffed.
@thespadgett
@thespadgett 3 месяца назад
We call this the 'Process of Elimination'.
@paralyze.voice10
@paralyze.voice10 3 месяца назад
WOW..... Falling in love with figma even MOREEE. Shit I wanna work at figma too...
@HarishKumar-mp9wl
@HarishKumar-mp9wl 2 месяца назад
when are we getting this update.. is it in closed beta or something since i didnt get any updates for this
@thedesignux
@thedesignux 3 месяца назад
When could we try this new UI update?
@zzzef
@zzzef 3 месяца назад
launch date, anyone?
@abdulazeezadewole6556
@abdulazeezadewole6556 3 месяца назад
🚀 Figma 🌙
@Underhills
@Underhills 3 месяца назад
Wrong Figma. I still need to see my tools, properties etc when NOT actively designing. I'm consuming and assessing at the same time.
@gdkgsirItsoyxuemrzktxitzi
@gdkgsirItsoyxuemrzktxitzi 3 месяца назад
You can turn off auto hiding so it should be fine.
@ВиталийОленяк
@ВиталийОленяк 3 месяца назад
Дякую
@thedesignux
@thedesignux 3 месяца назад
I hope now we can scroll horizontally in the layers panel
@IStMl
@IStMl 3 месяца назад
nope
@ShanA-r2d2
@ShanA-r2d2 2 месяца назад
You get the layer info in the tooltip so you don't need to scroll
@rubiroid
@rubiroid 2 месяца назад
nah ah
@kunal-ko
@kunal-ko 2 месяца назад
You guys made it worse than it already was.
@AvanaVana
@AvanaVana 3 месяца назад
Overall I think this is a step forward. My typical Figma workflow involves hitting command + backslash hundreds of times a day to hide the UI while I’m working, so the interface getting out of the way by default is definitely a welcome change for me. However, I think you made a _serious_ mistake moving the width and height properties away from x and y. It is an extremely common workflow for me to adjust both the x/y and width/height of a layer in the same operation, navigating from one field to the next with the tab/shift+tab keys. When you move width and height away, this workflow is destroyed. In Sketch, it was even better because sketch has a key command that focuses the “x” property, so if one wanted to access any of “x”, “y”, “width”, or “height”, one need only use this key command and then quickly press tab to jump to the desired property. I have requested this feature for Figma before, but with this change, it would no longer be useful. I expect this to significantly affect my workflow and that of many, many others.
@Underhills
@Underhills 3 месяца назад
Preach! Many times I wonder if these people have ever talked to a real life designer or if everything is "figured out" in lotus position in the middle of a spiritual think-tank session.
@hyacinthusorientalis8546
@hyacinthusorientalis8546 3 месяца назад
the guys decided that it was inconvenient for me to work, that the panel located on top takes my attention away from the design ahaha, in fact I don’t see it, I just don’t notice it until I need it, after several years of working in Figma I no longer notice the interface, I I act intuitively, on muscle memory, but now I have to retrain my brain!
@gdkgsirItsoyxuemrzktxitzi
@gdkgsirItsoyxuemrzktxitzi 3 месяца назад
Same here
@jokosi
@jokosi 3 месяца назад
We will get used to it. We always do.
@rubiroid
@rubiroid 2 месяца назад
exactly, but they don't fix the top panel in preview mode, where it overlaps the design How many time I would need to explain to users during usability testing that this is not a product panel, it's figma's toolbar, so please hide it.
@accountNameBlank
@accountNameBlank 3 месяца назад
Horizontal scrolling of the layers panel would have been enough of an improvement to the UI. Hope this is fixed with the redesign.
@lepdien
@lepdien 3 месяца назад
I really don't like the concept of collapsing Constraints section. I design icons and I have to change constraints from Top Left to Scale every time I commit my work.
@noa_1104
@noa_1104 3 месяца назад
is that one of the only constraints without a keyboard shortcut? If so they should definitely add more shortcuts now
@rubiroid
@rubiroid 2 месяца назад
There are a lot of good small improvements to the Design panel, however the concept of floating panels is a step back. It just takes an extra space so when the panels are expanded I have less visible area for my mockups, it works against your new principle - designs first. Also the layer pannel issues not fixed - no horizontal scroll and limited width :((( I feel like they don't care about layer panel at all, now all the whistles and bells at the top of the layer panel makes it even smaller :( I have complex mockups with a lot of layers and deep hierarchy and it is painful when at some point you don't see a layer because it is completely truncated.
@ShaoboYang-c8w
@ShaoboYang-c8w 2 месяца назад
U13 is a nightmare. Do you guy really serious about UI & interaction design at all?
@thevikingsock8527
@thevikingsock8527 Месяц назад
Not the best redesign tbh. Some things were a lot better before and there was also room for improvement in many areas
@HeresAsvg
@HeresAsvg 3 месяца назад
A floating toolbars is -very bad- kinda not cool. In addition to the obvious that it shrinks the space with these margins from the edges, it also makes the edges of the screen unclickable (but these are the most optimal places to click). Now you have to aim so as not to miss and click on the canvas behind this toolbar 👀 Moving the toolbar (the tool bar) also looks very inconvenient, it now floats in the air and eats up space, although before it stood neatly in the corner In other details the redesign is good (I love the autolayout reorganization)
@gdkgsirItsoyxuemrzktxitzi
@gdkgsirItsoyxuemrzktxitzi 3 месяца назад
Would be great to have a minimal floating paddings almost like none. Like in the arc browser. So it would be not affecting the UX, only a stylistic update
@Alias-49013
@Alias-49013 2 месяца назад
Soon, you‘ll be able to pin the sidebars to the edges of the screen again.
@harisankarprabu6117
@harisankarprabu6117 2 месяца назад
Convincing the world of designers to concur with the design decisions made is so damn hard 😂
@instakotik
@instakotik 2 месяца назад
I hate scrolling panel 😭😭😭 it’ awful
@andre.bandarra
@andre.bandarra 3 месяца назад
Any release window? In the website there's no mention on when tem UI3 is coming...
@Mazzademann
@Mazzademann 2 месяца назад
They mentioned in the opening keynote that it would be a fairly slow roll out to allow users to get used to the new layout
@amyacoulson
@amyacoulson 3 месяца назад
I can’t wait to try this redesign out. When will it be released?
3 месяца назад
It will be rolled during the next few weeks, there's a Waitlist button you can tap to get early access :)
@awkt13
@awkt13 3 месяца назад
I like how they took some ideas from Framer editor like the menu at the bottom, the auto layout updates and positioning the elements in grid formate as it makes it easy for the user in dev too.
@lucau1966
@lucau1966 Месяц назад
Hello, why in the new Position Panel is now present a little button called "Ignore auto layout"? It's always deactivated by default and when I import an image, or write a text, these elements are dragged automatically on the left top corner of the frame that contains such elements...in order to move elements I have to activate that command "Ignore auto layout" every single time. Why?? How can I set it in Preferences ? it's driving me crazy and I don't find any solutions on Google. Thanks
@_ryaaan
@_ryaaan 3 месяца назад
I love the floating panels. Looks beautiful 👌
@AdityaAserkar
@AdityaAserkar 3 месяца назад
The floating toolbars, don't they take up more space from padding in order to float them? I almost always have been hiding them anyway working primarily with keyboard shortcuts. 🤔
@Sundrowner
@Sundrowner 20 дней назад
Still no UI3. Y'all kinda are starting to suck at this point.
@getflourish
@getflourish 3 месяца назад
I went through all those design considerations myself when working on my own design tool years ago. Amazing work showing the behind the scenes!
@royishtainberg
@royishtainberg 3 месяца назад
I don't like the floating toolbars... They are too much in your face and take all that bit more space. Elements from your design peeks from the space between the tool bars and the edge of the screen..
@marcusdelictus
@marcusdelictus 3 месяца назад
dude you can hide them...
@plextoon
@plextoon 3 месяца назад
dude, you can hide them. And when it's hidden it will give you more space to work on your canvas
@royishtainberg
@royishtainberg 3 месяца назад
This can be done with a straight, near edge tool bars. If you need to hide them to work than they are bad. No one actually works with the toolbars hidden. ​@@plextoon
@allanponce2084
@allanponce2084 3 месяца назад
I agree with you!
@HeresAsvg
@HeresAsvg 3 месяца назад
Yes, this canvas sticking out at the edges does not provide anything useful and is annoying at the same time :(
@jimmybotao1
@jimmybotao1 3 месяца назад
Moving contextual actions into the property panel is terrible idea, who asked for that?
@sean_mc
@sean_mc 3 месяца назад
It kind of makes sense since the properties panel itself is contextual based on your selection butI fear this is one change that's going to be a sting for new users though, it's far less discoverable.
@noa_1104
@noa_1104 3 месяца назад
Agree with the other commenter that this place actually makes more sense, that entire panel is contextual actions. However they only fit two and hide the rest in a menu which doesn’t seem great. Then again, you had to pick the merge mode from a menu before as well so it’s not anymore clicks for those
@Slava-om1sz
@Slava-om1sz 23 дня назад
@@sean_mcIt’s not about panel not being suitable for contextual controls. It’s about what the best place would be for selection controls. In UI3 they moved them into 3 different places and you need more time and clicks to find and interact with them. In UI2 they live in an easy to find, separate place which has enough room for all of them. Close to the selection on canvas. This is perfect. In UI3 they moved some to the Actions bar (which is completely irrational, since that one is a primary place for accessing assets. Even plugins deserve a separate place). Some appear on the panel and some behind the … nested menus. This all is plain harming my workflow even when perfectly memorized which controls are all 3 locations. It still costs me more clicks
@sean_mc
@sean_mc 23 дня назад
@Slava-om1sz Yes, and I was making the point that CONTEXTUAL selection controls being placed in the CONTEXTUAL panel make sense from the perspective of group contextual options together. The selection controls already don't appear without something being selected in the current top toolbar, it makes heaps of sense to just put them in the panel that already shows all of your other current selection controls.
@davidfitcher2953
@davidfitcher2953 3 месяца назад
Spline has left the chat
@instakotik
@instakotik 2 месяца назад
If the new UI will become irreversible with that undockable bottom toolbar I just don’t wanna use Figma anymore 😭😭😭
@shidulraju
@shidulraju 3 месяца назад
Loving💛 the new Figma redesign! The team put a ton of thought into the sleek interface and improved user experience. Can't wait to explore all the new features-it's like discovering Figma all over again!
@allanponce2084
@allanponce2084 3 месяца назад
This new UI is horrible. I hated it.
@noa_1104
@noa_1104 3 месяца назад
@@allanponce2084 while changes are always difficult to adjust to and thus usually initially hated by everyone, you can only sometimes claim they are objectively bad in some way. some of the specific changes discussed make a lot of sense to me, there’s always trade offs and for many of the decisions it’s simply a matter of getting used to it. Interface designers (the people using figma) should recognize this reality
@Looseideations
@Looseideations 3 месяца назад
@@noa_1104yeah, to go off from your statement, people will always just have to relearn as things change. I don’t think it’s a purely bad change. I personally hated the confined space and constant zooming between frames and parts of the project - losing some actions had I not learned some shortcuts. I’m still learning what Figma has to fully offer, but so far looks like it can be a step up from the conservative reworks they’ve done over the years
@nofavors
@nofavors 3 месяца назад
Figma severely lacks in wireframing and prototyping. Axure wins handsdown in those areas. Figma is a great tool for hifi designs and basic prototyping. Axure is just way better when it comes to Interaction Design.
@kicknight3302
@kicknight3302 3 месяца назад
They are not saying this explicite but the true reason behind the ui redesign was not human at least not on the first place it was... AI :) they had to make it more easier to read for and AI not us. At least now we know the direction in which this going.
@stephanestadler1219
@stephanestadler1219 3 месяца назад
wait ! @figma you said the i just receive my Figma Creator Micro Keyboard in collab with Work louder after more than 6 month waiting and now my keys special UI will be obsolet because you change it and icon as well ?! : P How dare you, nice yob by the way
@ryanstringer
@ryanstringer 3 месяца назад
The opening to this felt like a dig at Adobe because it’s exactly what they do. Add tools but shoehorn them into the ever growing tabs and tool icons. The forward thinking and human centred design from Figma is refreshing.
@Ahtisham-gb4ck
@Ahtisham-gb4ck 2 месяца назад
The way product manager and white shirt guy left the stage and start look each other for milliseconds was hilarious 😆 I would really love to appreciate the re-design. ❤ I also endorse the comment from a guy in this comment section talking about the cons of floating panels.
@jakseen
@jakseen 3 месяца назад
The user experience with Figma would really benefit a lot if it went for a stepper (controlled with the left-click button) instead of a double-sided arrow with the drag interaction for adjusting numerical input such as width, height, and padding values. This way, designers won’t have to reach for their keyboard or move their mouse to adjust the values, making the experience more user-friendly and less cumbersome for all. Take a look at Elementor and Sketch. The option can also be provided as an alternative for users who prefer to use drag handles. And please, it’s high time Figma fixes the nested view in Layers panel.
@gdkgsirItsoyxuemrzktxitzi
@gdkgsirItsoyxuemrzktxitzi 3 месяца назад
Wow, such a great feedback! Thank you. Figma please ^^^
@youtya
@youtya 3 месяца назад
New UI is awful
@allanponce2084
@allanponce2084 3 месяца назад
I agree
@pelangos
@pelangos 3 месяца назад
Great explanations, the new UI looks amazing and clean!
@larissasaad7378
@larissasaad7378 3 месяца назад
I still can't access Figma Ai, that's so frustrating
@quatrical
@quatrical 3 месяца назад
Still no option to hide specific properties?
@caffeineUI
@caffeineUI 2 месяца назад
Can’t wait for the update 🙌🏻
@cheswajda
@cheswajda 3 месяца назад
So proud of themselves for doing the obvious. Grouping things contextually: what a concept. Having labels: groundbreaking! Panels that re-size: welcome to the year 2000.
@sergio.arboleda
@sergio.arboleda 3 месяца назад
@sean_mc
@sean_mc 3 месяца назад
Firstly - The properties panel re-jig - FANTASTIC. I really dig and understand the logic for the changes and re-grouping of items there. FINALLY resizing the panel (Please say we have horizontal scrolling in layers panel now too? I'm not totally sold on Dimensions being in Layout rather than the Position group, those are actually a positioning value in web/app development plus when designing we often need change them in tandem with the X&Y values to place/size components correctly. But I'm sorry guys, the "floating" side panel UI ain't it. Figma is too complex and too UI heavy to make it work as a design paradigm like some of the apps you are following here. Nothing about this overall redesign showed that the design decisions are functionally any better than before, in fact the UI is MORE in the way now than having it on the outer edges of the canvas only. I can already hide the UI when I need to. But now I have even less space for my panels and canvas when I need the UI displayed thanks to the pointless spacing around the panels and file/project title now taking up room on the left panel.
@MA-fh7ui
@MA-fh7ui 3 месяца назад
amazing work guys
@DanaTYang
@DanaTYang 3 месяца назад
Those colors are badass
@kateshe2033
@kateshe2033 3 месяца назад
So where is corner radius now?
@noa_1104
@noa_1104 3 месяца назад
Under appearance next to opacity and blend mode and such, further below
@k0mmunicat0r
@k0mmunicat0r 3 месяца назад
Penpot copy...
@noa_1104
@noa_1104 3 месяца назад
There’s dozens of whiteboarding tools that have been around that also have these kinds of floating panels, who knows who did it first and it doesn’t really matter
@k0mmunicat0r
@k0mmunicat0r 3 месяца назад
@@noa_1104 It does mate... they are simply copying Penpot... and their designer taking credit for that is cheeky.
@allanponce2084
@allanponce2084 3 месяца назад
This new UI is horrible. I hated it.
@karthikg1153
@karthikg1153 3 месяца назад
Amazing features 😍👏🎉🎉🎉
@dileepanipun2920
@dileepanipun2920 3 месяца назад
Awesome work there. 🔥👍
@marcusdelictus
@marcusdelictus 3 месяца назад
dude stop yapping and say what the new functions can do.
@sergio.arboleda
@sergio.arboleda 3 месяца назад
Amazing 14:34
@pruebaprueba-d6r
@pruebaprueba-d6r 3 месяца назад
The new UI is just bad
Далее
С какого года вы со мной?
00:13
Просмотров 210 тыс.
+1000 Aura For This Save! 🥵
00:19
Просмотров 12 млн
Config 2024: Design systems best practices | Figma
48:39
Meta Connect 2024: Quest 3, Orion Glasses & AI Updates
11:49
Figma's HUGE AI Updates: ConFig 2024 in 14-Minutes
15:38
If I Started UX in 2024, I'd Do This.
13:15
Просмотров 318 тыс.
Figma 3.0 (Dev Mode, AI, Slides and more)
24:50
Просмотров 57 тыс.
Become a UX/UI designer in 2024 (no bootcamp)
10:20
Просмотров 3,4 тыс.