Тёмный

In the file - Organizing your design system with Onfido 

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

Getting started building your design system can be a lot to take on, which is why we thought we'd bring in Steve Dennis from Onfido. They've been doing excellent work in the space and their Team, Project, and File organization is a delight.
--
00:00 - Welcome
00:57 - Onfido introduction
02:15 - Onfido’s journey to adopting Figma
06:14 - Convincing stakeholders to switch to Figma
08:44 - Piloting Figma with a design system
09:29 - Importing files from Sketch
10:54 - Structuring design system files
13:50 - Project template files
15:19 - File and project naming conventions
17:25 - Library files
21:30 - Creating themed files
23:50 - Pages, Frames structure in your libraries
30:45 - Component creation process
34:37 - Team structure
36:34 - Developer handoff and redlining
42:35 - Design system metrics and measurement
48:35 - Design tokens
58:00 - Documenting components
#figma #figmadesign #inthefile

Наука

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

 

11 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 45   
@GadgetsGearCoffee
@GadgetsGearCoffee Год назад
Thank you! I feel a lot of these videos often assume you have some sort of base knowledge of Figma and design systems overall and don't overexploit for the audience and this did which was helpful
@carlosaraya7654
@carlosaraya7654 2 года назад
Amazing work! but I would love to see clearly the checklist of the New components step-by-step process 😫
@markedgood
@markedgood 2 года назад
I'm about a 1/3 the way through the video and wanted to stop to leave a comment about a number of things in this setup that I like so far: the project overview page, ticket naming convention, under the whole DS project there are separate projects for components, kits etc.
@AnshMehraa
@AnshMehraa 2 года назад
Just finished the video, pretty good stuff! Understanding with the current sound worked pretty well for me when I turned on Captioning
@stevedennis9832
@stevedennis9832 2 года назад
Apologies if my kiwi accent was partly to blame :D
@AnshMehraa
@AnshMehraa 2 года назад
@@stevedennis9832 don’t worry, the sound was perfect and whatever you shared was simply awesome
@drewbridewell6881
@drewbridewell6881 2 года назад
Thanks for sharing Steve! This is awesome work
@stevedennis9832
@stevedennis9832 2 года назад
You're welcome. :) Happy to answer any follow-up questions in the comments here if I can.
@wisey113
@wisey113 2 года назад
@@stevedennis9832 Awesome video, thanks for taking the time. Quick question: How are you using Themer team wide? Isn't it connected to a single Json bin account? Would love to know more about how you make that work.
@stevedennis9832
@stevedennis9832 2 года назад
@@wisey113 Thanks for the kind words :) It's 1 Json bin account but the bucket has a public key that we just have on our wiki as part of the config instructions for Themer.
@ceejey
@ceejey 2 года назад
Hey everyone, what would be the best approach to describe all the ux patterns in the figma library? Just including the description on the artboards next to the components? How are you usually doing it? Please share your best practices. Thank you
@yoannrapinel1092
@yoannrapinel1092 2 года назад
Super interesting! I'm currently switching from Sketch & Abstract to Figma so these advices are super useful. I just have a question related to their workflow. At 16:08, Steve present the fact that they have a project for their "Source" files and other projects for WIP files. But if they work on something that already exists in the source of truth, how do they apply the changes from WIP files to the "Source" file? - Copy pasting changes will break the overrides if the elements you changed have instances. - Do the changes again on the source file means to do the job twice.
@omarkhalaf1611
@omarkhalaf1611 Год назад
I've had the same issue and unfortunlty it is not applicable except through a third party plugin like Design System Organizer to relink components to different libraries
@DanielShmaniel
@DanielShmaniel 2 года назад
Hey, folks! Great video - curious what is in the "UI Kits" that wouldn't be covered by "Assets, Components, and Patterns?"
@stevedennis9832
@stevedennis9832 2 года назад
Thanks for the Q Daniel, they're product-specific UI, stuff that doesn't need to be generalised to the design system itself, but benefits that product by having a standard place to put product UI components. Does that make sense?
@FirstLast-tb7qn
@FirstLast-tb7qn 2 года назад
In early stages of studying kids must be given courses of ,'order' and 'planing'so they can learn in early ages how to be organized and put successful plans through the rest of their lives.
@AnshMehraa
@AnshMehraa 2 года назад
Luis looks like a celebrity in this one
@Danny-bn2fg
@Danny-bn2fg Год назад
@14:00 It seems like a good Idea but name the covers with that small text for Jira tickets does not work -at least for me. It's really small and the benefit is to low to add it.. The tag is a nice idea. I endet up implementing tag & Project name in the cover tile and do the same in the project description so that it is searchable.
@alexisfy
@alexisfy 2 года назад
Just a tad bit of better audio and a gallon of storytelling would have make this mesmerizing. Good work. A lot of work and good work but this became an interview than expected. Some things that would be awesome to learn from this are: Naming conventions for files and components. Governance system like the cover template. (this was addressed through check lists. Would've loved to see the ckeck list itself) pages layout File segmentation. (this was addressed for the component template, are there other type of files?) If you have a template for laying out different components. layer naming conventions Problems of experiences stated concretely, such as "we tackled changing requests this way:" "We addressed an introduction to branching this way:" I know its WIP and it's a hell of a monster to tame, maybe the questions were out of order and demolished the intended presentation. I'd love to see more about this. Thanks Steve!
@stevedennis9832
@stevedennis9832 2 года назад
Thanks for the feedback :) I totally agree, fwiw. The intent was no presentation and more question and answer format, but it was a bit all over the place. More detail/focus coming in some blog posts later in the year :)
@paralysekid
@paralysekid 2 года назад
@@stevedennis9832 Would love to see a detailed blogpost about the conversion of components from Figma to Storybook. Does SB require you to have your Figma components laid out on single artboards & pages, or does the developer decide for himself how he structures everything and takes what he needs from Figma piece by piece?
@stevedennis9832
@stevedennis9832 2 года назад
@@paralysekid There's no direct link between Figma and Storybook. We run a pretty tight collaborative process between engineers and designers, and both engineering and design will accept the structure and capabilities of the storybook components before they're pushed live. Nothing automated or smart here. :)
@pavelzarechnev8655
@pavelzarechnev8655 2 года назад
Where can i buy that file or storybook in Figma?
@Chim1012
@Chim1012 2 года назад
I wonder how they set up their typography tokens. I find it quite challenging
@stevedennis9832
@stevedennis9832 2 года назад
Our type tokens are a bit more rigid than I'd like them right now. The requirements we had were for the token names to be the same across iOS/android/web themes, and to support more variants than our old tokens did. This led us to a naming system where we have 300-Regular, 400-Regular 300-Bold, 300-Mono, and have the scale from 200-900 dictating font size. What we want ideally is different tokens for different aspects of type, that can be combined in certain wais (e.g., just font size, or just font weight) but Figma doesn't support that (yet) so we didn't build it that way.
@leandromarrocosdesouza6927
@leandromarrocosdesouza6927 2 года назад
The audio is sounding weird. It's difficult to understand
@pavelzarechnev8655
@pavelzarechnev8655 2 года назад
How can i have that file in Figma?
@angryskeletonz
@angryskeletonz 2 года назад
How did you get dark mode?
@Figma
@Figma 2 года назад
Hey Stevo, that isn't a dark mode, that's the default appearance of presentation view, which is where you view your prototypes by clicking the play button ▷ in the toolbar.
@CarlHeaton
@CarlHeaton 2 года назад
Fix the sound !
@CarlHeaton
@CarlHeaton 2 года назад
your speaker is very quite
@busimo
@busimo 2 года назад
how did u get the figma dark mode?
@stevedennis9832
@stevedennis9832 2 года назад
It's not dark mode, I'm just playing a prototype and it's the native prototype UI :)
@Deadstar51
@Deadstar51 2 года назад
@@stevedennis9832 hi Steve. Where can i find this design system? This buttons variants looks so cool. I just want to research it
@busimo
@busimo 2 года назад
@@stevedennis9832 ohh
@welling1
@welling1 2 года назад
He moves around the examples too fast. I want to see the guts of how everything is actually structured, based components and the page org.
@stevedennis9832
@stevedennis9832 2 года назад
Apologies, unscripted + nerves :) I'm going to write up some more detailed blog posts that people can reference more easily. Do you have any specific questions about the structure or base components that I can try to address?
@tomaszgens
@tomaszgens 2 года назад
​@@stevedennis9832 I guess I have a question I didn't ask when we were live. What is the benefit of keeping the design system split across many projects and teams? Is it that big, that sometimes you want to share e.g. only buttons or is there any other practical reason?
@stevedennis9832
@stevedennis9832 2 года назад
@@tomaszgens the only thing we split across teams are the UI kit files, which are just components for that product that aren't shared with other products yet. The product team maintains that file themselves.
@adrianyee2634
@adrianyee2634 2 года назад
@@stevedennis9832 I reckon you nailed it mate. It was great to get an insight into your system, how it's built and the logic behind your themes and tokens - thanks for sharing!
@JoseReyes-pr9hg
@JoseReyes-pr9hg Год назад
This video would have been much better with a little more enthusiasm from the speaker and if he had articulated the words better and not spoken so fast 3⭐/5
@MaxWeir
@MaxWeir 2 года назад
Needs to speak louder and slower, hard to follow
@veronicapena6143
@veronicapena6143 11 месяцев назад
better audio please!
@El...Presidente
@El...Presidente Год назад
Audio is so low, all I hear is the train tracks 😂
@GadgetsGearCoffee
@GadgetsGearCoffee Год назад
Thank you! I feel a lot of these videos often assume you have some sort of base knowledge of Figma and design systems overall and don't overexploit for the audience and this did which was helpful
Далее
In the file - Building a headless design system
56:15
Новый дом для пернатого
00:59
Просмотров 464 тыс.
The World’s Best File Naming System
6:51
Просмотров 590 тыс.
Organize Your Figma File Like a PRO
8:06
Просмотров 73 тыс.
Naming Things in Figma: My Best Tips & Tricks
27:45
Просмотров 53 тыс.
Architecting Subcomponents - Nathan Curtis
21:43
Просмотров 13 тыс.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 724 тыс.
Design Better Than 99% of UI Designers
14:52
Просмотров 177 тыс.
FULL web design process [STEP-BY-STEP]
17:50
Просмотров 102 тыс.
WWDC 2024 - June 10 | Apple
1:43:37
Просмотров 9 млн
Ноутбук без экрана
0:22
Просмотров 13 тыс.
ВЫ ЧЕ СДЕЛАЛИ С iOS 18?!
22:40
Просмотров 51 тыс.
Mi primera placa con dios
0:12
Просмотров 659 тыс.