Тёмный

Build a Figma Component the Right Way | Exclusive UI Collective Event 

UI Collective
Подписаться 9 тыс.
Просмотров 2,3 тыс.
50% 1

Learn to build an input component the right way using Figma variables, auto layout, and component atoms in this episode of the UI Collective event series. Looking to join the next event? Join our community for free at www.uicollective.co/
Build a community profile + join the community: www.uicollective.co/
Resource library: resources.uicollective.co/
Request a design system audit: www.uicollective.co/design-sy...

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

 

26 фев 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 9   
@user-gs8qg9by8z
@user-gs8qg9by8z 2 месяца назад
Can you show/explain how to add the extra border for a focus state? I've grabbed a Focus border from the downloads/your design library file, but still not sure how it was initially styled and added to the variant. Thanks!
@UICollectiveDesign
@UICollectiveDesign 2 месяца назад
We use the absolute positioning tool, and then set the constraints to left and right, top and bottom :) Let me know if that makes sense!
@Underhills
@Underhills 3 месяца назад
Wish Figma would simplify these component processes. It is so over engineered it hurts. It's a bit ironic as Figma is supposed to be a UX focused tool, but it's not very user friendly. Before Figma I used XD and can say they made dynamic components way easier to design. Perhaps the Adobe takeover will sparkle some of that magic onto Figma.
@UICollectiveDesign
@UICollectiveDesign 3 месяца назад
I agree it is far more complex than it needs to be. Unfortunately, the Adobe/Figma deal is off, so doesn't look like there will be changes anytime soon!
@DavidKnowles
@DavidKnowles 3 месяца назад
If you want this amount of functionality ánd flexibility in a single component then there is no way to achieve this without having all these options and consequently all these steps. If you only need a simple static component then it's easy to put these shapes and texts together within a component without the complexity. You get to choose.
@Underhills
@Underhills 3 месяца назад
Didn't know the Adobe deal was off. What a shame! I was looking forward to a better GUI, like floating palettes, docking panels and all the flexible GUI smartness that Adobe have developed over the past several decades. Figma has a long way to go, still feels a bit like a prototype in many ways, especially as a prototyping tool ironically enough. Too quirky and over engineered. Hope Adobe returns to this topic.
@Underhills
@Underhills 3 месяца назад
Well, it's like this because no one at Figma have developed a better solution. It doesn't have to be this quirky and over engineered. Isn't the main success criteria in UI design ease of use? I hope to see that philosophy embedded into Figma as well. Some day this will be improved, and then the typical sales pitch is "now you don't have to do all the quirky and odd steps anymore cause now you just" etc. So it's very easy to admit weakness when the concept is improved. Until then everything is "very clever and smart" of course. Let's hope the improvement process speeds up cause right now stuff like this is a nightmare. You can hear the honest struggling going on in this presenters voice when adding frames within frames and working around obstacles and weird props procedures etc. 😲
@mozarellaguru
@mozarellaguru 3 месяца назад
It is just a tool that fulfills its purpose the best it can. It has had great success and adoption worldwide, actually. It beat Adobe XD by far (💀 RIP), and the learning curve is much smaller than most Adobe software (Figma is not hard to learn; how to architect good UI components yes). With so many free UI kits and the rise of design systems in many teams, you most likely will never have to build these from scratch to kick off your designs. Unless you are into design systems. The people who craft these components enjoy the process. It is normal. If you want simpler than this, you might need to dive into front-end development.@@Underhills
Далее
Figma Alignment UIUX Tutorial for Beginners
20:47
Просмотров 8 тыс.
Даня...😂 #badbarbie #musicvideo #xoteam
00:15
Просмотров 286 тыс.
Creating Type Scales for a Design System
7:13
Просмотров 6 тыс.
Figma Variables Setup: Building a Variable Library
43:37
How to Master Figma and Design 10X FASTER!
12:10
Просмотров 31 тыс.
3 Tips to Master Figma Variables | Figma Like a Pro
11:16
Даня...😂 #badbarbie #musicvideo #xoteam
00:15
Просмотров 286 тыс.