Figma design system update#
As for Sketch, I’ll give them credit for adding a team feature, but there’s no substitute for live sharing of file data, especially when the files can be embedded and never want for an update - everything is updated when you change the original file. This is ideal for building what we need for atomic design. (092620: And the recent 2000% memory reduction can’t hurt.)įigma uses team libraries like Sketch and Adobe XD to let you share the components across your team’s design files. And the performance of Sketch’s canvas seems to have suffered over the years, Figma is very fast and works well with my frenetic work style. Select the image to view the Figma Config EU keynote with Dylan Fieldsīut along came Figma and I just loved the simplicity of the UX after suffering some really irritating loses and plugin breakdowns in Sketch. It is a great resource if you are embarking on the creation of a design system as well. That’s as far as I want to go describing what Atomic Design is all about, I highly recommend Brad’s book if you want to really delve into its application for your work. To describe Pages, I’ll use Brad’s description: “…we see the final product, complete with real content poured into it, which helps ensure the underlying design system comes together to form a beautiful and functional UI.” (B. A template is where “we get to see our components come together in the context of a layout.” (B.
Figma design system full#
Some companies don’t use more than atoms and molecules in the construction of their design systems, others use all the parts of Brad’s model.Īnd if you start combining full organisms to create dialogs, for example, you get a template, which is where the atomic model “strays from pure science”, but it suits the purpose. You can use whatever combination of elements (atoms, molecules) make the most sense in the structure of your organisms. As I suspected, do whatever makes sense in your design system. Note: I messaged Brad Frost because I was not entirely sure you should use atoms in combination with molecules to create an organism, and he kindly replied.
.png "figma design system")
ORGANISM: Two Button Molecules and a Menu Bar Atom In our case we could use templates as well, although pages were not necessary.Īs a recap, here’s a diagram from Brad’s site: At first I did this without using Frost’s idea for organization, but once a team library feature was added to Figma I started over, building atoms, molecules, and organisms. After Figma added components to their feature set, I was excited to see how I could apply the atomic model using Figma components.Īt that time our company used a Visual Design Library (VDL) that contains several hundred components and associated patterns, so as I was creating mockups with Figma I started creating components for re-use. I learned about Brad Frost’s Atomic Design around the same time Figma was going to beta in October of 2016. Figma will soon support Variants and Interactive Components, which greatly simplifies the use of components. Author’s Note: (092220) Figma recently announced a few new features that make the approach done in this article as outdated.
0 kommentar(er)
