How to get a variable from FieldWidget in the same modules Template I have module that is currently setup like this

module
  -signature.module
  -signature.info.yml
  -src
    -Plugin
      -Field
        -FieldWiget
          -SignatureWidget.php
  -templates
    -signature.html.twig


Everything in the module works correctly as is. I'm trying to pass a variable $field_name = $items-&gt;getName(); from SignatureWidget.php to signature.html.twig (or signature.module so that I can then pass it to signature.html.twig). I'm trying to do this in order to apply ids generated from a variable in the widget to some of the markup in the template. How would one do this?

I understand how to do this from the .module file (Use a twig template instead of a render array in a custom module admin page), but can't seem to figure it out when it comes to plugin variables.
The hook_theme in module associated with the widget looks like this. 

function signature_theme() {

  $theme = [];
  $theme['signature'] = [
    'render element' =&gt; 'element',
    'variables' =&gt; array('sign_src' =&gt; ''),
  ];
  return $theme;
}


The widget code from SignatureWidget.php looks like this

&lt;?php

namespace Drupal\signature\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element;
use Drupal\Core\Render\ElementInfoManagerInterface;

/**
 * Plugin implementation of the 'field_signature_widget' widget.
 *
 * @FieldWidget(
 *   id = "field_signature_widget",
 *   module = "signature",
 *   label = @Translation("Signature Data"),
 *   field_types = {
 *     "field_signature"
 *   }
 * )
 */
class SignatureWidget extends WidgetBase {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &amp;$form, FormStateInterface $form_state) {

    $value = isset($items[$delta]-&gt;value) ? $items[$delta]-&gt;value : '';


    $file_upload_help = array(
        '#theme' =&gt; 'signature',
        '#sign_src' =&gt; $value,
      );
     $sign_thumb = array( '#type'   =&gt; 'html_tag',
                          '#tag' =&gt; 'img',
                          '#attributes' =&gt; array('src' =&gt; '', 'id' =&gt; 'signature_thumb', 'class'=&gt;array('align-right'), 'width' =&gt;'120px', 'height' =&gt; '60px' ));

$field_name = $items-&gt;getName();

    /*function getFieldName() {
      return $field_name;
    }*/

$text_area_id = 'signature_field_' . $field_name;  



    $element += array(
      '#type' =&gt; 'textarea',
      '#default_value' =&gt; $value,
      '#attributes' =&gt; array(
        'id' =&gt; array('signature_data'),
                        ),
      '#attached' =&gt; array(
        'library' =&gt; array('signature/signature_pad'),
                        ),
    );
    $element['#attached']['library'][] = 'signature/signature_pad';
    $element['#description'] = \Drupal::service('renderer')-&gt;renderPlain($file_upload_help);
    $element['#suffix'] = \Drupal::service('renderer')-&gt;renderPlain($sign_thumb);

    return array('value' =&gt; $element);
  }

}


The template from signature.html.twig looks like this. 

&lt;div class="signature"&gt;
    &lt;canvas width="450" height="200" class="sign-canvas"&gt;SIGNATURE CANVAS&lt;/canvas&gt;
{% if(sign_src != '') %}
    &lt;img src = {{sign_src}} class="sign-img"&gt;&lt;/img&gt;
{% endif %}
     &lt;button type="button" id="clear-sign" class="button clear" data-action="clear"&gt;Clear&lt;/button&gt;
&lt;/div&gt;


I'm trying to return the string value from $text_area_id in SignatureWidget.php from within signature.html.twig
You already pass the template variable sign_src to your template. Now you want to pass an additional variable. You can easily do this by extending your hook_theme implementation:

/**
 * Implements hook_theme().
 */
function signature_theme() {
  $theme = [];
  $theme['signature'] = [
    'render element' =&gt; 'element',
    'variables' =&gt; [
      'sign_src' =&gt; NULL,
      'text_area_id' =&gt; NULL,
    ],
  ];
  return $theme;
}


Then pass the ID into your template like this:

$value = $items[$delta]-&gt;value ?: '';
$text_area_id = 'signature_field_' . $items-&gt;getName();

$file_upload_help = [
  '#theme' =&gt; 'signature',
  '#sign_src' =&gt; $value,
  '#text_area_id' =&gt; $text_area_id,
];


And use it in your template like this:

{{ text_area_id }}


Edit: Some further suggestions for your code snippets:

Wherever possible, you should leave rendering to the theming engine and avoid manually calling the \Drupal::service('renderer')-&gt;renderPlain() method. Your description will do just fine with the render array. Your #suffix can be changed to a distinct child element of your widget element (note: there is no hash before):

$element['#description'] = $file_upload_help;
$element['suffix'] = $sign_thumb;


In your template, you can change the empty check to

{% if sign_src %}
  &lt;img src="{{sign_src}}" class="sign-img" /&gt;
{% endif %}


And should wrap the src URL into quotes.

A final note about the URL itself: It seems to be a user given value. If so, consider using UrlHelper::stripDangerousProtocols before you pass it into the template.