Framer X and the DNA of design systems
Framer X is an altogether different proposition to what has gone before, and one UI specialists need to skill up in — because it fundamentally changes our workflow and responsibilities. The innovation in Framer is certain to spread to other design applications. It’s not going to be an easy road, especially for designers who don’t like coding, but it’s going to be interesting.
For a UI designer, Framer X currently has a very bumpy difficulty curve. The interface starts out absurdly minimal. You soon encounter unintuitive concepts like “design components” and “code components”, and the subtle but fundamental differences between Framer frames and Sketch symbols.
Those initial impressions are an uncanny valley that’s not too hard to cross now that Framer X’s API documentation has finally been published. After a bit of poking around in the interface and the docs, the Framer X approach starts to make sense. Frames are just as intuitive as symbols — but they also replace vector shapes. Smart presets on constraint-based alignment makes resizable components even easier than Sketch.
The component store and team store have enormous implications for working as a team. They formalise and extend the old process of symbol libraries into fully functional components, allowing you to leverage React components in a way that’s as expressive as downloading a sketch UI kit. With features like those, knocking together a simple prototype with built-in or publicly available components is a cinch.
On the flip side, going beyond the default parameters in components becomes very complicated, and you need a very good foundation in React (or the ability to call on someone who has) very quickly. I once tried to fix a knotty double scroll bug on an instance of the framer draggable component when it was embedded in a a different component from the store.
I hit a wall, several walls, all of which compelled me to learn a lot more about how Framer X (and by extension React) actually works.
Whilst clinging onto dear life from a particularly steep part of the learning curve, I had an epiphany. It had nothing to do with the double scroll bug, which remains unsquashed. The function that opened my mind to Framer X’s unique take on the future of design tools was property controls.
Property Controls are a bit like overrides in Sketch. They allow you to customise the Framer interface to make any feature of a UI component editable in the Framer sidebar. This is especially useful when prototyping with UI components from the store. A designer can quickly control unique or non-standard features of a component without any coding at all. Switching vertical scrolling to horizontal in a scrolling component or a stack, for example.
Property controls adjust specific properties and variables defined by the developers when the React component is coded, so you know instinctively what parameters are available in the production code.
With property controls, the relationship between production code and prototype code shrinks to almost zero. If you can usefully prototype with production components from the design system (Or team store as Framer calls it), or fine tune their appearance even after they have been coded up— suddenly you have the design-prototyping-development workflow of your dreams; handoffs can happen in any direction, at any time. Prototypes can use live data sources. With the latest release of Framer X, a feature called Framer Bridge attempts to formalise this flexible process.
Part of the role of a Digital product designer is to translate a brand into UI styles that express the core values of the company and product. It’s a form of synesthesia that seems to make non-designers uncomfortable, so it’s often reductively called “beautifying” or “the fluffy stuff”. A designer is defining how a UI feels – transforming absolute values with no inherent feeling into something that their customers instinctively know is right. Turning notes into music. To most people, it’s a kind of Alchemy. UI designers play on the mystery and encourage the myth, but really they shouldn’t.
The “feeling” of a UI can be complicated to define, but not impossible. Hence the best design systems try to outline design intent — like Material Design’s concepts of “elevation”.
It’s these parts of a design system which make it interesting and unique. It’s this DNA that the UI designer spins into myriad component forms, trying to create new things without diverging too far from the original definitions of the brand.
Interestingly, the official Framer store Material Design components in the Framer X store don’t yet fully exploit Material’s “Elevation” guidelines. The card component could easily have a property control for elevation, which has the effect of automatically applying the correct drop shadow and z-index to the component.
Custom properties are ostensively designed to change variables and functionality of individual components. They could also be used to change the properties of an entire design system — and this has some very interesting consequences for UI designers.
UI Frameworks like Bootstrap and Foundation already have theming functionality — global settings expressed as sass variables that allow you to quickly set global colours, fonts, grid spacing etc:
Similarly, a design system usually has a set of global visual properties that apply to the whole interface. Over the development of a design system, with multiple designers working in multiple teams, they are the hardest to keep consistent to the original intent. Tastes wander, interpretations differ.
With global property controls in a design system, we could abstract the feel of an interface away from the absolute values of individual components. We could start talking about previously nebulous terms like roundness, bounciness and density as editable features of our entire UI kit or component library. We could come up with design system specific concepts like elevation. These values could be expressed as relative units, from which the absolute values of the individual components could be derived. Of course, these broad strokes would work best at the beginning of a project with the basic UI kit. Individual or more complex components would still require fine tuning— but Framer‘s system of overrides has you covered there, too.
We could take it further. The potential is there with tools like Framer X to create a UI kit that instantly responds to the fundamental personality of a brand – it’s DNA. In the past, I’ve tested the “feel” of an interface with bipolar scales. What if we created global property controls for these more esoteric concepts and defined their effects in the UI?
With tools like Framer X, the alchemy of “look and feel” could be within reach of non-UI designers. Getting started with new products with a well-defined Framer X design system would take next to no time at all. Even a machine could learn the kind of visual styles that represent brand ideals. Machine learning could analyse branded materials and style guides and algorithmically generate a UI kit with a “feel” sourced from thousands of Framer X design systems.
Machines are replacing skilled jobs across industries. Although the threat of AI driven screen design has been confounded multiple times, Framer X has shown me how it could work. If we can teach machines how to express brands using design systems, they could soon carry out much of the hands-on UI work.
If UI designers are going to stay relevant, we’re going to have to get a lot better at understanding the DNA-like abstractions that connect the code of our design systems with how they feel to the end user. The good news is, we’re an adaptable bunch, and technology like Framer X lets us focus less on menial and repetitive UI tasks, and focus more on the underlying design DNA of our products.
I’m Andy Birchwood, a digital designer specialising. in product design strategy and design systems. I’m available for new contracts! Get in touch if you want me on your team.
Framer X and the DNA of design systems
Research & References of Framer X and the DNA of design systems|A&C Accounting And Tax Services
Source