sympli.io Open in urlscan Pro
18.213.49.131  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Simpli.io
Solutions
Sympli Versions Work collaboratively without overwriting or losing previous
versions of your work
Sympli Pulse Manage design changes made over time, and track activities, updates
and comments
Sympli Handoff Allow engineers to export design specifications directly from
approved design files
Resources
Downloads Download Apps & Plugins and learn how to install and use them
Case Studies See how our clients leveraged Sympli to improve their output
Blog Stay up to date with the latest news, tips and tricks
Features
Design Systems
Version Management
Self-Hosted Option
Pricing
Enterprise
Sign up for free
Sympli Versions
Sympli Pulse
Sympli Handoff
Start 30-day Trial Download now
Sympli Versions
Sympli Pulse
Sympli Handoff


CREATING AND MANAGING DESIGN SYSTEMS WITH FIGMA AND SYMPLI HANDOFF


Daniel Schwarz
May 11, 2022


According to the 2021 Design Tools Survey, Figma is the most popular UI design
tool. One of the reasons for this is that its style, component and library
features are considered to be the best for creating design systems. When paired
with Sympli Handoff, designers can hand off and manage their design systems more
efficiently, too.

In this tutorial, we’ll show youhow to use Figma’s design system features to
ensure that designs are clean, organized and visually consistent. You’ll also
learn how to level up your design system even further using Sympli.



CREATING TEXT STYLES IN FIGMA


The best way to start a design system is to create a type scale: a systematic
set of incremental font sizes that will help to convey visual hierarchy through
typography. The most efficient way to accomplish this is with a Figma plugin,
such as Typescales. Simply run the plugin (Main menu → Plugins → Typescales),
define the type scale settings and then click “Generate.”

If you haven’t created a type scale before, change the “Basesize” setting to 20.
Leave the “Scale” setting at 1.25, which is the most common choice. Change the
“Line Height” setting to 1.5, which is usually the optimal value and also the
minimum value as recommended by the Web Content Accessibility Guidelines (WCAG).

Set “Scale ↑” to 3 (which generates font sizes for 3 heading levels) and “Scale
↓” to 1 (which results in a font size at 16px, the minimum font size as
recommended by the WCAG, which can be used for small text as needed). Apply
“Round Values” because clients (e.g., web browsers) will do this anyway.



After clicking “Generate” the type scale should appear on the canvas.



Next, define the font family, (font) style and letter spacing for each of the
generated text layers from within the “Design” panel on the right side. The
letter spacing should be 0.12 times the font size (e.g., 20px × 0.12) in order
to meet WCAG accessibility requirements. As for the font family and style,
choose wisely to ensure optimal legibility and readability. If any other font
variations are required, go ahead and create those too.



Now let’s make these text layers design system-ready. After selecting one of the
generated text layers, click the four-dot icon (“Style”) under “Text” in the
design panel and then the + icon (“Create style”) to turn it into a “Text Style”
that we can reuse in our Figma designs and maintain in our design system. Repeat
this step for the other text layers, making sure to name them methodically when
asked to. For example:

 1. “Heading/1”
 2. “Heading/2”
 3. “Heading/3”
 4. “Base (Body)”
 5. “Small (Minimum)”



Note: “1/2/3” will be organized into a category called “Heading” in order to
keep the list of text styles in Figma organized.

Finally, double-click on “Page 1” from within the “Layers” panel on the left and
rename it to “Typography” before creating another page called “Colors” by
clicking on the + icon.




CREATING COLOR STYLES IN FIGMA


On this new “Colors” page, create a rectangle shape (keyboard shortcut: R) for
each design system color and apply its “Fill” using the design panel. Do this
for brand colors, alert colors, neutral colors and so on, and organize them how
you see fit.



An effective method of creating neutral colors that compliment brand colors is
to generate tinted and shaded variations of brand colors. The Tints and Shades
Figma plugin, when run, will generate 10 additional colors using any selected
layer with a fill applied. An optimal brand color (one that’s not too light or
too dark) will result in a white/white-ish color, a black/black-ish color and
several tinted and shaded variations that you can use as needed.



Figma plugins, such as Tints and Shades and the aforementioned Typescales, are
fantastic for creating design systems and speeding up the design workflow
overall.

Convert the fills into “Color Styles” the same way that you created the text
styles.




CREATING COMPONENTS IN FIGMA


Next, create your reusable design elements (e.g., buttons) and convert them into
components (keyboard shortcut: ⌥ Option + ⌘ Command + K for macOS or Ctrl + Alt
+ K for Windows). Organize different types of components into different pages as
you see fit and remember to incorporate your text styles and color styles for
visual consistency.

When you need to create slight variations of components, select the component
and click “Variants” in the design panel. This is more efficient than creating
completely new components. For example, a single button component can contain
variants for different colors, sizes and states.

As usual, name them methodically.


Note: converting layers into components can sometimes override Auto Layout
settings, so make sure to double check those after creating your components.



SYNCING DESIGN SYSTEM CHANGES TO SYMPLI


Finally, let’s sync these design system elements to Sympli using the Sympli
Handoff plugin.

With Figma being a UI design tool with many real-time collaborators all working
at once, it can be difficult for designers to know which design system elements
they can use and which are currently being worked on. Sympli, however, offers a
true single source of truth where the only changes to track are changes that
have been fully approved and synced.

Also, Sympli design systems can store types of design tokens that Figma can’t,
such as spacings and sizes.



USING THE SYMPLI HANDOFF PLUGIN


You can use the Sympli Handoff plugin from within any open Figma file, including
Figma libraries. Just run the plugin, switch to the “Design System” tab, specify
any settings, then click “Continue” before choosing a Sympli design system to
sync to.




The Sympli Handoff plugin syncs color styles and text styles (but does not
affect styles or layout grid styles). It also uploads any fonts used.

Once synced, Sympli translates these into design tokens with pre-generated code
for developers. Spacing and size tokens can be created manually from within the
Sympli web app. Grid settings and web units (px/rem) can also be defined
manually.



Sympli design systems can be shared across multiple Sympli projects for complete
consistency. Sympli is continuously improving its design system features. Stay
tuned for components support and more.

Get Sympli
Sympli Versions Sympli Handoff Sympli Pulse Downloads Self-Hosted Option
Resources
Help Center Case Studies Blog
Pricing
Price Tiers ROI Calculator
Enterprise
Enterprise Solutions Design Automation
Contact us
Suggest a Feature Report a Bug Send a Message Chat With Us
facebook instagram twitter linkedin
Privacy Policy Security
Sympli, 1211 31st St NW, Washington, DC 20007