Bridging code & design to build prototypes

How to create a simple login flow with SLDS React and Framer X

Web technology is evolving daily. As designers, we need to take that fact in stride and evolve with it. But even when we keep up with new tech, we can run into problems when it comes to creating realistic prototypes.

Producing prototypes for complex storylines and deep interaction patterns is still hard to achieve with most of today’s design tools. Yes, to create real working concepts we can use design kits in Sketch to generate static assets, then sync those assets to other tools with Sketch plugins. But that means first creating a design, then recreating it in code, plus contending with varying tool preferences from designer to designer. More importantly, over time, changes to underlying tools, frameworks, or technologies could lead to incompatibility between the static design and the code.

Exploring Framer X with a Focus on Efficiency

With all this in mind, I recently decided to explore Framer X, to see if it could help the Integrated Customer eXperiences team make our process more efficient.

Common tools, technologies, and frameworks that the Integrated Customer eXperiences team uses to generate design deliverables

I didn’t come to this decision lightly. Framer X is a powerful tool with a steep learning curve; it requires a working knowledge of Salesforce Lightning Design System for React (SLDS React). My goal, therefore, was to create an “interface” between the SLDS React components and the Framer X canvas that would reduce time spent working in code. This has three advantages for designers:

1. Highly interactive prototypes from the start, with minimal coding.
2. Extending components and creating and testing new patterns becomes faster and easier.
3. Components are always current, making consistency no longer a concern.

Exploring a new deliverable pipeline using SLDS React and Framer X

Project Steps

To create a deliverable pipeline using SLDS React and Framer X, follow these steps:

Prerequisites

If you’re new to Framer X, you can download a free 14-day trial here.

You’ll also need to install:

• Git for version control
• Node.js or yarn for installing and managing packages

1. Create a Framer X folder backed project

To use SLDS React, we’ll need to add packages and versioning. Follow these instructions.

2. Add SLDS React

• Open the terminal
• Go to the Framer project directory.
• Run the following commands to add SLDS React:

3. Creating interface (code component) to use SLDS React

Now we’re ready to bring SLDS React components to the Framer canvas.

• Create a component in Framer X

Framer X interface to create a new component.

“Button” is the first component we are going to work with. Paste this code into the Framer X IDE:

Using Framer APIs to create an interface between SLDS React and Framer X canvas

There are two key pieces of code here:

• addPropertyControls allows us to create component properties, which can be provided at runtime from the Framer X property panel.
• ControlType, as its name suggests, defines the type of control to render in the property panel. This allows the user to provide a value for the component’s runtime property.

“addPropertyControls” and “ControlType” help expose component properties for run time updates

For the Button component, we want to expose only the Label and Variant properties. We can use any of the properties here.

We can also bring the input component over to create the first screen in the login flow. The rest of this screen is made up of images and vectors.

Mockup of a simple login form created by using Button and Input components.

Code for the Input component

4. Make it interactive

Carry the input from the username field forward to the next screen:

Connecting the input field to the text in the next screen

Normally, we’d read the value in the form field and store it in a variable using Javascript; the text field could then hook into the value and display it to the user. The process is similar in Framer X:

• Hook into the onChange or onValueChange property of the input control.
• Listen to updates; keep updating the (data) variable until the user clicks Next.

Adding a processing function truncates the displayed email to fit; the original input value is stored in the data.text variable for later use

• Link data to the text label by creating a design component containing the text label. Give it a name to use as a reference — here, email_label.
• Next, we’ll add the TextOutput override method to assign that value stored to the text.

Connecting overrides, data, and component properties

Success

Hooray, we have an interactive login flow created!

The prototype in action

Go forth and prototype

These instructions make it look easy, but it took a lot of time to figure out this process. I had a few advantages — namely, the use of prebuilt SLDS React components and a lot of help from those in the know. The result is a real working concept that is backward compatible and saves time and labor for both designers and developers.

So where do we go from here? A few possibilities:

• Composing complex components, especially overlapping design and code components
• Generating grids (stacks) of components from data (JSON)
• Controlling routing and contextual rendering through interactions and keystrokes
• Creating a library of Framer components from SLDS React, by automating property controls and deploying them to the Framer Store
• Exploring automated export of web prototypes, for both versioning and variations

Thank you to… 🙏🏽

I’m grateful for the help provided by Framer X team members Amandine, Fernando, and Tisho, who helped me connect the dots much more quickly and easily than would otherwise have been possible. Special thanks to Alan, Lisa, Patrick, and Lydia for helping me fill in the gaps to make this article possible.

Follow us at @SalesforceUX.
Want to work with us? Contact uxcareers@salesforce.com
Check out the Salesforce Lightning Design System