The ultimate UI design guide
How do we make our design files easier to use for both ourselves and
any other designers that might use our design file? Let’s take a look
Document +
collaborate
Colours
T
he first step is to save all of the
colours to the ‘Document Colors’
swatch if we haven’t done so
already – this will make them easier to
access when we need to apply them in
our design. To do this, open the colour
chooser widget from the Inspector,
choose ‘Document Colors’ from the
dropdown and then click the + icon to
add the colour to the swatch. This works
the same way in most UI tools.Shared Libraries
Next, we need to convert our document- complete with typographic styles,
colours, buttons, common areas and
basic components – into a shared library.
Essentially this means that every
element needs to be a component, even
if it consists of only one layer. Click the
- button in the left-hand side Libraries
sidebar and then import this very
document into a new document. That’s
right: our document is now a library and
is ready to be used to design UIs with
guaranteed consistency.
InVision Studio is somewhat limited
in the sense it doesn’t yet sync with
InVision’s official Design System
Manager tool but it’s easy enough to
house the library in Dropbox for other
designers to use and update over time.
When a change is made (locally or
remotely), every Studio file that uses the
library (again, locally or remotely) will
ask if you want to update the colours
and components. This is how design
libraries are maintained across teams.Design at scale
As a design expands, managing it
becomes harder. There are various
adjustments we might want to make
to keep it efficient and maintainable,
especially since InVision’s DSM doesn’t
work with Studio yet.
For instance, we might want to use
text layers to annotate our library as a
means of explaining the use-cases of
various elements. For the typographic
styles, we could even edit the text to be
more descriptive (eg “<h1> / 1.3 / 44px”).
This says that <h1>s should be 44px and
have a line height of 1.3.Design Handoff
Design handoff tools display the various
styles used by every element in the
design so that developers can build the
app or website. These tools include anRecycle
everything
When it comes to designing
user interfaces that are visually
consistent, reuse everything. Design
buttons, then use buttons to create
button components, then use
button components to create other
components such as alerts and dialogs.
Just don’t create components that
aren’t needed. Remember, building
a library is an ongoing, collaborative
effort. It doesn’t have to be completed
all at once, completed by you alone or
completed ever. It only has to convey
a language.overview of styles and also a copy of the
‘document colors’ swatch. Developers
can even copy these styles as code,
which is excellent if you’ve decided to
create any written design documentation
and you’d like to include code snippet
representations of the components.
InVision’s design handoff tool is called
Inspect and to utilise it all we need
to do is click the ‘Publish to InVision’
button/icon in InVision Studio, open the
resulting URL and then tap I to switch
to Inspect Mode. It’s really convenient.“Our document is now
a library and ready
to be used to design
uis with guaranteed
consistency”
Above InVision Studio makes creating a shareable and
updatable component library a breeze