Lookout turned to First Person to overhaul its enterprise website. The goal was to shift from a SASE product company to a holistic Data-Centric Security platform recognized as a Gartner Visionary.

I was directly responsible for:

• Building the Figma component library and design system

• Technical designs

• Creating a Narrative Block system for the Narrative Team

• Client onboarding, training, hand-off, and iterations

Pre-production

Client onboarding & training

I conducted a weekly training series for 8 weeks to introduce advanced Figma tools and best practices.

Narrative blocks

I created a component-based, narrative block system that enabled the narrative team to switch from Miro to Figma. Over 2000 blocks were used.

Brand adoption (technical / practical)

Our work was preceded by new brand design and guidelines that focused primarily on presentations. I explored solutions for accessible / responsive web that respected and enhanced these guidelines.

Design concepting

I provided design production support during the concepting phase. One part was simple library elements like color and type styles, layout grids, and Figma tips & tricks. The other was basic production work: converting desktop concepts to tablet and mobile for practical consideration.

Brand & web grids

Narrative components & blocks

Primary & responsive components

Design library

Figma project

I generally use a modular project system. Shared libraries are hierarchical, starting with the core Brand & Color library. The Web Library contains type / grid styles, components, and template blocks.

Advanced components

I used component properties and nested instances. I made two sets of each component. The primary set was for regular design work. The other set contained all the responsive variants of the primary components.

Block templates

Pages were composed of section blocks. The blocks were saved as components, but designed to be used as detachable templates. They would still have auto-layouts, grids, and inner components after being detached.

Helper kit

The Helper Kit provided component-based annotation and documentation tools, including templates for the Figma thumbnail, system documentation, and sticky notes.

Continuous handoff

Components and blocks were handed off as soon as they were completed. I’d work with the development team to make updates or adjustments when needed, but the overall delivery was really smooth.

Takeaways

Component properties

Figma’s new component properties are a game changer, significantly reducing the need for variants.

What I found most valuable was learning how to effectively use component properties and instance swapping. One part was organizing and exposing them in a designer-friendly way. The other was providing solid examples that the client could emulate in future components.

Touchstone & milestone files

Figma makes it easy for stakeholders and others to leave comments directly on designs, but it’s messy.

Touchstone files would be specifically for feedback:

• Copy the design layout to the touchstone file

• Use a left-to-right sequence (oldest to newest)

• Provide a consistent destination for stakeholders

• Retain feedback discussions

• Help everyone keep track of progress

Milestone files would be the final destination for production designs. Again, it would be a separate file, following the touchstones, devoid of comments and clutter.

Developers, marketing, etc would rely on milestones as their source of truth. They could have version numbers to better correlate to each production release.

radleymarx@gmail.com

thanks for the visit!  ❤︎